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.
Related
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.
Having an issue using a JSON model w/ textures exported from Clara.io.
For those familiar with Clara.io, I'm using File -> Export All -> ThreeJS (JSON) to export and including the files in my ThreeJS project using the ObjectLoader example in the Clara.io docs:
var loader = new THREE.ObjectLoader();
loader.load("zebra.json",function ( obj ) {
scene.add( obj );
});
The mesh Geometry is loading fine, but with no texture.
Console is throwing error(s): 'Undefined texture null', yet the texture files are referenced in the JSON file.
Using ThreeJS r74.
How can I load the texture in three.js? The .json file references multiple textures.
I've reviewed #28723121 but a solution from that thread is unclear and I'd like to keep in-step w/ r74.
Any advice appreciated.
Got the example code working with a different model/texture combo not exported from Clara.io.
Not exactly 'the' answer I was looking for but its a solution for now. Doesn't appear to be a ThreeJS issue.
I'm testing a custom scene in ThreeJS.org/editor. I've started with the Camera example scene as a template. I want to add custom geometry to it. When I import my OBJ file, the mesh appears in the editor with no problem, but there doesn't seem to be a way to import its material along with it. Instead, I went and manually assigned the correct texture map to the imported object's Material component.
In the editor, the texture map showed up and looked great after I added it manually, but when I pressed Play (or when I Exported or Published the scene) the texture map for that object was gone again. I tried refreshing my window, and all changes I made to the material component were lost.
There must be something simple I've overlooked. Can anyone help?
The OBJ format doesn't store material data; it uses a separate format, MTL, for that. Unfortunately, it seems that the Three.JS editor doesn't currently support MTL files.
I have a scene which I am exporting from Blender using the Three.js exporter. After a bit of trial and error I got it to export fine. When I tried to import it into Three, I got a few WebGL errors like glDrawElements: range out of bounds for buffer, which seemed to be related to the size or positioning of the imported object. I mucked around with some stuff related to size and eventually got it to load fine. However, none of my materials with textures are loading, EXCEPT one, which was an object with a single material applied to it.
Here's my pipeline
Create base for the level in my three js editor tool
Export this and import it into Blender for texturing/uv mapping (works fine)
Objects can have a number of materials, one for each face really, each material can have a different texture mapped to it (all good, objects are uv unwrapped etc..,)
Join all objects together (except one object which is a tree with a single material/texture applied to it)
Export the Blender file as a JSON file via the Three.js exporter
Load the file into Three using the SceneImporter
When it comes into Three, there are two objects, one is the tree which has a single texture mapped to its material. The other is a large geometry with 20 materials and textures mapped. This geometry does not have any textures displaying and just shows as a MeshLambertMaterial.
Has anyone else experienced any issues like this? Any solutions?
Seems like the SceneImporter doesn't know what to do with these materials, but all the data is there, so you'll need to give it a little help.
Like so;
loader.load('sceneWithObjectOfManyFaceMaterials.json' , function(loaded)
{
for(var key in loaded.objects)
{
var mesh = loaded.objects[key];
if(mesh.material.materials)
{
mesh.material.materials.forEach(function(m , i)
{
m.map = loaded.materials[m.name].map;
});
}
scene.add(mesh);
}
render();
});
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.