I have a model, only one mesh, and material is an array in mesh with 4 ShaderMaterial.The data structure of the model object，Position of material mark point
I want to click the mesh to get the material in the corresponding position, and use Raycaster to get the intersect object. I want to find the corresponding material in the object through the face.materialIndex.How do I get the right material? intersect data
If you have a specific materialIndex, you can get the corresponding material object like so:
const material = mesh.material[ materialIndex ];
As stated in the documentation when using multiple materials per mesh, Mesh.material becomes an array of materials.
Related
The map that I am attempting to create is isometric and is plotted in 44x44 pixel tiles. Each tile material is a loaded image.
Material with ID 1 might be reused at various x/y positions within the view. Material with ID 2 might only be used once. The same goes for any remaining tiles that need to be plotted.
I haven’t found anything in the docs that would be helpful and suggestions found on the web to use createMultiMaterialObject seem to be outdated.
If you have only a single geometry and want to apply multiple materials on it, you have to define so called groups data. These data allow you to render different parts of the geometry with different materials. After defining groups, you can create your (multi-material) mesh like so:
const mesh = new THREE.Mesh( geometry, [ material1, material2, material3 ] );
three.js R111
I've been struggling with this one for hours, and found nothing either in the docs or here on SO that would point me to the right direction to achieve what I aim at.
I'm loading a scene containing several meshes. The first one is used as an actual mesh, rendered on the scene, the other ones are just used as morph targets (their geometries, properly speaking).
loader.load("scene.json", function (loadedScene) {
camera.lookAt( scene.position );
var basis = loadedScene.getObjectByName( "Main" ).geometry;
var firstTarget = loadedScene.getObjectByName( "Target1" ).geometry;
// and so on for the rest of the "target" meshes
basis.morphTargets[0] = {name: 'fstTarget', vertices: firstTarget.vertices};
var MAIN = new THREE.Mesh(basis);
This works very well, and I can morph the MAIN mesh with no hassle by playing with the influence values. The differences between the basis mesh and the target are not huge, basically they're just XY adjustments (2D shape variations).
Now, I'm using a textures material: UVs are properly projected (Blender export) and the result is nice with the MAIN mesh as is.
The problem comes when the basis shape is morphed towards a target geometry: as expected, the texture (UVs) adapts automatically, but this is not what I need to achieve => I'd need to have the UVs "morph" towards the morph target's UVs for the texture to look the same.
Here is an example of what I have now (left: basis mesh, right: morphTargetInfluences = 1 for the first morph target)
morph target and texture
What I'd like to have is the exact same texture projection on the final, morphed mesh...
I can't figure out how to do that the right way. Should I reassign the target UVs to the MAIN mesh (and how would I do that)?
The result would be like having a cloth below which a shape is morphed, and the cloth being "shrinked-wrapped" all the time against that underlying shape => you can actually see the shape changes, but the cloth itself is not deformed, just wrapping itself properly and consistently around the shape...
Any help would be much appreciated! Thanks in advance :)
I'm using BufferGeometry to draw triangles.
I can use a mesh geometry, specifiyng 3 index-attribute for every triangle. I'm using a basic material without wireframe. I suposse I'll can use raycast.
Also I have seen the linesegments approach for wireframe. Interesting.
Ok, my problem... I'd like to see my triangles as a wireframe and also I need raycast. So .... the solution is to create my own shader, isn't it ?
Thanks
you dont have to create a custom shader you can have a mesh with wireframe material, and the ray should still "hit" the object
var mesh = new THREE.Mesh(geometry,new THREE.MeshBasicMaterial({wireframe : true}));
if it for some reason does not hit or you want to LineSegments object you can keep track of all transformations that affected the object, and apply them onto a mesh you wont add to scene
var segmentObject = new THREE.LineSegments(geometry,lineMaterial);
scene.add(segmentObject);
var meshNotInScene = new THREE.Mesh(geometry,dummyMaterial);
and you will use the mesh object to determine if raycast hit the object
this way you can have a different hitbox for an object for example if you have a flying donut by pairing it with a circle mesh you can select it even if you click in its hole etc...
keep in mind that materials have sides and if you dont care about which side is which set "side" to THREE.DoubleSide
I have a THREE.JS scene where there's a plane geometry in the middle of the scene. The plane geometry has a camera added to it. I also am using this example http://mrdoob.github.io/three.js/examples/webgl_materials_lightmap.html to add a lightmap and am adding it to my plane geometry.
Psuedocode:
planeGeometry.add(camera);
planeGeometry.add(sphereGeometryLightMap);
The problem is that when I try to rotate the sphere geometry on any axis, nothing happens. I tried using .rotation and setting the matrix4. Why is it that I can't rotate this sphere object when added to another object? How can I work around this?
You don't need to add the camera to the planeGeometry.
Also I assume that sphereGeometryLightMap is of type THREE.Mesh in which case you need to add it to the scene. Not to the planeGeometry.
If you want the sphereGeometry relative to the planeGeometry you can do:
var object = new THREE.Object3D();
object.add (planeGeometry);
object.add (sphereGeometry);
Before you add the geometries to the object you position them relative as you want.
Then, instead of modifying the planeGeometry, you modify the object.
I made in Dice with 2 different colored materials in Blender and exported it with the Blender exporter. In my three.js code, I use JSONLoader to get the mesh and use new THREE.MeshFaceMaterial(); as material.
This loads the model just fine with the two different colored materials showing correctly. But my problem is, that I want the dice to have specular highlights on the surface. Is this even possible with exported Blender models?
I managed to get a Sphere with specular highlights when I used THREE.MeshPhongMaterial() as material for the sphere, but the sphere wasn't imported from Blender and as far as I know, I can't apply a Phong Material when I load the Mesh with JSONLoader, or is there a trick? Please remember: I got two differently colored materials on the dice, which I import from Blender in the JSON file. The dice by itself is red, but the dots should be black. So I am not talking about different colors on each side of a cube or so, but two different colors on every side of the cube. Can you help me?
Here's the code snippet:
loader.load("models/dice.js", function(geometry){
var material = new THREE.MeshFaceMaterial();
material.specular = 0xffffff;
material.shininess = 10000000000;
dice=new THREE.Mesh(geometry, material);
dice.position.set(0,-400,5);
dice.scale.set(75, 75, 75);
dice.overdraw = true;
dice.name="dice";
navscene.add(dice);
});
If it helps, I am able to create a texture out of the two materials and apply them in Blender, so that the JSONLoader loads the texture instead of the materials, but I wasn't able to achieve a specular highlight either with that.
Thx West, you pointed me into the right direction. The problem was, that Blender's standard material type is Lambert. In Blender, this Lambert material produces the desired specular highlight, but once imported to three, the effect is gone. I don't know if this is a bug, or a desired behaviour.
The solution is to set the material type in Blender to Phong material. This works even after import. My guess is, that THREE.MeshFaceMaterial is an array which contains all the loaded materials, whether they are lambert, phong or whatever. It is even possible to mix those material types. So it appears to me, that THREE.MeshFaceMaterial doesn't seem to be a "stand alone" material type at all. Correct me if I'm wrong please.
If your mesh geometry has a materials array, you can always change the array elements after you load the geometry:
geometry.materials[ i ] = new THREE.MeshPhongMaterial( ... );
You then leave the mesh's material as MeshFaceMaterial:
mesh = new THREE.mesh( geometry, new THREE.MeshFaceMaterial() );
The exporter script you are using may set geometry.materials to Lambert material by default, based on your settings. Have a look at the script source code and see if you can figure it out.