in three.js am using OBJMTLLoder to load my object, day by day am learning new things around it, now i want to learn how to change the Material Diffuse, Specular map,Normal map, Light map and transparency of the materials used on the object.
i can get the materials name by traverse the object, now i want to get the corresponding textures that the material used, so i can use that texture as my new MeshPhongMaterial's map,
am using given male02 obj model in the three.js it have
01_-_Default1noCulling.JPG
male-02-1noCulling.JPG
orig_02_-_Defaul1noCulling.JPG
i need to get this textures by the materials used in the object, i have consoled my object it shows an array named map in it's child, there i can see the images used in the object, but i want to get it by the material name and it's corresponding texture image name
Related
Conext
I'm using three.js, #react-three/drei and #react-three/fiber.
I'm loading a GLTF file that contains emissive materials using
const gltf = useLoader(GLTFLoader, '/model.glb')
When I inspect the loaded data like this:
for (const key of Object.keys(gltf.materials)) {
const v = gltf.materials[key] as MeshStandardMaterial & Material
if (!v.isMeshStandardMaterial) return
console.log(key, v, v.emissive, v.emissiveIntensity, v.emissiveMap)
}
I can see that certain materials have a color set and their emissiveIntensity is equal to 1.
Problem
Objects made of these emissive materials load and display correctly on the scene. They have the desired color. There is, however, one problem. I would like those emissive materials to behave like a directonalLight/pointLight - i.e. cast shadows and cause reflections. Right now, they only display as shiny blobs, but their light doesn't affect other objects.
Question
How do I make emissive materials cast shadows and create reflections? Do I need a shader or is there some hidden option that I'm not seeing?
I’m having a hard time getting an aoMap working in three.js…
I have a glb asset with an aoMap on the red channel or something. When I bring it into to the babylon viewer, I can see the ao just fine, but it wont show up in the three.js viewer or my project. I think this has something to do with a second set of uvs, but I can't find a resource that involves doing that on top of using the gltf loader… I really don't know what to do here. Any response would be greatly appreciated!
Here is my code (I’m using a html-canvas as the texture)
And I get the model’s geometry and diffuse texture (all white) as desired, but the aomap isnt showing…
code
babylon viewer
three.js viewer
working application with shadows included in diffuse
not working, diffuse is just white, and aoMap is not showing
You're right about needing a second set of UVs. The reason behind this is that diffuse textures often repeat (think of a brick wall, or checkered t-shirt). AO shading, however, is more likely to be unique on each part of the geometry, so it's almost never repetitive. Since this often would need an alternative UV mapping method, the default is to use a second set of UVs.
You could do 2 things:
Re-export your GLTF asset with a duplicate set of UVs.
Duplicate existing UVs in Three.js by creating a new BufferAttribute in your geometry:
// Get existing `uv` data array
const uv1Array = mesh.geometry.getAttribute("uv").array;
// Use this array to create new attribute named `uv2`
mesh.geometry.setAttribute( 'uv2', new THREE.BufferAttribute( uv1Array, 2 ) );
.getAttribute and .setAttribute are methods of BufferGeometry, if you want to read more about them.
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 have an array of 3d objects loaded from collada file. When I'm trying to change the color of material of an object from the array, color changes for all the objects in the array.
arr[5].material.color.setHex(0x00CC00); will update color for all objects in array. I assume it happens because the share one instance of material since objects are the same. Is there anyway to apply color individually? Thanks
The way it works right now you need to have a different material per object. In the future maybe Object3D will have a color property.
We are studying on product designer project. Designer is ready.
I want to do 3d preview result with three.js.
How can we texture one side of phone case? or can we border texture mapping?
OBJLoader version:
http://www.shopilife.com/baskiburada/viewer/viewer_4.html
And some obj files cannot be textured. Error is "GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 2"
http://www.shopilife.com/baskiburada/viewer/viewer2.html
First, regarding re-texturing the back vs. front of the phone case. The approach here is to seperate the UV coordinates on the model itself. This way you have two sets of materials/textures/UVs. Then during runtime you load them both using a MeshFaceMaterial to load the two materials in an array like so:
materialArray.push(THREE.BasicMeshMaterial({color: 0xff0000})); //use whatever Material type you'd like of course
materialArray.push(THREE.BasicMeshMaterial({color: 0x0000ff}));
var multipleMaterial = new THREE.MeshFaceMaterial(materialArray);
phoneCaseMesh= new THREE.Mesh( geometry, multipleMaterial );
Then when you want to switch one out you would grab the mesh and change the mapping to the desired side something like:
phoneCaseMesh.material.materials[1].map = THREE.ImageUtils.loadTexture( 'newtexture.jpg' );
Second, regarding the Error on you second sample, WestLangley is correct the OBJ file has no UV coordinates to map to, so the index is out of bounds when you apply a texture. If you look at both OBJ files your iphone4.obj has vt entities while the untitled.obj is just v and f. Hope that helps