在下面的代码中,我渲染了一些立方体,并用PointLight和AmbientLight照亮它们。然而,当AmbientLight设置为0xffffff时,无论其指定的颜色如何,都会将侧面的颜色更改为白色。奇怪的是,聚光灯正按预期工作。
我如何才能让环境光表现得像点光源,因为它不应该洗掉面部颜色,而只是照亮它们?也就是说,将环境光设置为0xffffff相当于在对象周围具有全强度的多点光源。
$(function(){
var camera, scene, renderer;
var airplane;
var fuselage;
var tail;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.z = 2;
airplane = new THREE.Object3D();
fuselage = newCube(
{x: 1, y: 0.1, z: 0.1},
{x: 0, y: 0, z: 0},
[0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
[0, 1, 2, 3, 4, 5]
);
airplane.add(fuselage);
tail = newCube(
{x: 0.15, y: 0.2, z: 0.05},
{x: 0.5, y: 0.199, z: 0},
[0xffff00, 0x808000, 0x0000ff, 0xff00000, 0xffffff, 0x808080],
[0, 1, 2, 3, 4, 5]
);
airplane.add(tail);
scene.add( airplane );
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0x888888);
pointLight.position.x = 100;
pointLight.position.y = 100;
pointLight.position.z = 100;
scene.add(pointLight);
renderer = new THREE.WebGLRenderer();
renderer.setClearColorHex(0x000000, 1);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
airplane.rotation.x += 0.005;
airplane.rotation.y += 0.01;
renderer.render( scene, camera );
}
});
function newCube(dims, pos, cols, colAss){
var mesh;
var geometry;
var materials = [];
geometry = new THREE.CubeGeometry( dims.x, dims.y, dims.z );
for (var i in cols){
materials[i] = new THREE.MeshLambertMaterial( { color: cols[i], overdraw: true } );
}
geometry.materials = materials;
for (var i in colAss){
geometry.faces[i].materialIndex = colAss[i];
}
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh.position = pos;
return mesh;
}
EDIT-三个.js API已更改;material.ambient
已被弃用。
解决方案是将环境光的强度设置为合理的值。
var ambientLight = new THREE.AmbientLight( 0xffffff, 0.2 );
更新为three.js r.84