为什么我的three.js 照明不起作用？答案

【问题标题】：Why does my three.js lighting not work?为什么我的three.js 照明不起作用？
【发布时间】：2014-05-02 11:39:39
【问题描述】：

根据文档和一些示例等，我无法弄清楚这个小提琴 (http://jsfiddle.net/resistdesign/s6npL/) 有什么问题，灯应该可以工作。

var camera, scene, renderer, geometry, material, mesh, light1;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0x555555, specular: 0xffffff, shininess: 50, shading: THREE.SmoothShading } );

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    scene.add( new THREE.AmbientLight( 0x000000 ) );

    light1 = new THREE.PointLight( 0xff0040, 2, 50 );
    scene.add( light1 );

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

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    var time = Date.now() * 0.0005;

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    light1.position.x = Math.sin( time * 0.7 ) * 30;
    light1.position.y = Math.cos( time * 0.5 ) * 40;
    light1.position.z = Math.cos( time * 0.3 ) * 30;

    renderer.render(scene, camera);

}

【问题讨论】：

标签： javascript three.js light

【解决方案1】：

我似乎误解了 PointLight() 参数的含义。第三个参数是光强度实际上为零的距离。所以在init()中添加这些行：

light1 = new THREE.PointLight( 0xff0040, 1, 5000 );
light1.position.set( 500, 500, 500 );

还要从render() 例程中删除 light1.position 的更新，直到您确保它按照您的想法进行。

【讨论】：