When I'm trying to import OrbitControls from the ThreeJS examples, the following errors appear: Attempted import error: 'OrbitControls' is not exported from 'three' (imported as 'THREE').
Here is an example:
https://codesandbox.io/s/lyz5y4kq0z
There is now a very simple solution using the standard "three" npm package, just :
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
I think you're trying to access OrbitControls from the instance of THRRE like below
const controls = new THREE.OrbitControls();
But you should try to access the Orbitcontrols like following way
const controls = new OrbitControls();
You can't get rid of this error, if you try to initiate it from THREE. Thanks
DEPRECATED, PLEASE CHECK https://stackoverflow.com/a/65619187/7355534
I finally solved my issue with a simple solution: I removed the code example provided by ThreeJS and I replaced it with a fix.
I've published the corrective here (with some doc): https://gist.github.com/bastienrobert/f381d642da9abaaaf271866db9da59a7
If you have any recommandations, be free to comment!
Related
I compressed my models and textures with gltfpack and now they are invisible in A-Frame 1.1.0. In gltfpack, I used -tc to convert the texture files to BasisU and left everything else as is. When I loaded them in A-Frame, the models aren't there. Interestingly, the models work in Don McCurdy's viewer. Update: there is a relevant Javascript console message
THREE.GLTFLoader: setKTX2Loader must be called before loading KTX2
textures.
So it appears I'm misusing Three.js.
Here is a bare Glitch showing the issue. There should be two models visible in the scene but only the unprocessed one is there. Anyone know I could fix it?
The models are working with Don's viewer because he isn't using the standard gltf-model component, but uses a raw threejs loader(with multiple extras):
const loader = new GLTFLoader().setCrossOrigin('anonymous');
loader.setDRACOLoader(new DRACOLoader().setDecoderPath('./wasm/'));
loader.setKTX2Loader(new KTX2Loader().detectSupport(renderer));
Afaik the KTX2Loader on the threejs repo is available only as a module (here), so I've managed to make it work by creating my own module which imports the KTX2Loader. In a nutshell:
// probably only need the KTX2Loader since aframe gives access to
// the GLTFLoader and DRACOLoader.
import { GLTFLoader } from './path_to_three/examples/jsm/loaders/GLTFLoader.js';
import { KTX2Loader } from './path_to_three/examples/jsm/loaders/KTX2Loader.js';
import { DRACOLoader } from './path_to_three/examples/jsm/loaders/DRACOLoader.js';
// this is a 'minimal' version of the gltf-component,
// a more faithful one is linked later on
module.exports.Component =
AFRAME.registerComponent("full-gltf-model",
schema: { type: 'model' },
init: function() {
const loader = new GLTFLoader().setCrossOrigin('anonymous')
.setDRACOLoader(new DRACOLoader().setDecoderPath('./wasm/'))
.setKTX2Loader(new KTX2Loader().detectSupport(renderer));
var src = this.data;
// load the model:
loader.load(src,
function gltfLoaded(gltfModel) {
let model = self.model = gltfModel.scene || gltfModel.scenes[0];
// assuming el is an entity;
el.setObject3D("mesh", model);
}, undefined /* in progress */,
function error(err) {
console.log("error:", err);
})
}
})
I've bundled it with browserify (browserify index.js -p esmify > dist/full-gltf-model.js), and used like this:
<!-- Somewhere in the scripts -->
<script src="dist/full-gltf-model.js>
<!-- Somewhere in the scene -->
<a-entity full-gltf-model="#model"></a-entity>
You can check it out here. The models are straight from Your glitch (credited to you ofc).
Feel free to check out the directory with the component and package.json. I'm pretty sure the bundle contains already defined stuff (1Mb even with only the KTX2Loader imported o.O), so there definitely is room for improvement. Still this seems like a good start :)
Just want to provide an updated answer to this--this is now natively supported in A-Frame. Just do the following:
<a-scene gltf-model="dracoDecoderPath: https://www.gstatic.com/draco/v1/decoders/;
basisTranscoderPath:https://cdn.jsdelivr.net/npm/super-three#0.141.0/examples/js/libs/basis/;;
meshoptDecoderPath: https://unpkg.com/meshoptimizer#~0.18.1/meshopt_decoder.js;">
Note: that basisTranscoderPath is only on master right now--so, not included yet in A-Frame 1.3.0, you'd have to pull master and run a build at the moment. Next release will have it, though. (see the PR)
See the docs on this: https://github.com/jameskane05/aframe/blob/9df1d2cb50ab12aa341cc250c703624510d25deb/docs/components/gltf-model.md
The official master build links are currently lagging behind, and using a github cdn won't work because dist files are not being committed in the last few months, but I made a build and put it on a glitch project of mine--you can use that file at this link if you need this if aframe 1.3.0 is still the most recent version out for you:
https://gltf-packed.glitch.me/aframe-diego.js
(this is a dev build of a particular branch of diego's fork as of oct 15 2022)
I'm trying to use a number of d3 packages in a Vue.js project with NPM for package management. I was trying to make a fiddle of a problem I'm having but am unable to replicate the issue there - the code works exactly as it should do.
I'm trying to identify differences between the code running in JSFiddle and the code running in my app and (aside from obvious fact that I'm not running Vue.js in the fiddle) the big one is how I'm importing my extra libraries. In the fiddle I'm adding links to the relevant libraries from CDNJS while in my app I'm using NPM and import. This is all to run charts using dc, which builds on a lot of d3 features. My complete imports for the chart component is:
import dc from 'dc'
import crossfilter from 'crossfilter2'
import * as time from 'd3-time'
import * as scale from 'd3-scale'
I'm not using any features from the base d3 module.
The fiddle in question is here: https://jsfiddle.net/y1qby1xc/10/
I am now using the following structure in my Vue projects. I am making a separate file to import all the needed modules and to export them all at once.
In ./src/assets/d3/index.js:
import { select, selectAll } from 'd3-selection';
import {
scaleLinear,
scaleTime,
scaleOrdinal,
schemeCategory10,
} from 'd3-scale';
import { axisTop } from 'd3-axis';
export default {
select,
selectAll,
scaleLinear,
scaleTime,
scaleOrdinal,
schemeCategory10,
axisTop,
};
Then I import everything into my component and I am able to use all functions with their d3 prefix: d3.select, d3.selectAll etc.
In ./src/components/MyComponent.vue:
<template>
</template>
<script>
import d3 from '#/assets/d3';
export default {
data() {
return {
};
},
};
</script>
I'm trying to add RxSwift to my project. Added RxSwift and RxCocoa to my Podfile but when I compile I get this error:
Tried in another empty project and it all works fine. Can't find what's causing this.
EDIT:
Seems like it fails to build Rx-Cocoa. No idea why.
Don't use self.text, That's wrong you can access the Base class you are extending through base property.
In this case base property is gonna be UITextField.
extension Reactive where Base: UITextField {
public var textInput: TextInput<Base> {
return TextInput(base: base, text: base.text)
}
}
import Foundation
import RxSwift
import RxCocoa
//code insert here!!
I got this error when I use kal library its inside KalLogic.m
No Known class method for selector 'dataForDay:month:year'
Any suggestion to fix it
Screen shot of problem
First make sure you import NSDate+Convenience library
import NSDate+Convenience.h
Second add "-ObjC" to the additional flags
Sorry for my English.
I've got a problem while working with Three.js.
In every example of loading a texture I see this code:
var map = THREE.ImageUtils.loadTexture( "obj/textures/textures38.jpg" );
map.wrapS = map.wrapT = THREE.RepeatWrapping;
map.repeat.set( 3, 3 );
Could you tell me, why can i get messages like
Uncaught TypeError: Cannot call method 'loadTexture' of undefined
This works well:
var material=new THREE.MeshPhongMaterial({color:16777215,map:ImageUtils.loadTexture("obj/textures/textures38.jpg")});
P.S. Three.js version that I currently use is not last
Thank you.
P.S. Three.js version that I currently use is not last
You just answered your own question. Probably that version didn't have ImageUtils namespaced yet. Always recommended using the latest version.
I used
import { BasisTextureLoader } from './jsm/loaders.basisTexureLoader.js';
const loadersvariable = BasisTextureLoader.load("img.jpg");
You need to change permissions on the folder and file or you will get a 403 forbidden error. Point the import path to the dependency to the three.js loader folder but it all has to be together cause all the file link together then you have to call the variable from the file for it to be live without calling the variable from the file you get uncaught referenceError: BasisTextureLoader is not defined
or you can do
<script type="module"> import { TextureLoader } from './src/loaders/TextureLoader.js';
const imagevariablename = new Textureloader.load("image.jpg");
also the displacementmap of examples folder in three.js has a working texture.loader already to copy