I exported some meshes from Blender with the JSON plugin exporter. I exported all of the scene, so I have to use ObjectLoader in three.js to load it.
If I look into the .json file, the materials seems to be there.
I'm loading it like this :
var loader = new THREE.ObjectLoader();
loadMesh();
loader.load("path_to.json", addModelToScene);
function addModelToScene(model) {
obj = scene.add(model);
}
Only the color is applied to each mesh. Is there a way to export material to three.js defined in the cycle render mode?
Cycles materials use a node based system which uses code within blender to generate the material for the object and it doesn't export to other applications.
What you need to do is convert the material to one that is compatible with other applications. For simple materials, it can be easier to create a new Blender Render material that will export to most other applications. For more complex materials, you can often bake the cycles material to an image, which can then be used in other applications.
Related
I saw some discussions saying gltf does not export bumpmap but if I look into my exported gltf file (separate files mode) there is a bumpmap file with a bumpscale (and also normal map). After loading into three.js I get a meshstandard material with bumpmap object and scale value and also normalmap object. But they seem to have no effect on the rendered object. What is exactly allowed to do to export relief effect from Blender to Three.js with gltf ?
The only relief effect available in glTF is a tangent-space normal map, as shown here:
Blender does have the ability to convert height maps and other kinds of bump maps to tangent-space normal maps, by way of the "Bake" function in Cycles. There are also online utilities that can do this as well.
I have created a 3d object using blender and exported it as .obj file.
I am trying to load that .obj file using OBJloader in threejs. That is a single object with multiple material in it. It is loaded without any issues.
I am trying to track which material the user has clicked in a 3d object. I am using raycasting for this. Since raycasting works only at object level, I am not able to get which specific material user has clicked.
Starting with three.js R101, you can evaluate intersection.face.materialIndex and then retrieve the correct material from your materials array. This was actually a missing feature in previous three.js revisions.
I'm using a free 3d model from turbosquid. This model is using a texture that looks like this:
It does look good in Blender:
But once exported to three.js, it seems that the texture does not follow the uv map:
Here is the code i'm using:
var loader = new THREE.JSONLoader();
loader.load('json/Ship.json', function ( geometry, materials ) {
ship = new THREE.Mesh(geometry, materials[0]);
scene.add(ship);
}
);
And here is the json I get once exported from Blender:
What am I missing?
Thanks a lot for your help!
There are some minor complexities in this model, which I think are causing issues for Blender exporters. They're not "wrong", but they're hard for exporters to handle without cleanup. You can fix those manually (open the .blend file in Blender, apply modifiers, remove all textures except the diffuse) but the easiest path is probably converting the OBJ version provided by Turbosquid to glTF. Going to the Cesium OBJ->glTF converter (or OBJ2GLTF if you need something programmatic) and dragging in the OBJ/MTL/texture will give the right result. NOTE: you'll need to move the sh3.jpg file into the same directory as the MTL file; it shouldn't be in the Textures/ folder.
Result on https://gltf-viewer.donmccurdy.com/ — using three.js r92 and THREE.GLTFLoader.
I have made a small scene in blender (6 objects, each using 1 to 4 materials).
When exporting this (using the materials, and the scene option) with the dev exporter and loading it via:
var loader = new THREE.ObjectLoader();
loader.load( 'assets/scene.json', function ( scene ) { ...
And then checking the scene, I can see it has 6 children (good) and that each of the five children only has one MeshLambertMaterial (instead of the material mix from blender) bad.
Any hints on what I am doing wrong?
Those are btw basic materials (just a color basically) no textures or anything.
The scene renders correctly (minus the material mix).
Here is a link to the 113kb scene file (zipped): http://jppresents.net/static/blender/exportBug/scene.zip
Looking at the file I think all materials are there - so the problem must be the way I load it?
Not a solution, but a work around:
Since the only difference between all my materials was just the color, I have now applied exactly one material with a multi colored texture per object.
Then I uv-mapped the faces of the object to the colors corresponding to the previously set material color.
This was easy using the hotkey "shift + G" which lets you select all faces with the same material. (Then just assign them to the texture material, move/scale those in the uv-view to the part of the texture that matches the old color.)
I am experimenting with exporting objects from blender and displaying them using three.js and all is going ok so far. I have learnt enough about Blender to get me by as the objects I am using have just been downloaded from online.
What I am now trying to do is wrap an image around my object either within Blender or in three.js
Can anyone point me in the right direction for some reading on the preferred method to do this?
To wrap an image around your model you will need to map it to your model in Blender. The file you then export from Blender will have both the geometry and material information you need for displaying it in three.js.
So, I used these two tutorials to learn how to UV map in Blender:
https://www.youtube.com/watch?v=obB9T3jXlak (older but simpler)
https://www.youtube.com/watch?v=f2-FfB9kRmE (newer but more thorough)
Then use some coding like this: (taken from Jos Dirksen's Learning Three.js book)
var loader = new THREE.JSONLoader();
loader.load('../assets/models/misc_chair01.js', function (geometry, mat) {
mesh = new THREE.Mesh(geometry, mat[0]);
mesh.scale.x = 15;
mesh.scale.y = 15;
mesh.scale.z = 15;
scene.add(mesh);
}, '../assets/models');
Make sure you have a copy of your jpeg image file in the same folder as your model.js file.