Three.js-拖动Collada文件 [英] Three.js - Drag Collada Files

问题描述

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

不幸的是，collada文件的行为不像它们...

这是我的代码：

  var容器； 
 var相机，控件，场景，渲染器； 
 var objects = []，平面； 
 
 var raycaster =新的THREE.Raycaster（）; 
 var mouse = new THREE.Vector2（），
 offset = new THREE.Vector3（），
 INTERSECTED，SELECTED; 
 
 init（）; 
 animate（）; 
 
函数init（）{
 
 container = document.createElement（'div'）; 
 document.body.appendChild（container）; 
 
摄像头=新的THREE.PerspectiveCamera（70，window.innerWidth / window.innerHeight，1，10000）; 
 camera.position.y = 50; 
 camera.position.z = 200; 
 
控件=新的三个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; 
 
场景=新的THREE.Scene（）; 
 
 //灯光
 [...] 
 
 //DAT.GUI设置
 var gui = new dat.GUI（）; 
 [...] 
 
 //平面为地面（称为地板）
地板=新[...] 
 
飞机=新三.Mesh（
新的THREE.PlaneBufferGeometry（2000，2000，5，5），
新的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; 
 
 //阴影
 [...] 
 
 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）; 
} 
 
函数onWindowResize（）{
 camera.aspect = window.innerWidth / window.innerHeight; 
 camera.updateProjectionMatrix（）; 
 renderer.setSize（window.innerWidth，window.innerHeight）; 
} 
 
函数onDocumentMouseMove（event）{
 event.preventDefault（）; 
 //以下内容会将鼠标坐标转换为一个数字
 //范围从-1到1，其中
 // x == -1&& y == -1表示左上角，而
 // x == 1&& y == 1表示鼠标右下
.x =（event.clientX / window.innerWidth）* 2-1; 
 mouse.y =-（event.clientY / window.innerHeight）* 2 +1; 
 
 raycaster.setFromCamera（鼠标，相机）; 
 
 if（SELECTED）{
 var intersects = raycaster.intersectObject（plane）; 
 
 if（intersects.length> 0）{
 SELECTED.position.copy（intersects [0] .point.sub（offset））; 
} 
回报； 
} 
 
 var intersects = raycaster.intersectObjects（objects）; 
 
 if（intersects.length> 0）{
 
 if（INTERSECTED！= intersects [0] .object）{
 
 if（INTERSECTED ）INTERSECTED.material.color.setHex（INTERSECTED.currentHex）; 
 INTERSECTED =相交[0] .object; 
 INTERSECTED.currentHex = INTERSECTED.material.color.getHex（）; 
 plane.position.copy（INTERSECTED.position）; 
 // plane.lookAt（camera.position）; 
} 
 container.style.cursor ='pointer'; 
 
}否则{
 if（INTERSECTED）INTERSECTED.material.color.setHex（INTERSECTED.currentHex）; 
 INTERSECTED = null; 
 container.style.cursor ='auto'; 
} 
} 
 
函数onDocumentMouseDown（event）{
 event.preventDefault（）; 
 raycaster.setFromCamera（鼠标，相机）; 
 var intersects = raycaster.intersectObjects（objects）; 
 
 if（intersects.length> 0）{
 controls.enabled = false; 
 SELECTED =相交[0] .object; 
 var intersects = raycaster.intersectObject（plane）; 
 
 if（intersects.length> 0）{
 offset.copy（intersects [0] .point）.sub（plane.position）; 
} 
 container.style.cursor =移动; 
} 
} 
 
函数onDocumentMouseUp（event）{
 event.preventDefault（）; 
 controls.enabled = true; 
 
 if（INTERSECTED）{
 plane.position.copy（INTERSECTED.position）; 
 SELECTED = null; 
 
} 
 container.style.cursor ='auto'; 
} 
 
 // 
 
函数animate（）{
 requestAnimationFrame（animate）; 
 render（）; 
} 
 
函数render（）{
 controls.update（）; 
 renderer.render（scene，camera）; 
} 
 
 //第一个对象添加并充当通缉
 [...] 
 //第二个对象添加并充当通缉
 [。 ..] 
 
 
 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'，函数（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）; 
}）； 
} 
  

事实上，我无法选择和移动它们。 p>

有人知道问题出在哪里？

谢谢：D

解决方案

使用 eventcontrols 的解决方案（示例 http://alexan0308.github.io/threejs/examples/controls_events_loaders.html ）

 < script src = js / controls / EventsControls.js>< / script> 
 
 EventsControls2 =新的EventsControls（相机，renderer.domElement）； 
 EventsControls2.map =棋盘格； 
 
 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）; 
}）； 
  

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

解决方案

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

这篇关于Three.js-拖动Collada文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！