did build a scene with an animated object, using the GLTFloader.
in Chrome it works
in Firefox not, Edge also not, Opera neither.
all have the same kind Error… some variable is not defined.
what can i do about this, i am only a newby in three.js
the Firefox console says:
TypeError: scope.manager is undefined - [GLTFLoader.js:47:4]
Edge Console:
SCRIPT5007: SCRIPT5007: Unable to get property ‘itemStart’ of undefined or null reference [GLTFLoader.js (47,4)]
Thank you
/**
//////////////////////////////////////////////////////////////////////////////////
// :. SETUP Three.js Scene .: ///
//////////////////////////////////////////////////////////////////////////////////
**/
var scene, canvas, camera, renderer;
var myWidth = 640;
var myHeight = 360;
// :. Scene
scene = new THREE.Scene();
canvas = document.getElementById( 'tree-canvas' );
canvas.style.width = myWidth + "px";
canvas.style.height = myHeight + "px";
// :. Renderer
renderer = new THREE.WebGLRenderer( {antialias: true} );
renderer.setSize( myWidth, myHeight );
canvas.appendChild( renderer.domElement );
// :. Camera
camera = new THREE.PerspectiveCamera( 50, myWidth / myHeight, 1, 5000 );
camera.position.y = 15;
camera.position.z = 50;
camera.lookAt( scene.position );
/**
//////////////////////////////////////////////////////////////////////////////////
// :. ADD - Scene - Performance Check .: ///
//////////////////////////////////////////////////////////////////////////////////
**/
// :. Usage Statistics
var stats = new Stats();
document.body.appendChild( stats.dom );
/**
//////////////////////////////////////////////////////////////////////////////////
// :. Loader Animation .: ///
//////////////////////////////////////////////////////////////////////////////////
**/
var clock = new THREE.Clock();
var loader = new THREE.GLTFLoader();
var mixer, gltf;
loader.load( 'objects/animations/vFX_CubOcta_TESTING3.glb', function ( gltf ) {
scene.add( gltf.scene );
var model = gltf.scene;
mixer = new THREE.AnimationMixer(model);
var clip1 = gltf.animations;
// Play all animations
clip1.forEach( function ( clip1 ) {
mixer.clipAction( clip1 ).setDuration( 2 ).play();
} );
}, undefined, function ( error ) {
console.error( error );
} );
/**
//////////////////////////////////////////////////////////////////////////////////
// :. Game Logic .: ///
//////////////////////////////////////////////////////////////////////////////////
**/
function render() {
// grpAxis.rotation.y += 0.01;
var dt = clock.getDelta();
mixer.update(dt);
renderer.render( scene, camera );
}
function animate() {
requestAnimationFrame( animate );
render();
}
animate();
The model looks fine in gltf-viewer.donmccurdy.com/. The error makes me assume something is wrong in the libs/tree folder – would you be able to ZIP up the whole directory? Or host a live version of the demo? I’d have to guess what versions of everything in libs/tree you’re using otherwise.
The mixer.update error is probably just because you’re calling it before the loader has finished loading, and that’s when the mixer is created. Instead, do:
when online it spits out the same error in Chrome, as it does in the other browsers
if i put the whole project in a new folder, it does not work either???
Yes, you should always use the same version of three.js for all of your files. Newest version (r113) can be downloaded from the main three.js page or from npm.
downloaded the latest version from tree.js
replaced the three.js and the GFTLloader, but then it does not load/display the object
yet the files from @Darcey do work…
very strange this is…
and with the files from Darcey i cannot set the duration anymore…
it aint yet completely user friendly…
@DolphinIQ
it seems the folder where the three.js is placed in is not allowed to be called three
when i make it three-r6… NP
if i make it just three… update all the source links in html…nothing loads
if i add something behind the nae like three-r6… all works again…
strange but working again…
also can set the speed…(duration)
This is more of a general coding guide than threejs specific but you should try to keep a clean folder structure, the project I gave to you has a solid and common folder structure that allows you to be sure where everything goes and others if/when they come to ever work on it…
I have a download of the latest version of three from github, I just copied the files I needed to a version named folder in the “includes/js/” folder. Named what it is “three” and its revision/version number “r111.3” etc. You could put the whole threejs folder in your javascript folder if you wanted (EG see video below).
Example:
Then you just upload the includes folder and index.html file to your server and all should be fine. Do not upload the node_modules folder…
Naming rules / best practices
Don’t use spaces in file names and no special characters, try to just stick with numbers, letters and dashes.
@Darcey
Thank you, that was a good insight, apreciate this very much…
also finally understand what this npm is all about…
installed it… and it works
i have PyCharm as an Dev Toy
once pm was installed it wa setup automatically on next boot and terminal worked…
if i may ask, where does he get the three library from… does it download it every time i do… npm i three
Yes I created the library aftc.js
aftc.min.js is the minified/compressed build of the library which I use in most of my projects, it has many useful utilities that I use on a daily basis with all my javascript projects. I switch to aftc-modules for ES6 webpack projects. onReady, log wouldn’t work without aftc.js for example.
Where did I get the three library from?
“npm i three” this install threejs at its latest version. you need to google npm and take a look at the npm website. NPM projects are setup on github and npm links to them for download. Three is on github and npm and has links on its website for download.
If you were going to setup your project correctly you would use a packager to build your project eg gulp or webpack, here is a very very quick video I’ve done on how that works. So no more copy and pasting files around, 1 file is built into the includes/js/ folder and you just include it into your html file.
@Darcey
wooow… or HOOOO, this is a lot to take in…
i’m just getting started with coding a website, knowing i am learning something complex.
working in my new website and have the intro almost ready, if done i will try to implement what you showed here, it looks like the proper way of doing things.
do you maybe have time for a 101 a questionnaire so i can ask questions in real time?
thank you very much for your support, i like to learn and do it in a proper way…
The best way to learn is, when you have a question google it or search for a video on it on youtube, there’s millions of references to what I’ve covered and more and in a lot more detail and slower and with voice overs lol… But you also got to try out things which is a big thing in the learning process.
And if your still stuck there are these forums, so if it’s threejs related, post here, if it’s just javascript related post on stackexchange and people will help, although they are often moody, arrogant, argumentative and condasending on stackexchange (event the mods/admins), but just ignore them and keep asking what you need to know and someone may shed light on your problem.
But try and stick to the structures I’ve shown you and you wont go far wrong. Here’s a structure with much more asset foldering for example.
thank you…
could not resist to try to build a project the way you showed…
if i do exactly what you show, it stops at: gulp build
it says
‘gulp’ is not recognized as an internal or external command,
operable program or batch file.
it also does not show up like an accepted function. i tried it a few times, install the gulp, gulp-concat, gulp-terser, once when i selected the project root folder, the other time the package.json or the gulpfile.js
did read on the internet it could change the outcome, but it did not…
the package.json file shows the 3 gulp devDependencies
still it does not build the project
can you think of something that goes wrong?
i’m using PyCharm instead of VS Code
in VS Code i get this error message
gulp : The term ‘gulp’ is not recognized as the name of a cmdlet, function, script file,
or operable program. Check the spelling of the name, or if a path was included, verify
that the path is correct and try again.
At line:1 char:1
