Is it possible to update the dimensions of a Shape in ThreeJS without the need to recreate the entire shape each time?
I am creating a square based on the user's mouse movement to define the area of zoom. Currently, I recreate the square shape and adjust the mesh with each iteration of onmousemove.
This method doesn't seem to be the most efficient way to achieve my goal. Below is a visual representation of the Shape I am creating (displayed in green). The concept is that it resizes as the user moves their mouse, similar to a basic selection square in Photoshop and other applications.
https://i.sstatic.net/f7IVs.png
Relevant Code:
elem.bind('mousedown', function(event){
mouse_down_coords = getElementCoordinates(event);
mouse_down_coords = convertElementToGLCoordinate((mouse_down_coords.x / elem[0].offsetWidth), (mouse_down_coords.y / elem[0].offsetHeight));
is_mouse_down = true;
});
var zoom = function(down, up){
if(!(down.x === up.x && down.y === up.y)){
var height = Math.abs(up.y - down.y);
var width = Math.abs(up.x - down.x);
if(height < ((Math.abs(camera.top) + Math.abs(camera.bottom)) * 0.03) && width < ((camera.left + camera.right) * .02)){
alert(height + ' < ' + ((Math.abs(camera.top) + Math.abs(camera.bottom)) * 0.01) + '\n' + width + ' < ' + ((camera.left + camera.right) * .02));
return;
}
camera.left = down.x < up.x ? down.x : up.x;
camera.right = down.x > up.x ? down.x : up.x;
camera.top = down.y > up.y ? down.y : up.y;
camera.bottom = down.y < up.y ? down.y : up.y;
camera.updateProjectionMatrix();
}
};
//reset camera on double click
elem.bind('dblclick', function(event){
...
});
elem.bind('mouseup', function(event){
mouse_up_coords = getElementCoordinates(event);
var x_percent = (mouse_up_coords.x / elem[0].offsetWidth);
var y_percent = (mouse_up_coords.y / elem[0].offsetHeight);
mouse_up_coords = convertElementToGLCoordinate(x_percent, y_percent);
is_mouse_down = false;
scene.remove(rectMesh);
scene.remove(wf);
selection_in_scene = false;
zoom(mouse_down_coords, mouse_up_coords);
});
elem.bind('mousemove', function(event){
if(is_mouse_down){
var coords = getElementCoordinates(event);
coords = convertElementToGLCoordinate((coords.x / elem[0].offsetWidth), (coords.y / elem[0].offsetHeight));
if(selection_in_scene){
scene.remove(wf);
scene.remove(rectMesh);
}
rectLength = (coords.y - mouse_down_coords.y);
rectWidth = (coords.x - mouse_down_coords.x);
rectShape = new THREE.Shape();
rectShape.moveTo(mouse_down_coords.x, mouse_down_coords.y);
rectShape.lineTo(mouse_down_coords.x+rectWidth, mouse_down_coords.y);
rectShape.lineTo(mouse_down_coords.x+rectWidth, mouse_down_coords.y+rectLength);
rectShape.lineTo(mouse_down_coords.x, mouse_down_coords.y+rectLength);
rectShape.lineTo(mouse_down_coords.x, mouse_down_coords.y);
rectGeom = new THREE.ShapeGeometry(rectShape);
rect_material = new THREE.MeshBasicMaterial({color:0xffffff, opacity: 0.1, vertexColors: 0xffffff});
rect_material.transparent = true;
rectMesh = new THREE.Mesh(rectGeom, rect_material);
wf = new THREE.EdgesHelper( rectMesh, 0x00ff00 );
scene.add(rectMesh);
scene.add(wf);
selection_in_scene = true;
}
});