为什么Three.js中的灯光没有效果？

Question

我不明白为什么我的代码中灯光不起作用。我下载了一个简单的OBJ文件来测试OBJLoader，但模型没有受到影响。在我编辑光照之前，至少环境光会起作用。也许OBJ模型需要一个纹理？

            var container, stats;

        var camera, scene, renderer, controls;


        init();
        animate();


        function init() {

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

            scene = new THREE.Scene();

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

            controls = new THREE.TrackballControls( camera );

            controls.rotateSpeed = 2.0;
            controls.zoomSpeed = 1.2;
            controls.panSpeed = 0.0;

            controls.noZoom = false;
            controls.noPan = true;

            controls.staticMoving = true;
            controls.dynamicDampingFactor = 0.3;

            controls.keys = [ 65, 83, 68 ];

            controls.addEventListener( 'change', render );

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

            directionalLight = new THREE.DirectionalLight( 0xffffff );
            directionalLight.position.set( 1, 1, 0.5 ).normalize();
            scene.add( directionalLight );

            pointLight = new THREE.PointLight( 0xffaa00 );
            pointLight.position.set( 0, 0, 0 );
            scene.add( pointLight );

            sphere = new THREE.SphereGeometry( 100, 16, 8 );
            lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
            lightMesh.scale.set( 0.05, 0.05, 0.05 );
            lightMesh.position = pointLight.position;
            scene.add( lightMesh );


            var loader = new THREE.OBJLoader();
            loader.load( "originalMeanModel.obj", function ( object ) {
                scene.add( object );
            } );

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

        }

        function animate() {

            requestAnimationFrame( animate );
            controls.update();

        }

        function render() {

            camera.lookAt( scene.position );

            renderer.render( scene, camera );

        }

- Karijuana

---

你能分享一下你试图加载的 obj 文件吗？ - mrdoob

是整个光照都没有效果呢？还是只是阴影没有出现？你可以有定向光照，但却没有任何物体投射的实际阴影。 - Cory Gross

Answer 1

在THREE.js中，MeshBasicMaterial类似于卡通渲染器（适用于轮廓线、阴影绘制或线框），且不受灯光影响。

尝试使用MeshLambertMaterial或MeshPhongMaterial。

- Eli

---

源：https://threejsfundamentals.org/threejs/lessons/threejs-materials.html#:~:text=MeshLambertMaterial计算的是仅基础照明，而不考虑镜面高光。 MeshPhongMaterial还支持镜面高光。材质的shininess设置控制高光的大小。它默认为30。 - aggregate1166877

Answer 2

当我使用Blender的Three.js导出器时，遇到了类似的问题，即使在原始Blender模型中设置了漫射颜色并在Three.js代码中添加了环境光，所有内容都显示为黑暗。解决方法是编辑转换后的模型文件的一部分，其中有一行代码如下：

"colorAmbient" : [0, 0, 0]

我已经将其手动更改为

。

"colorAmbient" : [0.75, 0.75, 0.75]

无论在哪里出现，这都解决了问题。我提出这个问题是因为我的最佳猜测是你正在遇到类似的问题。如果没有看到*.obj文件，很难确切地诊断问题，但也许在您的模型设置中，您可以尝试更改环境颜色值而不是我们通常在分配颜色给模型时想到的漫反射颜色值。

- Stemkoski

Answer 3

也许this对你有帮助，如果你和我几天前一样遇到了同样的问题，如果你的obj文件中没有法线，那肯定是需要检查的地方。

你可以尝试使用MeshBasicMaterial来检查顶点/面是否正常：new THREE.MeshBasicMaterial({ color: 0x999999, wireframe: true, transparent: true, opacity: 0.85 }) 另外，正如doob先生所说，请考虑分享你正在加载的obj文件。

- daformat