three.js - 如何使用 threejs 为对象应用平面着色

Question

在 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>

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

如何在threejs中为一个物体应用阴影

Answer 1

您的网格实际上可以是一个完整的层次结构，因此您需要访问网格的每个子项以更改 Material 。因此，您需要遍历网格并在访问每个子项时更改 Material 。

mesh.traverse( function ( child ) {

    if ( child instanceof THREE.Mesh )

        child.material = new material that you want;

} );