Three.js - Glisser les fichiers Collada

Question

Mes objets se déplacent sur l'axe XZ par glisser-déposer.

Malheureusement, les fichiers COLLADA n'agit pas comme eux ...

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

En fait, je ne peux pas sélectionner les colladas et en les déplaçant.

Quelqu'un sait où se trouve le (s) problème (s)?

Merci: D

Answer 1

Solution avec eventcontrols (exemple 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); 
});