【问题标题】:collada 3D object mouse eventcollada 3D 对象鼠标事件
【发布时间】:2015-02-26 11:48:34
【问题描述】:


大家好,

我想在鼠标悬停时更改 3D 对象(collada 文件)子对象的颜色。
我尝试使用 Raycaster 方法,但它不起作用。
this 样本。
但我想在鼠标悬停时更改颜色或突出显示 模型孩子

这是我的代码。

                var oLoader = new THREE.ColladaLoader();
                oLoader.load('model/sample.dae', function (collada) {

                    var object = collada.scene;
                    var skin = collada.skins[0]; 

                    object.rotation.x = -Math.PI / 2;
                    object.rotation.z = Math.PI / 2;
                    object.position.x = 0;
                    object.position.y = 0;
                    object.position.z = 0;
                    object.scale.set(0.025, 0.025, 0.025);
                    object.updateMatrix();
                    scene.add(object);

请告诉我该怎么做。
非常感谢。

【问题讨论】:

    标签: three.js collada


    【解决方案1】:

    巧合的是,我也在做一个需要鼠标事件的项目,并编写了一个小对象来使用。

    var mouse = {
        getIntersects: function( camera, sceneChildren, event ){
            event = event || window.event;
    
            var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
            var mouseY = -( event.clientY / window.innerHeight ) * 2 + 1;
    
            var vector = new THREE.Vector3( mouseX, mouseY, camera.near );
                vector.unproject( camera );
    
            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
    
            var intersects = raycaster.intersectObjects( sceneChildren );
    
            if ( intersects.length > 0 ) {
                //console.log(intersects);
                return intersects;
            }
            return false;
        },
    
        Position3D: function(sceneChildren){
            var intersects = mouse.getIntersects( sceneChildren );
            return intersects[0].point
        }
    }
    

    我不知道你是想单独使用这个对象,还是将它用作自己编写代码的参考,但这是你如何使用它:

    document.addEventListener('click', function(event){
        var intersectObj = mouse.getIntersects( camera, scene.children, event)[0];
        if(window.console){ 
            console.log(intersectObj);
        }
        else{
            alert(intersectObj);
        }
    });
    

    现在您已将点击的对象全部整理好,您可以开始使用这些功能了。最简单的方法是将它们添加到网格中。所以:

    var mesh = new THREE.Mesh(geometry, material);
        mesh.click = function(){
            alert('object was clicked');
        }
    

    【讨论】:

    • 感谢您的回答,我试试看。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-08-01
    • 1970-01-01
    • 2013-03-26
    • 1970-01-01
    • 1970-01-01
    • 2011-12-01
    • 2013-01-13
    相关资源
    最近更新 更多