In THREE.js, if I have multiple calls to the JSONLoader to load multiple objects like this (simplified example):
function init() {
var loader = new THREE.JSONLoader();
loader.load("mesh1.js", createScene);
loader.load("mesh2.js", createScene);
}
function createScene( geometry ) {
if (geometry.filename == "mesh1.js") {
mesh1 = new THREE.Mesh( geometry, material );
scene.add( mesh1 );
} else if (geometry.filename == "mesh2.js") {
mesh2 = new THREE.Mesh( geometry, material );
scene.add( mesh2 );
}
}
How can I determine which mesh has been returned on callback, especially when they frequently arrive out of order?
I'm trying to handle multiple returned meshes with a single generic callback function. Is there some property in the returned geometry that indicates the original filename that I can test against?
Or perhaps there's a more elegant way? Perhaps creating a new THREE.JSONLoader object for each call would help the callback function determine which mesh has arrived?
I appreciate any help/ideas! Thanks!
well there is a more generic way then what WestLangley proposes.
loader.load( "mesh1.js", meshloader("mesh1.js"));
loader.load( "mesh2.js", meshloader("mesh2.js"));
then
function meshloader(fileName){
return function(geometry){
...
}
}
This way, you can add a identifier on each loaded file.
How about something like this?
loader.load( "mesh1.js", function( geometry ) { createScene( geometry, 1 ) } );
loader.load( "mesh2.js", function( geometry ) { createScene( geometry, 2 ) } );
Then,
function createScene( geometry, id ) {
...
}
The id can be the mesh name if you prefer that.
Related
I am trying to replace a cube mesh with a car mesh using .obj and .mtl files (using three.js)
But every everytime I got this error:
Uncaught TypeError: e.OBJMTLLoader is not a constructor
I made sure to include the library () and there is no typo.
This is how I load the mesh model:
var loader = new THREE.OBJMTLLoader();
loader.load('./toycar.obj', './toycar.mtl',
function (object) {
toycar = object;
toycar.rotateX(-12); //toycar.rotateZ(-10.99);
toycar.rotateY(4.718);
scene.add(toycar);
});
and this is how I use it to move the model on the y axis:
if (toycar != undefined){
toycar.position.y = disp * 0.07; // z for rightLeft, y for upDown
var relativeCameraOffset = new THREE.Vector3(5, 0, 0); // change camera offset
var cameraOffset = relativeCameraOffset.applyMatrix4(toycar.matrixWorld);
camera.position.x = cameraOffset.x;
camera.position.y = cameraOffset.y;
camera.position.z = cameraOffset.z;
camera.lookAt(toycar.position);
}
At this point, I am not sure what caused this error to happen.
THREE.OBJMTLLoader does not exist in the repository. There is only OBJLoader and MTLLoader. The latter one is only required if you want to load materials, too.
I suggest you study webgl_loader_obj_mtl to show how both are used. Typical code looks like so:
new MTLLoader().load( 'materials.mtl', function ( materials ) {
materials.preload();
new OBJLoader()
.setMaterials( materials )
.load( 'object.obj', function ( object ) {
scene.add( object );
} );
} );
I can't seem to get this model to animate in three.js.
I've tried exporting it so many different ways, but I'm not sure if it's the model or the code. I'm getting a trace on the animations from the model, but nothing happens on the call-back. Any ideas?
new THREE.JSONLoader().load( 'assets/model/Gunnar.json', function ( model, material ) {
var mesh = new THREE.SkinnedMesh(model, material);
scene.add( mesh );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 5;
var clips = model.animations;
mixer = new THREE.AnimationMixer( mesh );
mixer.clipAction( clips[0] ).play();
loaded = true;
animate();
} );
function animate() {
requestAnimationFrame( animate );
if (loaded) {
mixer.update(clock.getDelta());
}
renderer.render( scene, camera );
}
Blender/JSON files:
https://www.dropbox.com/s/lxy6q3wjydmtlhd/json_blender_files.zip?dl=0
I wish to group loaded json models in THREE.js but am getting an error...
THREE.Object3D.add: object not an instance of THREE.Object3D
I'm using the example code of...
var group = new THREE.Object3D();
and then...
group.add(model1);
group.add(model2);
I load model1 and model2 previously - these render out fine when I add them to the scene individually, but when I add the group I get the error...
scene.add( group );
I've tried a combination of different techniques such as THREE.Mesh() or adding json models to other json models eg. model1.add(model2).
R72
The problem is asynchronous loading of the models - trying to perform actions on the models before they are loaded.
group = new THREE.Mesh(); //global to add transforms
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "model1.json", function(geometry,materials) {
var mesh = createMesh(geometry,materials); //function to create generic mesh properties
group.add(mesh);
});
jsonLoader.load( "model2.json", function(geometry,materials) {
var mesh = createMesh(geometry,materials); //function to create generic mesh properties
group.add(mesh);
});
scene.add( group );
function createMesh( geometry, materials )
{
var material = new THREE.MeshFaceMaterial( materials );
mesh = new THREE.Mesh( geometry, material );
return mesh;
};
So basically, I am making a robot object in javascript using Three.js and am passing in the three.js scene variable object I am using to draw the robot parts through the array- for some reason, though, the scene object will not pass into the function (it won't draw)- Am I missing something about javascript functions?
function Robot(sc){
this.sc=sc;
var robtexture = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('tex/dmetal.png')
});
this.parts = [];
var current;
//make body
current=new THREE.Mesh(new THREE.CubeGeometry(10,15,10), robtexture);
this.parts.push(current);
alert("hit");
//make legs
}
Robot.prototype.draw = function() {
for (x in this.parts){
this.sc.add(x);
alert("hit");
}
}
Maybe this works more like you intended:
Robot.prototype.draw = function() {
for (x in this.parts){
this.sc.add(this.parts[x]); // < - spot the difference :)
alert("hit");
}
}
So I am working with the webgl_interactive_cubes.html in the three.js examples, and I have a relatively simple question: Is it possible to test for intersection of a ray with the children of an object.
for example, if I do something like:
for ( var i = 0; i < 2000; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
scene.add( object );
}
When I call
var intersects = raycaster.intersectObjects( scene.children );
It will intersect these objects. However if I first create a 'subScene' like so:
var subScene = new THREE.Object3D();
scene.add(subScene);
And then add all of these objects to the subScene instead of the scene, the intersection will no longer occur.
Is it at all possible to intersect ALL the objects in the scene and subscenes ( in the final project I would like to have many layers of nested subScenes ) Or should I try to keep all objects in the same scene if I am using raycasting?
Thank you in advance for your time,
Isaac
You just need to set the recursive flag:
var intersects = raycaster.intersectObjects( scene.children, true );
three.js r.58