I want to draw its edge lines in that location. I tried using EdgeGeometry as suggest. However, it only works when the mesh is set at the origin but the efforts for updating its buffer geometry doesn’t make it work!
const newBox = mesh.geometry.clone();
newBox.applyQuaternion(mesh.quaternion);
newBox.attributes.position =
newBox.attributes.position.applyMatrix4(mesh.matrixWorld);
newBox.attributes.position.needsUpdate = true;
const edges = new THREE.EdgesGeometry(newBox);
const lines = new THREE.LineSegments(
edges,
new THREE.LineBasicMaterial({ color: "red" })
);
scene.add(lines);
thus, update the mesh matrix yourself after being added to the scene:
mesh.updateMatrix();
so later you can ensure that you are passing a matrix with updated values to the applyMatrix4() command! You can do it to the lines.geometry or straight forward to the lines it self:
lines.applyMatrix4(mesh.matrix);
full code as following:
const boxGeo = new THREE.BoxGeometry(
10,
10,
10,
);
const mesh = new THREE.Mesh(
boxGeo,
new THREE.MeshBasicMaterial({
color: "blue",
})
);
mesh.rotation.y = Math.PI / 4;
mesh.position.set(target.x, target.y, target.z);//your coordinates
mesh.updateMatrix(); //!! important!!
scene.add(mesh);
const newBox = mesh.geometry.clone();
const edges = new THREE.EdgesGeometry(newBox);
const lines = new THREE.LineSegments(
edges,
new THREE.LineBasicMaterial({ color: "red" })
);
scene.add(lines);
lines.applyMatrix4(mesh.matrix);