Three.js - Drag Collada Files

Question

My objects are moving on the XZ axis through drag and drop.

Unfortunately the collada files doesn't act like them...

Here is my code:

var container;
var camera, controls, scene, renderer;
var objects = [], plane;

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3(),
INTERSECTED, SELECTED;

init();
animate();

function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 50;
    camera.position.z = 200;

    controls = new THREE.OrbitControls( camera, container );
    controls.rotateSpeed = 2;
    controls.zoomSpeed = 2;
    // controls.panSpeed = 3;
    controls.noZoom = false;
    // controls.noPan = false;
    controls.staticMoving = true;
    controls.dynamicDampingFactor = 0.3;
    controls.maxPolarAngle = Math.PI/2.0;

    scene = new THREE.Scene();

    //LIGHTS
    [...]

    //DAT.GUI settings
    var gui = new dat.GUI();
    [...]

    //Plane as Ground (called floor)
    floor = new [...]

    plane = new THREE.Mesh(
        new THREE.PlaneBufferGeometry( 2000, 2000, 5, 5 ),
        new THREE.MeshBasicMaterial( { visible: false } )
        );
    plane.applyMatrix(new THREE.Matrix4().makeRotationX( -Math.PI / 2));
    scene.add( plane );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setClearColor( 0xf0f0f0 );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.sortObjects = false;
    renderer.setClearColor( 0x272727, 1); // Couleur de fond
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFShadowMap;

    //Shadows
    [...]

    container.appendChild( renderer.domElement );

    renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
    renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
    renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );

    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}

function onDocumentMouseMove( event ) {
    event.preventDefault();
    // The following will translate the mouse coordinates into a number
    // ranging from -1 to 1, where
    //      x == -1 && y == -1 means top-left, and
    //      x ==  1 && y ==  1 means bottom right
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera( mouse, camera );

    if ( SELECTED ) {
        var intersects = raycaster.intersectObject( plane );

        if ( intersects.length > 0 ) {
            SELECTED.position.copy( intersects[ 0 ].point.sub( offset ) );
        }
        return;
    }

    var intersects = raycaster.intersectObjects( objects );

    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.position.copy( INTERSECTED.position );
            // plane.lookAt( camera.position );
        }
        container.style.cursor = 'pointer';

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

function onDocumentMouseDown( event ) {
    event.preventDefault();
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {
        controls.enabled = false;
        SELECTED = intersects[ 0 ].object;
        var intersects = raycaster.intersectObject( plane);

        if ( intersects.length > 0 ) {
            offset.copy( intersects[ 0 ].point ).sub( plane.position );
        }
        container.style.cursor = 'move';
    }
}

function onDocumentMouseUp( event ) {
    event.preventDefault();
    controls.enabled = true;

    if ( INTERSECTED ) {
        plane.position.copy( INTERSECTED.position );
        SELECTED = null;

    }
    container.style.cursor = 'auto';
}

//

function animate() {
    requestAnimationFrame( animate );
    render();
}

function render() {
    controls.update();
    renderer.render( scene, camera );
}

//First Object Adding and acting as wanted
[...]
//Second Object Adding and acting as wanted
[...]


var aLamp = document.getElementById("addLamp");
aLamp.addEventListener("click", addLamp, false);
function addLamp(){
//  //COLLADA IMPORT
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;
    loader.load( './models/collada/misc/lamp.dae', function ( collada ) {
        var dae = collada.scene;
        var skin = collada.skins[ 0 ];
        dae.position.set(0,0,0); //x,z,y
        dae.scale.set(10,10,10);
        daemesh = dae.children[0].children[0];
        daemesh.castShadow = true;
        daemesh.receiveShadow = true;
        objects.push( dae );
        scene.add(dae); 
    });             
}

In fact, I can't select the colladas and moving them.

Somebody knows where the problem(s) is/are ?

Thank you :D

Answer 1

Solution with eventcontrols ( example http://alexan0308.github.io/threejs/examples/controls_events_loaders.html )

<script src="js/controls/EventsControls.js"></script>

EventsControls2 = new EventsControls(camera, renderer.domElement);
EventsControls2.map = checkerboard;

EventsControls2.attachEvent('mouseOver', function() {

    this.container.style.cursor = 'pointer';

});

EventsControls2.attachEvent('mouseOut', function() {

    this.container.style.cursor = 'auto';

});

EventsControls2.attachEvent('dragAndDrop', function() {

    this.container.style.cursor = 'move';
    this.focused.position.y = this.previous.y;

});



var loader = new THREE.ColladaLoader();
var Scale = new THREE.Vector3(20, 20, 20);
EventsControls2.scale.copy(Scale);
EventsControls2.offsetUse = true;

loader.options.convertUpAxis = true;
loader.load('models/monster/monster.dae', function(collada) {
    var dae = collada.scene;
    dae.position.set(0, 0, 0);
    dae.scale.set(1 / Scale.x, 1 / Scale.y, 1 / Scale.z);

    dae.updateMatrix();

    scene.add(dae);
    EventsControls2.attach(dae);
});