sRcBh sRcBh - 2 months ago 47
Javascript Question

Three.js - Drag Collada Files

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

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