[Vuejs]-Three.js create face from 3 coordinates

by

0👍

Example (for picking meshes with BufferGeometry):

// initital setup:
let lineGeometry = new THREE.BufferGeometry();
let linePositionAttribute = new THREE.BufferAttribute(new Float32Array(4 * 3), 3);
lineGeometry.addAttribute('position', linePositionAttribute);
let lineMaterial = new THREE.LineBasicMaterial(
{
    color: 0xff0000
});
var intersectionFaceEdge = new THREE.Line(lineGeometry, lineMaterial);      
scene.add(intersectionFaceEdge);    
        
// ... on each raycasting:

let face = intersection.face;
let obj = intersection.object;  

let positionAttribute = obj.geometry.attributes['position'];
        
linePositionAttribute.copyAt(0, positionAttribute, face.a);
linePositionAttribute.copyAt(1, positionAttribute, face.b);
linePositionAttribute.copyAt(2, positionAttribute, face.c);
linePositionAttribute.copyAt(3, positionAttribute, face.a); 

lineGeometry.applyMatrix(obj.matrixWorld);

And I recommend using GPU picking instead of simple raycasting

Leave a comment