javascript - 导入的 3D 对象不使用 three.js 转换阴影

Question

我目前正在全神贯注于 three.js，我已经成功地通过 three.OBJMTLLoader 导入了我在 C4D 中制作的 3d 模型，但我无法让对象转换阴影。我使用了 object.castShadow = true 但它不起作用，但我可以在 three.js 中创建几何体来转换阴影，所以我知道场景设置正常。

目前测试场景在这里:http://kirkd.co.uk/dev/并且现在已经更新了下面建议的修复。

代码如下，如果有人能指出我做错了什么，或者即使导入的对象可以转换阴影，我也将永远感激不尽。

他。

        <script>


        var container;

        var controls;

        var camera, scene, renderer;

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

        init();
        animate();

        function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
            camera.position.z = 500;
            camera.position.y = 500;

            scene = new THREE.Scene();

            controls = new THREE.OrbitControls( camera );
            controls.addEventListener( 'change', render );


            var ambientLight = new THREE.AmbientLight(0x0c0c0c);
            scene.add(ambientLight);

            var spotLight = new THREE.SpotLight( 0xffffff );
            spotLight.position.set( 500, 1000, 500 );
            spotLight.castShadow = true;

            spotLight.shadowMapWidth = 1024;
            spotLight.shadowMapHeight = 1024;
            scene.add( spotLight );

            var companion = new THREE.OBJMTLLoader();
            companion.load( 'companion2.obj', 'companion.mtl', function ( object ) {
                object.position.set(0,-20,0);
                object.scale.set( 0.8, 0.8, 0.8 );
                object.castShadow = true;
                scene.add( object );
            });


            var floorGeometry = new THREE.CubeGeometry(1000,4,1000);
            var floorMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
            var floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.position.x=0;
            floor.position.y=-130;
            floor.position.z=0;
            floor.receiveShadow = true;
            scene.add(floor);

            var geometry = new THREE.BoxGeometry( 100, 100, 100 );
            mesh = new THREE.Mesh( geometry);
            scene.add( mesh );
            mesh.position.set(-100,200,10);
            mesh.castShadow = true;

            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE, 1.0);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container.appendChild( renderer.domElement );
            renderer.shadowMapEnabled = true;
            renderer.shadowMapSoft = true;
            spotLight.shadowCameraVisible = true;

            var step=0;
            render();
        };

        function render() {
          camera.lookAt(scene.position);
          renderer.render(scene, camera);
      }


      function animate() {
        requestAnimationFrame( animate );
        render();

    }

    </script>

Answer 1

您的对象有子网格，每个子网格都需要将 castShadow 设置为 true。

在您的加载程序回调中，添加以下内容:

object.traverse( function( node ) { if ( node instanceof THREE.Mesh ) { node.castShadow = true; } } );

three.js r.66