threejs遍历一个对象onClick

时间:2014-06-24 11:33:52

标签: javascript three.js

我想为对象添加线框onClick按钮,所以我使用traverse来做它,它在OBJMTLLoder中运行正常,如果尝试使用单独的函数如下面点击它导致的按钮

  

对象未定义

 function wireframe(object){
                 //alert('hhhhhh');

                object.traverse( function ( child ) {

                    if ( child instanceof THREE.Mesh )
                    {
                    //child.geometry.computeFaceNormals();
                    var  geometry = child.geometry;
                    //console.log(geometry);
                    //geometry.dynamic = true;
                    material = child.material;
                     mesh = new THREE.Mesh(geometry, material);
                        scene.add(mesh);

                    var useWireFrame = true;
                        if (useWireFrame) {
                            mesh.traverse(function (child) {
                                if (child instanceof THREE.Mesh) 
                                {
                                //child.material.wireframe = true;

                                var wfh = new THREE.WireframeHelper( mesh, 0xffffff );
                                wfh.material.wireframe = true;
                                wfh.material.linewidth = 2; // looks much better if your PC will support it
                                scene.add( wfh );                       

                                }
                            });
                        }

                    }
                    });



                }

我们可以遍历对象onclick,有可能吗?为什么会得到错误?

1 个答案:

答案 0 :(得分:2)

有几种方法可以为对象添加线框外观。一种是向场景添加THREE.WireframeHelper。这就是你对瓢虫模型所做的,当用户按下On按钮时,你add()线框到场景,当用户按下Off按钮,你remove()场景中的线框对象。

使用男性模型(不起作用的模型),您想要查找对象材料并进行更改。

您应该正常加载模型:

// this is asynchronous loading
// add a name to the object so you can search for it later.
var loader = new THREE.OBJMTLLoader();
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl',
    function ( object ) { object.name = 'name you want'; scene.add ( object ) } );

function wireframe() {
    var object = scene.getObjectByName ("name you want", true); // recursive search

    object.traverse ( function (child) {
        if (child instanceof THREE.Mesh)
            child.material.wireframe = true;
    }
}