How to extrude face of the boxGeometry

Questions
, , , , , ,
1

please I tried to extrude selected face of the box Geometry could you someone help solve this issue :slight_smile:

// Define the box geometry
const geometry = new THREE.BoxGeometry(10, 1, 10);
geometry.rotateX(-Math.PI * 0.5);

// Create a mesh using the geometry
const boxMesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
    wireframe: true,
    color: "red"
}));
scene.add(boxMesh);

const draggableObjects = [boxMesh.geometry.faces[0]];
const dragControls = new THREE.DragControls(draggableObjects, camera, renderer.domElement);
dragControls.addEventListener('drag', function (event) {
    const face = event.object.geometry.faces[event.faceIndex];
  const mouseDelta = event.delta;
  
  // Extrude the face based on the mouse movement
  const extrusionAmount = mouseDelta.length() * 0.01; // Adjust the extrusion amount as needed
  face.translateOnAxis(face.normal, extrusionAmount);
});

thank in advance

2

This code is using an older version of threejs that had a concept of “faces” in the geometry.

This was deprecated in favor of a more GPU efficient geometry format.

To achieve this now, you may have to modify the vertices manually…

you could do something like…

let pa = boxMesh.geometry.attributes.position.array;
let vec = new THREE.Vector3();
for( let i=0;i<pa.length;i+=3){
let x = pa[i]
let y=pa[i+1]
let z=pa[i+2]
if(x > 0) // This is a vertex on the +X side of the cube.. so move it further out...
    x += extrusionAmount;
pa[i]=x;
}
boxMesh.geometry.attributes.position.needsUpdate = true; // Tell threejs that the vertex positions need to be re-uploaded to the GPU
2 Likes