I need help with a custom object that represents a frame created by subtracting two meshes.
generateFrame (width, height, depth) {
const frameMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1));
frameMesh.scale.set(width, height, depth);
const innerFrameMesh = frameMesh.clone();
innerFrameMesh.scale.set(width - 4, height - 4, depth);
// subtract inner frame from outer frame
const frameGeometry = fromCSG(toCSG(frameGeometry).subtract(toCSG(innerFrameMesh)));
const frame = new THREE.Mesh(frameGeometry, new THREE.MeshStandardMaterial(0xffffff));
frame.geometry.computeVertexNormals();
frame.userData.isFrame = true;
return frame;
}
I want to scale this frame dynamically as its size changes. However, using the .scale method causes the object to stretch instead of preserving the width of the frame (which is 4 units). Is there a way to customize the scaling behavior or is there a different property/method to use to maintain the ratio of "white space" vs. "object" portion? Any help is appreciated. Thank you.