THREE.OBJLoader投下了阴影?

时间:2018-02-11 21:34:56

标签: javascript three.js

我正在尝试制作对象并接收阴影,

场景中有一个光源THREE.SpotLight

这是我的MTLLoader()和OBJLoader()

的代码
        var mtlLoader = new THREE.MTLLoader();
        mtlLoader.setBaseUrl('assets/');
        mtlLoader.setPath('assets/');
        mtlLoader.load('komoda.mtl', function (materials) {
            materials.preload();
             materials.materials.lambert2SG.map.magFilter = THREE.NearestFilter;
             materials.materials.lambert2SG.map.minFilter = THREE.LinearFilter;

             materials.materials.lambert3SG.map.magFilter = THREE.NearestFilter;
             materials.materials.lambert3SG.map.minFilter = THREE.LinearFilter;

            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials(materials);
            objLoader.setPath('assets/');
            objLoader.load('komoda.obj', function (object) {
                object.castShadow = true;
                object.receiveShadow = true;
                scene.add(object);
            });
        });

完整的js代码:https://a3d.joladev2.com/webgl2/webgl-attempt.js

这是在线示例:https://a3d.joladev2.com/webgl2/index.html

谢谢

编辑:我添加了jsfiddle,但无法在jsfiddle上加载材料

https://jsfiddle.net/fcb9qoco/23/

由于

编辑2:已解决 - 有2个问题,一个是spotLight.shadow.camera.near = 500;

正确的值是10,所以spotLight.shadow.camera.near = 10;

谢谢@gaitat

第二个是平面物体没有receiveShadow = true;

现在有了,谢谢@Jim Tang

1 个答案:

答案 0 :(得分:1)

在线示例不能在我的chrome上运行,所以我说不清楚,但在我的' Three.js Inspector'调试选项卡显示层次结构:

Scene
 +- SpotLight
 +- Group
  |- plane  <-- check this Mesh object receiveShadow property
  |- komoda