I used clara.io to export a model with four textures on it in the ThreeJS Object format. It results in a .json file. I am trying to load it and have it display correctly. If I do the following(taken directly from the clara.io exporting help), it loads and displays but without textures:
var loader = new THREE.ObjectLoader();
loader.load( "wsc3.json", function(obj){
scene.add(obj);
});
One thing that I have found, is, in reference to using a different kind of loader, it should be possible to convert the loaded object into a THREE.Mesh, get the textures, and then apply them to the mesh. I have a working example of this:
loader = new THREE.JSONLoader();
loader.load("wsc3.js", function(geometry, materials){
// get the materials loaded from the file
var materialsFromFile = new THREE.MeshFaceMaterial(materials);
// create our mesh with the loaded geometry and materials
mesh = new THREE.Mesh(geometry, materialsFromFile);
scene.add(mesh);
});
The problem with using the JSONLoader is that the model I am exporting has subparts, and when the .js file that the JSONLoader uses is exported, it loses the model hierarchy(I checked the .js file itself and none of the subparts are there. It is just a huge list of vertices). If I have a look at the .json file that clara.io exports, I can see the various subparts listed, so I would guess that I need to use this format.
I have looked around and seen that there is the suggestion to just create a new mesh from the obj that is generated by the ObjectLoader. Something like this:
var loader = new THREE.ObjectLoader();
loader.load( "wsc3.json", function(obj){
// get the geometry from the obj
var geometry = obj.geometry;
// get the materials from the obj
var materials = obj.materials;
mesh = new THREE.Mesh(geometry, materials);
scene.add(mesh);
});
Unfortunately, this doesn't work. Nothing displays. I can't figure out what I am doing wrong. Is there a format that Three.js will load, that not only brings the textures but the hierarchy as well?
Related
I have an .STL file which I imported into Blender. Then I exported it to .json to load into THREE.JS
Here's what the model looks like inside Blender.
And here's what the model looks like inside my web app after loading it through THREE.js.
And here's the code to load the exported .JSON.
var loader = new THREE.JSONLoader();
loader.load('model/floor.json', function(geometry, materials) {
var materialsArr = materials;
scope.mesh = new THREE.Mesh(geometry, materialsArr);
console.log(scope.mesh.material);
scope.mesh.material.color.setHex(0x8a8d8f);
scope.mesh.translation = geometry.center();
scope.mesh.castShadow = true;
scope.mesh.receiveShadow = true;
scene.add(scope.mesh);
}
You'll see that the floor is gone and in place there are lines running. I've tried triangulating the model in Blender before exporting but it didn't fix anything.
Is there some sort of setting or modifier that I didn't set?
Your normals are a mess. In Edit Mode in Blender, press Ctrl + N to recalculate your normals before exporting.
When I import a .json model from Blender into three.js, the model does not look as it should be. It looks broken.
Here the code I used for loading my model:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load('models/SideMattress.js', addModelToScene);
And this how I add it to the scene:
var textureLoader = new THREE.TextureLoader();
var map = textureLoader.load( "textures/SideMattress-TM.jpg");
var displacementMap = textureLoader.load("textures/SideMattress-DM.jpg");
var normalMap = textureLoader.load( "textures/SideMattress-NM.jpg" );
var material = new THREE.MeshPhongMaterial({
map: map,
normalMap: normalMap,
displacementMap: displacementMap,
});
sideMattress = new THREE.Mesh(geometry,material);
sideMattress.position.y = 1.7; //set the y position
scene.add(sideMattress);
I'm attaching the JSON file from Blender exporter as a screen shot since its very long...
JSON File from Blender Exporter
I'm not sure if the problem is with the exporter or the way I use the mesh materials, or the model itself. Here is the result I get in my browser before and after texture mapping.
The model before & after adding texture mapping inside Three.js and how it should look like
Note that when I also add the displacement map, it has no effect which is not how it is supposed to.
Thank you guys in advance
I have imported a model into my Three.js scene. I am able to move and rotate the bones but the model's geometry does not move with the bones.
Here is the code I have used to import the JSON file and add it to the scene,
/*load JSON file*/
// instantiate a loader
var loader = new THREE.JSONLoader();
loader.load( 'https://cdn.rawgit.com/wpdildine/wpdildine.github.com/master/models/cylinder.json', addModel );
var helpset;
var scaleVal = 3;
function addModel( geometry, materials ){
materials.skinning = true;
var cs = scaleVal * Math.random();
mesh = new THREE.SkinnedMesh( geometry, new THREE.MeshFaceMaterial(materials) );
scene.add(mesh);
helpset = new THREE.SkeletonHelper(mesh);
scene.add(helpset);
}
The JSON file that I have imported includes weights so I did not think I had to add them myself. Would it be anything to do with binding the skeleton to the mesh?
Here is a link to my code - https://jsfiddle.net/joeob61k/1/ (New link with scripts, thanks #Mr. Polywhirl)
As you can see, 'Bone_2' in the GUI controls moves one of the bones but not the mesh.
EDIT: I have tried accessing the bones of the mesh in the render() function. I have done so by using the following line of code,
mesh.skeleton.bones[2].rotation = 0.1;
I get the following error: 'Cannot read property 'skeleton' of undefined(…)' were undefined is the mesh variable. Is there a new way of accessing the bones of a SkinnedMesh that I need to use?
The problem was with the line,
materials.skinning = true;
It needs to be the following to work,
materials[0].skinning = true;
Is it possible to differentiate between the meshes within one .js file exported from blender and animate them separately using Three.js?
The cube I would like to select is named "Cube" loads properly. However, when I try to get it by Name or Id, it doesn't recognize the var item1.
loader = new THREE.JSONLoader();
loader.load('engine.js', function (geometry, materials) {
var mesh, material;
material = new THREE.MeshFaceMaterial(materials);
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(1, 1, 1);
var item1 = scene.getObjectByName("Cube");
item1.position.x = 15;
scene.add(mesh);
});
I found this post but it seems unresolved: Three.js load multiple separated objects / JSONLoader
What is the best approach to loading multiple meshes via JSONLoader? I'd prefer to load them together as one .js file and just select the ones I would like to animate.
Thanks for your help!
In your blender scene you need to name every mesh you want to access independently in three.js. Then you can use Object3D.getObjectByName() to access your mesh in three.js.
Yes, it is possible to load an entire scene with several meshes from a json file exported from Blender!
You can see the complete process described on my answer of the cited post
So, you can differentiate between the meshes using the getObjectByName method and manipulate them separately. But it is important to know that the loaded object isn't a Geometry anymore. It is labeled with the Scene type by now and it must be handled in a different way.
You must change the loading code for one like this:
loader = new THREE.JSONLoader();
loader.load( "obj/Books.json", function ( loadedObj ) {
var surface = loadedObj.getObjectByName("Surface");
var outline = loadedObj.getObjectByName("Outline");
var mask = loadedObj.getObjectByName("Mask");
mask.scale.set(0.9, 0.9, 0.9);
scene.add(surface);
scene.add(outline);
scene.add(mask);
} );
In the above code we can indeed animate the surface, outline and mask meshes independently.
I'm trying to import a model that was exported from blender using the THREEJS exporter.
So far the model loads and appears in my scene with the materials being applied correctly (Car is yellow as it's supposed to be and the glass is transparent as it's supposed to be.)
But it's not applying my textures to the car which are saved in .tga form.
If I DO NOT include the textures in my server directory where the model is i will get this error:
http://novsstudio.com/race/model//wheel.tga 404 (Not Found)
Notice it has two /'s after model.
I'm not sure if this is my problem, and I don't know how to fix it.
But when I upload my textures to /race/model/ all the textures are DOWNLOADED as seen in the Network tab in Chrome but are not applied to the model.
I believe maybe threejs cant find them because it's looking for them in /race/model//?
Here's my code to import the model:
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "model/car.js", addModelToScene );
// addModelToScene function is called back after model has loaded
var ambientLight = new THREE.AmbientLight(0xFFFFFF);
scene.add(ambientLight);
ambientLight.position.set(0, 500, 200);
function addModelToScene( geometry, materials )
{
var material = new THREE.MeshFaceMaterial( materials );
android = new THREE.Mesh( geometry, material );
android.scale.set(10,10,10);
scene.add( android );
}
To see a live example of what it looks like now go to http://novsstudio.com/race
You can also view the source there too to get the full source and you can also browse my directories to see where i have all my files at http://novsstudio.com/race/model
Thank for the help let me know if you need more information.
Tip: You can move the camera at my website by clicking and holding/dragging to see the whole model.
See the TGALoader located in the examples/js/loaders directory.
Example: http://threejs.org/examples/webgl_materials_texture_tga.html.
Alternatively, you can convert you TGA files to PNGs and modify the JSON file accordingly.
EDIT: Updated to three.js r.68