ThreeJS 모양의 치수

Question

전체 모양을 다시 만들 필요없이 ThreeJS에서 Shape의 치수를 업데이트 할 수있는 방법이 있습니까?

나는 사용자가 확대하고자하는 영역을 선택하는 사용자의 마우스 움직임에서 사각형을 만들고 있습니다. 사각형 모양을 다시 만들고 각 반복마다 메쉬를 추가/제거합니다 (onmousemove).

내가 원하는 것을 달성하는 데 최적의 방법으로 보이지 않습니다. 다음은 내가 만들고있는 모양 (녹색)의 그림입니다. 아이디어는 사용자가 Photoshop과 같은 응용 프로그램에서 찾을 수있는 기본 선택 사각형과 같이 마우스를 움직이면 크기가 조절된다는 것입니다.

관련 코드 :

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

이 스크립트는 "그래, 당신은 모양의 크기를 업데이트 할 수 있습니다"보여줍니다. 나는 이것을 즐겼다. 제게 몇 가지 포인트를주세요 - 저는 한 달 동안 666 번을 보냈습니다!

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