javascript - ThreeJS 更新 Shape 的尺寸

Question

有没有办法可以在 ThreeJS 中更新 Shape 的尺寸，而无需重新创建整个形状？

我正在根据用户的鼠标移动创建一个正方形，该正方形选择用户希望放大的区域。我重新创建正方形并在每次迭代 onmousemove 时添加/删除网格。

这似乎不是实现我想要的目标的最佳方式。这是我正在制作的形状的图示(绿色)。这个想法是，当用户移动鼠标时，它会调整大小，就像您可以在 Photoshop 和此类应用程序中找到的基本选择方 block 一样。

相关代码:

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;
    }
}); 

Answer 1

以下是如何更新形状尺寸的示例:

"use strict";
var renderer, scene, camera, light, geometry, material, mesh;
var angle, x0, y1, x2, y3;
window.onload = function() {
  renderer = new THREE.WebGLRenderer(); 
  renderer.setSize(750, 750); 
  renderer.setClearColor( 0x102030, 1);  
  document.body.appendChild(renderer.domElement);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(30, 1);
  camera.position.set(0, 0, 30);
  camera.lookAt(new THREE.Vector3(0,0,0));
  light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(10, 10, 20);
  scene.add(light);

  var shape = new THREE.Shape();
  shape.moveTo(-5, -5);
  shape.lineTo( 5, -5);
  shape.lineTo( 5,  5);
  shape.lineTo(-5,  5);
  shape.lineTo(-5, -5);
  geometry = new THREE.ShapeGeometry(shape);
  material = new THREE.MeshBasicMaterial({color:0xffffff, opacity: 0.5, vertexColors: 0xffffff});
  material.transparent = true;
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  fnloop();
}
function fnloop() {
  angle = Date.now() / 1000 * 6.2832 / 3; // 3 second period
  x0 = -5 + Math.cos(angle); // upper left
  y1 =  5 + Math.cos(angle); // upper right
  x2 =  5 + Math.sin(angle); // lower right
  y3 = -5 + Math.sin(angle); // lower left
  mesh.geometry.vertices[0].setX(x0);
  mesh.geometry.vertices[1].setY(y1);
  mesh.geometry.vertices[2].setX(x2);
  mesh.geometry.vertices[3].setY(y3);
  mesh.geometry.verticesNeedUpdate = true;
  renderer.render(scene, camera);
  requestAnimationFrame(fnloop);   
}