I cannot find any documentation on multiple materials - i know MultiMaterial has been deprecated but how does it work now?
Does three.js support this and if so how does faceVertexUvs map to multiple material (i mean a practicle example please)
To apply multiple materials to an object, you are now able to assign them just as an array to the material property.
mesh.material = [material1, material2, material3];
See Migration Guide (r84 → r85):
MultiMaterial has been removed. Use an Array instead.
The faceVertexUvs is a multidimensional array, where the first index represents the material index.
geometry.faceVertexUvs[ materialIndex ][ faceIndex ][ vertexIndex ]
(Reference: three.js - geometry.faceVertexUvs[0][0][index] is not the same as geometry.vertices[index])
The Three.js Docs could be indeed a bit better in both cases.
Related
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'm searching to add an IBL to my scene and objects. But I can't find anything on the web. There are some examples with an envMap, but the problem is that with the envMap the object looks like chrome...
I'm trying to have such an effect:
I found that you can use IBL (Image Based Lighting), PRT (Precomputed Radiance Transfer) or PBR (Physically Based Rendering). But I'm unable to know how to use such an effect with three.js.
[EDIT]
After using the new MeshStandardMaterial from the r74dev I'm able to have the following result:
(before)
(after)
But I can't use MeshStandardMaterial and envMap with textures. Either the texture or the MeshStandardMaterial dooesn't work.
Thanks to WestLangley I'm using MeshStandardMaterial:
var objectGeometry = new THREE.SphereGeometry( 10, 100, 100 );
material = new THREE.MeshStandardMaterial({envMap : textureSkydome});
(r74dev)
Maybe you can use lightmaps. You can use them with THREE.MeshPhongMterial by setting material.lightmap = someLightmapTexture. Important - you need a second set of UVs in your geometry in order to use lightmaps.
have a look at this example.
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.
I'm currently working on something along the lines of a plugin for another program to add 3D capability to it, so I'm trying to put all the functionality i can from three.js into it, with the added goal of this being a good way to learn all the functionality of three.js firsthand.
I'm running into an issue now as i implement textures and materials that with mesh basic material, setting some things which the documentation on the main threejs.org site shows are features, doesn't actually do anything.
when i set a texture for either specularmap or lightmap nothing is actually showing up. Im pretty sure its not a mistake im making because setting the texture of the map works, but trying to set this same texture for the specularMap or lightMap is doing nothing. Does a regular texture work for these, or do i have to do something different?
I'd also like to know what the shading property does for mesh basic, because as far as i can see setting it to smoothshading/flatshading/noshading is doing nothing aswell.
MeshBasicMaterial does not respond to lights. Change your material to MeshLamberMaterial or MeshPhongMaterial, for example.
For MeshBasicMaterial and MeshLambertMaterial, the specularMap is used only to modulate the reflection when an environment map is used.
For any material, lightmaps require a second set of UVs. geometry.faceVertexUvs[ 0 ] contains the usual set of UVs; for a lightmap, you need to add geometry.faceVertexUvs[ 1 ], a second set of UVs.
For MeshBasicMaterial, the shading property only applies when an environment map is used. SmoothShading will yield smooth reflections; FlatShading will yield faceted reflections.
three.js r.66
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