如何在Three.js中拖动多个对象？

Question

我需要能够将盒子及其角落拖动为单个实体。

我面临的问题是，每当我定位组即象限时，dragControls都不会做任何事情。它只适用于直接使用几何体的情况。它既可以是正方形，也可以是其中一个角落。如何定位所有这些并将它们组合在一起？

window.onload = init;
// Global variables
var renderer, raycaster, mouse, quadrant, 
quadrantGeometry, scene, camera, dragControls,
group;

var upperLeftCorner

raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();

function init(){
    // Get WebGL ready
    var material;
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer = this.renderer;
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
    camera.position.set(0, 0, 100);
    camera.lookAt(0, 0, 0);
    scene = new THREE.Scene();
    // Get set                
    quadrant = drawQuadrant();
    scene.add(quadrant);
    // Go
    eventful();
    animate();
};
function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    render(renderer, scene, camera);
};

function eventful(){ // Where all events happen
    dragControls = new THREE.DragControls([quadrantGeometry], camera, renderer.domElement);
    dragControls.addEventListener('dragstart', onDragStart, false);
    dragControls.addEventListener('dragend', onDragEnd, false);
};

function drawBox(){ // Box geometry
    var geometry, material, box;
    geometry = new THREE.PlaneGeometry(50, 50, 32);
    material = new THREE.MeshBasicMaterial({color: 0xcce6ff, transparent: true, opacity: 0.1});
    box = new THREE.Mesh(geometry, material);
    quadrantGeometry = box;
    box.position.set(0, 0, 0);
    return box;
};      

function drawCorner(x, y1, y2, y3){ // Draw the corners of the quadrant (corner geometry)
    var geometry, material, corner;
    geometry = new THREE.Geometry();
    material = new THREE.LineBasicMaterial({
        color: 0xff0000, linewidth: 3
    });
    geometry.vertices.push(new THREE.Vector3(0, y1, 0));
    geometry.vertices.push(new THREE.Vector3(0, y2, 0));
    geometry.vertices.push(new THREE.Vector3(x, y3, 0));
    corner = new THREE.Line(geometry, material);
    return corner;               
};

function positionCorners(){ // Position corners of the quadrant
    // Draw them in order to store them in a variable
    upperLeftCorner = drawCorner(10, -5, 5, 5); // x, y1, y2, y3
    upperRightCorner = drawCorner(-10, -5, 5, 5);
    lowerLeftCorner = drawCorner(10, 5, -5, -5);
    lowerRightCorner = drawCorner(-10, 5, -5, -5);
    // Position each corner respectively
    upperLeftCorner.position.set(-25, 20, 0); // x, y, z
    upperRightCorner.position.set(25, 20, 0);
    lowerLeftCorner.position.set(-25, -20, 0);
    lowerRightCorner.position.set(25, -20, 0);
    return {
        uLc: upperLeftCorner,
        uRc: upperRightCorner,
        lLc: lowerLeftCorner,
        lRc: lowerRightCorner
    };
};

function drawQuadrant(){ // Draw four corners for the quadrant
    var corners;
    corners = positionCorners(); // Get the positioned and drawn corners
    box = drawBox(); // Get the surface of the quadrant
    group = new THREE.Group(); // Bind the vertices as a group
    group.name = 'quadrant';
    //group.add(box, corners.uLc, corners.uRc, corners.lLc, corners.lRc);
    group.add(box);
    group.add(corners.uLc);
    group.add(corners.uRc);
    group.add(corners.lLc);
    group.add(corners.lRc);
    scene.add(group);
    return group;
};

function onDragStart(event){
    console.log('on drag start');
};

function onDragEnd(event){
    console.log('on drag end');
};

function render(renderer, scene, camera){
    raycaster.setFromCamera(mouse, camera); // Update the picking ray with the camera and mouse movements
    intersects = raycaster.intersectObjects(scene.children);
    for(var i = 0; i < intersects.length; i++){
        intersects[i].object.material.color.set(0xff0000);
    }
    renderer.render(scene, camera);
};

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>

对此的任何帮助都会很棒。谢谢！

Answer 1

要解决此问题，您可以在框中添加角落：

function drawQuadrant(){ 
    var corners = positionCorners(); 
    box  = drawBox(); 
    group = new THREE.Group();
    group.name = 'quadrant';
    group.add(box);
    box.add(corners.uLc);
    box.add(corners.uRc);
    box.add(corners.lLc);
    box.add(corners.lRc);
    return group;
};

window.onload = init;
// Global variables
var renderer, raycaster, mouse, quadrant, 
quadrantGeometry, scene, camera, dragControls,
group;

var upperLeftCorner

raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();

function init(){
    // Get WebGL ready
    var material;
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer = this.renderer;
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
    camera.position.set(0, 0, 100);
    camera.lookAt(0, 0, 0);
    scene = new THREE.Scene();
    // Get set                
    quadrant = drawQuadrant();
    scene.add(quadrant);
    // Go
    eventful();
    animate();
};
function animate(){
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    render(renderer, scene, camera);
};

function eventful(){ // Where all events happen
    dragControls = new THREE.DragControls([quadrantGeometry], camera, renderer.domElement);
    dragControls.addEventListener('dragstart', onDragStart, false);
    dragControls.addEventListener('dragend', onDragEnd, false);
};

function drawBox(){ // Box geometry
    var geometry, material, box;
    geometry = new THREE.PlaneGeometry(50, 50, 32);
    material = new THREE.MeshBasicMaterial({color: 0xcce6ff, transparent: true, opacity: 0.1});
    box = new THREE.Mesh(geometry, material);
    quadrantGeometry = box;
    box.position.set(0, 0, 0);
    return box;
};      

function drawCorner(x, y1, y2, y3){ // Draw the corners of the quadrant (corner geometry)
    var geometry, material, corner;
    geometry = new THREE.Geometry();
    material = new THREE.LineBasicMaterial({
        color: 0xff0000, linewidth: 3
    });
    geometry.vertices.push(new THREE.Vector3(0, y1, 0));
    geometry.vertices.push(new THREE.Vector3(0, y2, 0));
    geometry.vertices.push(new THREE.Vector3(x, y3, 0));
    corner = new THREE.Line(geometry, material);
    return corner;               
};

function positionCorners(){ // Position corners of the quadrant
    // Draw them in order to store them in a variable
    upperLeftCorner = drawCorner(10, -5, 5, 5); // x, y1, y2, y3
    upperRightCorner = drawCorner(-10, -5, 5, 5);
    lowerLeftCorner = drawCorner(10, 5, -5, -5);
    lowerRightCorner = drawCorner(-10, 5, -5, -5);
    // Position each corner respectively
    upperLeftCorner.position.set(-25, 20, 0); // x, y, z
    upperRightCorner.position.set(25, 20, 0);
    lowerLeftCorner.position.set(-25, -20, 0);
    lowerRightCorner.position.set(25, -20, 0);
    return {
        uLc: upperLeftCorner,
        uRc: upperRightCorner,
        lLc: lowerLeftCorner,
        lRc: lowerRightCorner
    };
};

function drawQuadrant(){ 
    var corners = positionCorners(); 
    box  = drawBox(); 
    group = new THREE.Group();
    group.name = 'quadrant';
    group.add(box);
    box.add(corners.uLc);
    box.add(corners.uRc);
    box.add(corners.lLc);
    box.add(corners.lRc);
    return group;
};

function onDragStart(event){
    console.log('on drag start');
};

function onDragEnd(event){
    console.log('on drag end');
};

function render(renderer, scene, camera){
    raycaster.setFromCamera(mouse, camera); // Update the picking ray with the camera and mouse movements
    intersects = raycaster.intersectObjects(scene.children);
    for(var i = 0; i < intersects.length; i++){
        intersects[i].object.material.color.set(0xff0000);
    }
    renderer.render(scene, camera);
};

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/DragControls.js"></script>