3 .js -拖动Collada文件

Three.js - Drag Collada Files

本文关键字:Collada 文件 拖动 js      更新时间:2023-09-26

我的对象通过拖放在XZ轴上移动。

不幸的是collada文件不像它们那样…

下面是我的代码:
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); 
    });             
}

事实上,我不能选择colladas并移动它们。

有人知道问题在哪里吗?

Thank you:D

eventcontrols的解(示例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);
});