导入的 3D 对象不会使用three.js 投射阴影 [英] imported 3D objects are not casting shadows with three.js

问题描述

我目前正在将我的大脑围绕在three.js 上，并且我已经成功地通过three.OBJMTLLoader 导入了我在C4D 中制作的3d 模型，但是我无法让对象投射阴影.我已经使用了 object.castShadow = true 但它不起作用，但我可以在 Three.js 中创建几何体来投射阴影，所以我知道场景设置正常.

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

代码在下面，如果有人可以指出我做错了什么，或者即使导入的对象可以投射阴影，那么我将永远感激不尽.

塔.

 <脚本>var 容器；var 控件；var 相机、场景、渲染器；var windowHalfX = window.innerWidth/2;var windowHalfY = window.innerHeight/2;在里面();动画()；函数初始化(){container = document.createElement('div');document.body.appendChild(容器);camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 2000);相机.位置.z = 500;相机位置 y = 500;场景 = 新的 THREE.Scene();控件 = 新的 THREE.OrbitControls( 相机 );control.addEventListener('更改', 渲染);varambientLight = new THREE.AmbientLight(0x0c0c0c);场景.添加(环境光)；var spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set( 500, 1000, 500 );spotLight.castShadow = true;spotLight.shadowMapWidth = 1024;spotLight.shadowMapHeight = 1024;场景添加(聚光灯)；var 同伴 = 新的 THREE.OBJMTLLoader();伴侣.负载('companion2.obj'，'companion.mtl'，函数(对象){object.position.set(0,-20,0);object.scale.set( 0.8, 0.8, 0.8 );object.castShadow = true;场景添加(对象)；});var floorGeometry = new THREE.CubeGeometry(1000,4,1000);var floorMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});var floor = new THREE.Mesh(floorGeometry, floorMaterial);楼层.位置.x=0;floor.position.y=-130;floor.position.z=0;floor.receiveShadow = true;场景.添加(地板)；var geometry = new THREE.BoxGeometry( 100, 100, 100 );网格 = 新三.网格(几何)；场景添加(网格)；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;无功步骤=0;使成为();};函数渲染(){相机.看(场景.位置)；renderer.render(场景，相机)；}函数动画(){requestAnimationFrame( 动画 );使成为();}

解决方案

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

在您的加载程序回调中，添加:

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

three.js r.66

I'm currently wrapping my brain around three.js and I've imported 3d model I made in C4D via the three.OBJMTLLoader successfully, but I can't get the object to cast a shadow. I've used object.castShadow = true but its not working but I can get geometry created in three.js to cast a shadow so I know the scene is setup ok.

The test scene is currently here: http://kirkd.co.uk/dev/ and has now been updated with the fix suggested below.

The code is below, if someone could kindly point out either what I'm doing wrong or even if imported objects can cast shadows then I'd be eternally grateful.

Ta.

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

解决方案

Your object has child meshes, each of which needs to have castShadow set to true.

In your loader callback, add this:

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

three.js r.66

这篇关于导入的 3D 对象不会使用three.js 投射阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！