Hi everyone, I’m new to the three.js so I’m sorry if the question is weird or meaningless. The heading might seem weird but let me explain in a clear way. As I had a few searches on the web I come up with decal splatter which paints the model as a button clicked
. In another word, I need to get 3 Vector3 objects. Also is it possible to get multiple triangular coordinates with only one mouse click? I’d be grateful if anyone could help me with it.
If you use Raycaster to calculate intersections - the intersection result object has a face property - which in turn tells you: a) which face the ray collided with; b) vertex indices of that face.
So the red dotted lines are the ones that I’m looking for?
I just confused a little bit. So this model has 9561 triangles and they are called face as far as I can get ?
And How am I going the find which one is clicked ? because it shows all the faces?
No.
You’re looking for intersects[0].face and intersects[0].faceIndex, where intersects is an array of objects, that your raycaster intersects, and [0] contains information about the closest object.
GitHub - spite/THREE.DecalGeometry: Decals for three.js
I just git-cloned that repo and printed the decals and tried the explore what I’m looking for
And intersections are provided with raycasting so I guess what I’m looking for is here but I could not find yet
function render() {
requestAnimationFrame( render );
console.log(decals);
renderer.autoClear = false;
renderer.render( scene, camera );
if( renderHelpers ) renderer.render( helperScene, camera );
}
this is what I get as I printed intersects[0]
I’m looking for 3 vector3 and vertexNormals variable contains them. But they are between -1 and 1 and what I’m looking for is something like the point object which gives the positions however there is only 1 point object, not 3
They contain indices of vertices in mesh.geometry.attributes.position.
So, to get those vertices in THREE.Vector3() you just ineed to do:
var pos = mesh.geometry.attributes.position;
var face = intersects[0].face;
var a = new THREE.Vector3().fromBufferAttribute(pos, face.a);
var b = new THREE.Vector3().fromBufferAttribute(pos, face.b);
var c = new THREE.Vector3().fromBufferAttribute(pos, face.c);
I dont know why but its unable to get the pos variable.
then as I remove pos I get this error
Also I come up with a different solution thanks to that post
I applied matrixWorld to vertexNormal intersects[0].face.vertexNormals[0].applyMatrix4( intersects[0].object.matrixWorld )
then it gives this result
Ok, it was my mistake with name of the method: .fromBufferAttribute(). And I’ve edited the previous post.
You could have had a look in the docs on Vector3 for the correct name though
Initially, you wanted to get coordiantes of vertices, not their normals. Or did I miss something from your explanation?
If there is such a messag Cannon read propery position of undefined, then it means that there is no attributes property, and thus, your geometry is just THREE.Geometry(), that has vertices property, which is an array of THREE.Vector3().
So, a, b, c properties of face are pointing to respective vertices in that array:
var a = mesh.geometry.vertices[face.a];
var b = mesh.geometry.vertices[face.b];
var c = mesh.geometry.vertices[face.c];
Yeah I guess I find’em by applying Matrix4 into vertexNormals. I dont know the background of math operations but it does not give a value between -1 and 1 so I suppose this is the position of one of these 3 coordinates. (I can get rest of the 2 also but I did not share)
also this is what I get from this code block. Should not I get bigger values btw? none of the values are more than 2 . I really appreciate your help , sorry for my ignorance
Because I was trying to get world space coordinates.
is not that supposed to be something like that?
Btw. I’m kinda stuck with painting with decal splatter.I decided to try a different approach. Is it possible that I can add colors to faces.( As button clicked face will be painted)
I tried to implement this solution into my project. However, my Model which is stl does not have faces attributes in its geometry. so I’m havin trouble in this code block
function setFaceColor(idx, color){
if (idx === -1) return;
mesh.geometry.faces[idx].color.copy(color);
mesh.geometry.colorsNeedUpdate = true;
}
I can get the indexed (faceIdx1 and faceIdx2) without an issue. I tried to change the material to MeshBasicMaterial but nothing changed. Do u have any suggestions?
Sure, I have some
STLLoader returns a non-indexed buffer geometry. That doesn’t have .vertices and .faces properties.
But it has .attributes. One of those attributes is .position. And as your geometry is non-indexed, that attribute is a so-called “triangle soup”, where the sequence of three vertices represents a face.
Read about BufferGeometry here: three.js docs
So, to be able to work with vertex colors, you need to add color attribute to your geometry via .setAttribute().
To change color of a vertex, you need to use .setXYZ() method.
I successfully added color to my geometry’s attribute with setAttribute. Also as I use setXYZ function it also fills the RGB values into the array but the color of model did not change.(with the help of this example ) I added to vertexColors attribute to material as THREE.VertexColors also and set object.geometry.colorsNeedUpdate to true. Still i dont know what i’m missing
const count = geometry.attributes.position.count;
geometry.setAttribute('color',new THREE.BufferAttribute( new Float32Array(count*3), 3 ));
const colors1 = geometry.attributes.color;
for ( let i = 0; i < count; i ++ ) {
colors1.setXYZ( i,color.r, color.g, color.b );
}
