I am currently working on a project that involves resizing a cube by clicking and dragging its faces.
My approach is to update the position attribute on the buffer geometry object, and then either recreate the mesh or set the needsUpdate flag to let it update itself. However, so far, none of these options have been successful for me. Here is my latest attempt:
this.boxGeo = new THREE.BoxGeometry(2,2,2)
this.boxMesh = new THREE.Mesh(this.boxGeo, this.boxMaterial)
...
// let disp = the amount we want to move the face
// vertex indices
let indices = this.planes[index].indices
// creating a new array for the position attribute
let positions = new Float32Array(8 * 3)
// looping through the 8 vertices
for (let i=0; i < 8; i++) {
if(!indices.includes(i) || disp === 0) {
positions[i * 3] = this.boxGeo.vertices[i].x
positions[i * 3 + 1] = this.boxGeo.vertices[i].y
positions[i * 3 + 2] = this.boxGeo.vertices[i].z
} else {
// modifying vertices
let d = new THREE.Vector3(disp, disp, disp).multiply(plane.normal)
positions[i * 3] = this.boxGeo.vertices[i].x + d.x
positions[i * 3 + 1] = this.boxGeo.vertices[i].y + d.y
positions[i * 3 + 2] = this.boxGeo.vertices[i].z + d.z
}
}
// updating geometry
this.boxMesh.geometry._bufferGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3))
I have explored various methods, including consulting the documentation mentioned here:
Any assistance or guidance on this matter would be greatly appreciated!
EDIT: Addressing the comments below, I am analyzing my ...attribute.position.array more closely and it seems that each face lists all its vertices, which restricts my ability to access or set them as previously. Any suggestions on relevant documentation I should refer to? Is there a simpler way to accomplish this task?
As per @Murgen87's suggestion, the following code successfully updates the position attribute. It appears that the BoxGeometry primitive does not utilize indexed faces, so I am now considering scaling or translating the box instead.
let positions =
this.boxMesh.geometry._bufferGeometry.getAttribute('position')
// this loop doesn't pick the right positions for my use case
faces.map((f, i) => {
positions.array[f * 6 + i * 3] += displacement.x
positions.array[f * 6 + i * 3 + 1] += displacement.y
positions.array[f * 6 + i * 3 + 1] += displacement.z
})
positions.needsUpdate = true;
My final question pertains to why I cannot execute the following:
box.geometry.vertices.multiply(displacement)
box.geometry.verticesNeedsUpdate = true
... And through this inquiry, I have arrived at the solution to my own question!