Threejs 遍历对象 onClick [英] threejs traverse an object onClick

问题描述

我想为对象添加线框 onClick 按钮，所以我使用 traverse 来做它，它在 OBJMTLLoder 中工作正常，如果尝试使用像下面这样的单独功能 onclick按钮导致

i want to add wireframe for an object onClick the button, so am using traverse to do it, it is working fine in the OBJMTLLoder, if a try it with the separate function like below onclick the button it cause

对象未定义

 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，这可能吗??为什么会出现错误??

can we traverse on the object onclick, is it possible ?? why am getting the error ??

推荐答案

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

There are a couple of ways to add wireframe appearance to your object. One is to add a THREE.WireframeHelper to the scene. That is what you have done with the ladybug model and when the user presses the On button you add() the wireframe to the scene and when the user presses the Off button you remove() the wireframe object from the scene.

对于男性模型(不起作用的模型)，您想寻找对象材料并进行更改.

With the male model (the one that does not work) you wanted to look for the object material and go and change that.

您应该正常加载模型:

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

这篇关于Threejs 遍历对象 onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！