我遵循了 Three.js 的入门教程,但在尝试向场景添加点光源时很快就陷入了困境。无论我如何欺骗我的代码,点光源永远不会照亮立方体。
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,
window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 55;
var light = new THREE.PointLight( 0xff0000, 1, 100, 2);
light.position.set(20,0,20);
light.castShadow = true;
scene.add(light);
var spheresize = 1;
var pointLightHelper = new THREE.PointLightHelper( light, spheresize );
scene.add( pointLightHelper );
var ambient = new THREE.AmbientLight( 0x303030);
scene.add(ambient);
var cube_geometry = new THREE.BoxGeometry(10,10,10);
var cube_material = new THREE.MeshLambertMaterial({color:0x00ff00});
var cube = new THREE.Mesh(cube_geometry, cube_material);
scene.add(cube);
animate();
function animate(){
requestAnimationFrame( animate);
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
在上面的代码中,我可以看到显示的光助手,并且绿色立方体被环境光照亮,但没有来自点光源的光(参见附图)。我错过了什么?如何让点光源也照亮立方体?
最佳答案
灯光工作正常,但您需要更改灯光或 Material 的颜色。
目前,您正在将纯红光照射在纯绿色 Material 上。 Material 的颜色决定了 Material 反射哪些颜色成分(以及反射的量)。由于纯红光没有绿色成分,因此光似乎完全错过了物体。
这是违反直觉的,因为在我们的物理世界中很少有纯红光和纯绿 Material 。
关于javascript - 如何在 Three.js 中配置点光源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46231675/