Three.js 如何为具有3J的对象应用平面着色

在threejs中，我想为一个对象应用着色，所以我使用了下面的代码

    <script>

        //initialize viewer mode -- orbit default

        var v_mode='orbit';
        var container, stats;

        var camera, scene, renderer;

        var mouseX = 0, mouseY = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        var clock = new THREE.Clock();
        var geometry = new THREE.Geometry();

        init();
        animate();


        function init() {

            container =  document.getElementById('Viewer');
            document.body.appendChild( container );

         camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
         camera.position.z = 100;

            // scene


            controls = new THREE.OrbitControls( camera, container );
            controls.rotateSpeed = 5.0;
            controls.zoomSpeed = 2;
            controls.panSpeed = 2;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = false;
            controls.dynamicDampingFactor = 0.3;

            scene = new THREE.Scene();

            var ambient = new THREE.AmbientLight( 0x101030 );
            scene.add( ambient );

            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 );
            scene.add( directionalLight );



            var loader = new THREE.OBJMTLLoader();
            loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {

                object.position.y = - 80;
                scene.add( object );

            } );


            //

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );


                // create a camera contol
        cameraControls  = new THREEx.DragPanControls(camera)

        // transparently support window resize
        THREEx.WindowResize.bind(renderer, camera);
        // allow 'p' to make screenshot
        THREEx.Screenshot.bindKey(renderer);
        // allow 'f' to go fullscreen where this feature is supported
        if( THREEx.FullScreen.available() ){
            THREEx.FullScreen.bindKey();        
            //document.getElementById('inlineDoc').innerHTML    += "- <i>f</i> for fullscreen";
        }

        }

        function onWindowResize() {

            windowHalfX = window.innerWidth / 2;
            windowHalfY = window.innerHeight / 2;

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

        }

        function onDocumentMouseMove( event ) {

            mouseX = ( event.clientX - windowHalfX ) / 2;
            mouseY = ( event.clientY - windowHalfY ) / 2;

        }

        //

        function animate() {

            requestAnimationFrame( animate );
            render();

            function rotateAroundWorldAxis( object, axis, radians ) {

                var rotationMatrix = new THREE.Matrix4();

                rotationMatrix.makeRotationAxis( axis.normalize(), radians );
                rotationMatrix.multiplySelf( object.matrix );                       // pre-multiply
                object.matrix = rotationMatrix;
                object.rotation.setEulerFromRotationMatrix( object.matrix );
            }

        }

        function render() {

            var delta = clock.getDelta(),
                time = clock.getElapsedTime() * 5;

            controls.update( delta );

            /*camera.position.x += ( mouseX - camera.position.x ) * .05;
            camera.position.y += ( - mouseY - camera.position.y ) * .05;*/

            //camera.lookAt( scene.position );

            renderer.render( scene, camera );

            renderer.setClearColor ( 0xFFFFFF, 0.0 );

        }

        function change_Mode(mode)
        {
            //alert(mode);
            if(mode=='fp')
            {

            controls = new THREE.FirstPersonControls( camera ); 
            controls.movementSpeed = 70;
            controls.lookSpeed = 0.04;
            controls.noFly = true;
            controls.lookVertical = false;

            }
            else
            {
            controls = new THREE.OrbitControls( camera, container );
            controls.rotateSpeed = 5.0;
            controls.zoomSpeed = 2;
            controls.panSpeed = 2;
            controls.noZoom = false;
            controls.noPan = false;
            controls.staticMoving = false;
            controls.dynamicDampingFactor = 0.3;
            }
        }

         function wireframe(check){
            // alert(check);
             if(check=='on')
                 {
                      mesh.material.wireframe = true;
                      mesh.material.color = new THREE.Color( 0x6893DE  );
                 }
               else
               {
                   mesh.material.wireframe = false;
                   mesh.material.color = new THREE.Color(0xffffff); 
               }
            }
        var camstart=60;
        function cfv()
        {

         var materials = new THREE.MeshLambertMaterial();
         materials.shading = THREE.FlatShading;
          camstart++;
         //alert(start);

         camera.fov = camstart;
         camera.updateProjectionMatrix();


        }


    </script>

//初始化查看器模式--动态观察默认值
var v_mode='orbit'；
var容器，stats；
摄像机、场景、渲染器；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
var clock=新的三个时钟（）；
var geometry=new THREE.geometry（）；
init（）；
制作动画（）；
函数init（）{
container=document.getElementById（'Viewer'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，12000）；
摄像机位置z=100；
//场面
控件=新的三个控件（摄影机、容器）；
controls.rotateSpeed=5.0；
controls.zoomSpeed=2；
控制。速度=2；
controls.noZoom=false；
controls.noPan=false；
controls.staticMoving=false；
controls.dynamicDampingFactor=0.3；
场景=新的三个。场景（）；
var环境光=新的三个环境光（0x101030）；
场景。添加（环境光）；
var方向灯=新的三个方向灯（0xffeedd）；
方向灯位置设置（0,0,1）；
场景。添加（方向光）；
var loader=new THREE.OBJMTLLoader（）；
loader.load（'obj/male02/male02.obj'，'obj/male02/male02_dds.mtl'，函数（对象）{
object.position.y=-80；
场景。添加（对象）；
} );
//
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.doElement）；
//
addEventListener（'resize'，onWindowResize，false）；
//创建摄影机控件
CameraControl=新的三轴拖动控制（摄像头）
//透明支持窗口大小调整
3X.WindowResize.bind（渲染器、相机）；
//允许“p”制作屏幕截图
THREEx.Screenshot.bindKey（渲染器）；
//允许“f”在支持此功能的地方全屏显示
if（三倍全屏可用（）{
THREEx.FullScreen.bindKey（）；
//document.getElementById（'inlineDoc'）。innerHTML+=“-f表示全屏”；
}
}
函数onWindowResize（）{
windowHalfX=window.innerWidth/2；
windowHalfY=window.innerHeight/2；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
onDocumentMouseMove函数（事件）{
mouseX=（event.clientX-windowHalfX）/2；
mouseY=（event.clientY-windowHalfY）/2；
}
//
函数animate（）{
请求动画帧（动画）；
render（）；
函数rotateAroundWorldAxis（对象、轴、弧度）{
var rotationMatrix=新的三个.Matrix4（）；
rotationMatrix.makeRotationAxis（axis.normalize（），弧度）；
旋转矩阵.乘法自身（object.matrix）；//预乘法
object.matrix=旋转矩阵；
object.rotation.setEulerFromRotationMatrix（object.matrix）；
}
}
函数render（）{
var delta=clock.getDelta（），
time=clock.getElapsedTime（）*5；
控制。更新（增量）；
/*camera.position.x+=（mouseX-camera.position.x）*.05；
camera.position.y+=（-mouseY-camera.position.y）*.05*/
//摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
renderer.setClearColor（0xFFFFFF，0.0）；
}
功能更改\u模式（模式）
{
//警报（模式）；
如果（模式=='fp'）
{
控件=新的三个。第一个人控件（摄像头）；
controls.movementSpeed=70；
controls.lookSpeed=0.04；
controls.noFly=true；
controls.lookVertical=false；
}
其他的
{
控件=新的三个控件（摄影机、容器）；
controls.rotateSpeed=5.0；
controls.zoomSpeed=2；
控制。速度=2；
controls.noZoom=false；
controls.noPan=false；
controls.staticMoving=false；
controls.dynamicDampingFactor=0.3；
}
}
功能线框（检查）{
//警惕（检查）；
如果（检查=='on'）
{
mesh.material.wireframe=真；
mesh.material.color=新的三种颜色（0x6893DE）；
}
其他的
{
mesh.material.wireframe=假；
mesh.material.color=新的三种颜色（0xffffff）；
}
}
var camstart=60；
函数cfv（）
{
var materials=新的三个.MeshLambertMaterial（）；
materials.shading=3.FlatShading；
camstart++；
//警报（启动）；
camera.fov=camstart；
camera.updateProjectMatrix（）；
}

不幸的是，代码在我的对象上没有任何意义

---

如何在threejs中为对象应用着色您的网格实际上可以是一个完整的层次，因此您需要访问网格的每个子对象来更改材质。因此，在访问每个子对象时，需要遍历网格并更改材质

mesh.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh )

        child.material = new material that you want;

} );

---

你是说代码不会改变你的目标