如何在Three.js中配置点光源

javascript three.js

94 观看

1回复

195 作者的声誉

我遵循了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);
}

在上面的代码中,我可以看到显示的照明助手,并且绿色立方体被环境光照亮,但是没有光来自点光源(请参见下图)。我错过了什么?如何获得点光源来照亮立方体?代码结果

作者: ORL 的来源 发布者: 2017 年 9 月 15 日

回应 1


3

972 作者的声誉

决定

灯工作正常,但是您需要更改灯或材料的颜色。

目前,您正在将纯红色的光照射到纯绿色的材料上。材料的颜色决定了材料反射哪些颜色成分(以及量多少)。而且由于纯红色的光没有绿色成分,所以该光似乎完全错过了物体。

这是违反直觉的,因为在我们的物理世界中,很少有纯红色的光和纯绿色的材料。

作者: Matey 发布者: 2017 年 9 月 15 日
32x32