threejs移动整个对象而不仅仅是孩子

Question

我正在构建一个小应用程序，我想在其中移动对象。我使用https://threejs.org/examples/webgl_interactive_draggablecubes.html作为示例，它有点工作。我加载json模型但由于某种原因我只能移动模型的一部分而不是整个模型。我怀疑它与raycaster上的递归标志有关。将递归标志设置为false会导致所有对象都没有移动。

移动简单网格就像魅力一样。

我有什么遗失的吗？

init.js：

// INIT VARS ----------------------------------------------------------------------------------------------
var container, camera, clock, renderer, scene, controls, startTime, OrtCamera, PersCamera;
var orthoCam = false;
var objects = []; // Put objects into array so we can use a raycaster with intersect
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var offset = new THREE.Vector3();
var intersection = new THREE.Vector3()
var INTERSECTED, SELECTED;
var object;
var plane = new THREE.Plane();
var loader = new THREE.ObjectLoader();
var line;



function init() {
    // CLOCK ----------------------------------------------------------------------------------------------
    clock = new THREE.Clock();

    // perspective CAMERA
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 10, 10000);
    camera.position.x = 200;
    camera.position.y = 200;
    camera.position.z = 200;

    camera.position.set(0, 90, 0);
    camera.up = new THREE.Vector3(0,1,0);
    camera.lookAt(0, 0, 0);

    // CONTROLS ----------------------------------------------------------------------------------------------
    controls = new THREE.OrbitControls( camera, canvas );

    controls.maxPolarAngle = Math.PI/2;
    controls.maxDistance = Infinity;

    // to disable zoom
    controls.enableZoom = true;

    // to disable rotation
    controls.enableRotate = true;

    // to disable pan
    controls.enablePan = true;


    // RENDERER ----------------------------------------------------------------------------------------------
    container = document.getElementById( "canvas" );
    renderer = new THREE.WebGLRenderer({ canvas: container, antialias: true, alpha:true});
    renderer.setSize( window.innerWidth, window.innerHeight - 100);
    renderer.setClearColor(0xFFFFFF, 0);

    // SCENE ----------------------------------------------------------------------------------------------
    scene = new THREE.Scene();  

    // LIGHT ----------------------------------------------------------------------------------------------
    var light = new THREE.AmbientLight( 0x404040 ); // soft white light


    startTime = Date.now();

    // Test object(s) for mouse movement. Can be deleted once done.
    var geometry = new THREE.BoxGeometry( 50, 0.1, 50 );
    object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
    object2 = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
    object.position.y = 0;
    object2.position.y = 5;
    object2.position.z = 70;

    object.castShadow = true;
    object.receiveShadow = true;
    scene.add( object );
    scene.add( object2 );
    objects.push( object );
    objects.push( object2 );



    // Load 3D model from json file
    loader.load('/resources/models/tree2.json', function(tree){
        var combined = new THREE.Geometry();

        tree.updateMatrix();
        tree.scale.set(5,5,5);
        tree.position.y = 5;        


        scene.add(tree);

        objects.push(tree);

    });

    scene.add( light );

}
/**
 * animate and display the scene
*/
function animate() {
    // render the 3D scene
    render();

    // relaunch the 'timer' 
    requestAnimationFrame( animate );

}
/**
 * Render the 3D scene
*/
function render() {

    renderer.render( scene, camera );  

}

main.js：

/**
 * Add event listeners for drag-and-drop of objects.
*/
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mousedown', onDocumentMouseDown, false  );
document.addEventListener( 'mouseup', onDocumentMouseUp, false  );

/**
 * Mouse move event
*/
function onDocumentMouseMove( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    if ( SELECTED ) {
        if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
            SELECTED.position.copy( intersection.sub( offset ) );
        }
        return;
    }
    var intersects = raycaster.intersectObjects( objects, true );
    if ( intersects.length > 0 ) {
        if ( INTERSECTED != intersects[ 0 ].object ) {
            if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
            INTERSECTED = intersects[ 0 ].object;
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            plane.setFromNormalAndCoplanarPoint(
                camera.getWorldDirection( plane.normal ),
                INTERSECTED.position );
        }
        container.style.cursor = 'pointer';

    } else {
        if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
        INTERSECTED = null;
        container.style.cursor = 'auto';
    }
}

/**
 * Mouse down event
*/
function onDocumentMouseDown( event ) {
    event.preventDefault();
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objects, true );
    if ( intersects.length > 0 ) {
        console.log(intersects);
        controls.enabled = false;
        SELECTED = intersects[ 0 ].object;
        if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
            offset.copy( intersection ).sub( SELECTED.position );
        }
        container.style.cursor = 'move';
    }
}

/**
 * Mouse up event
*/
function onDocumentMouseUp( event ) {
    event.preventDefault();
    controls.enabled = true;
    if ( INTERSECTED ) {
        SELECTED = null;
    }
    container.style.cursor = 'auto';
}