I have a 3D model stored in OBJ file format. I can load the OBJ file using the OBJLoader just fine.
The model renders correctly and material applied correctly.
What is missing is the loading of polygon groups defined in the OBJ file to identify certain areas in the Model to be able to apply different materials over it.
When I look into the OBJLoader source, I found that it ignores the loading of the polygon groups segments.
How can I read the polygon groups using the OBJLoader and create additional child mesh objects to assign to the parent Model Object3D?
I found a workaround to solve this problem
Download the open source 3D modeling application Blender and install it.
Open your OBJ files using Blender.
Export the OBJ model to another format, I used Collada format which works for me
Use the THREE.JS Collada loader
Collada loader will load the object model and its groups and materials successfully.
Hope this help you guys
Related
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'm working a simple proof of concept. This involves exporting a simple textured model from Blender into the an .obj model file, an .mtl material file, and some .jpg texture images. My model is a single plane with a grass texture on the top of it.
The problem I'm having is the grass texture isn't loading. I'm getting console messages and the JS code looks to be actually loading the image file, but it's not showing up. The plane is a green colour, which I don't understand, since I havent defined colours anywhere. I'm not sure if this is a rendering problem.
I had a look at the examples ThreeJS provides, but they're slightly different than the files I'm getting from blender. The obj loader example doesn't include any .mtl files. The obj + mtl loader example is using some .dds files for the models, which I don't have. I had a quick look into it and it has something to do with direct x.
My example is up at https://www.raydowe.com/three/
Does anyone have an example of how to load .obj, .mtl, and .jpg assets into ThreeJS?
so, this is easy you need texture coordinate to map the texture onto the vertices. In the *.obj it is represented into "vt"
https://github.com/koolkap/Obj-Mtl-Loader
This is your working sample
https://github.com/koolkap/Obj-Mtl-Loader/blob/master/obj/scene.obj
this is *.obj required.
feel free to ask
I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)
I'm experiencing picking problems when loading a collada model in ThreeJS. The picking example for cubes works fine. Loading a collada model works as well.
However it seems that for picking collada object I need to pick well above the 3D object. As picking works for the cube I cannot figure out why it is not working for collada objects (export from SketchUp). Does anyone have a good example where it is possible to load a collada model and pick the individual objects? Thanks in advance.