three.js pointLight從r.67更改為r.68

Question

點光源與飛機之間的相互作用似乎已從r.67更改為r.68

我正在嘗試學習一歲的一本書，來學習three.js。 我已將教程示例簡化為一個平面，一個立方體和一個點光源，並且當我使用r.68（即光效果教程的重點）時，平面上的燈光的“發光”效果消失了。 我猜想它現在一定與平面的材料反射率有關嗎？

我沒有獲得任何線索來了解three.js github修訂說明或功能源代碼的歷史或類似的當前three.js示例，但我的three.js新秀狀態可能使我無法尋找所需信息。

如果有人可以解釋發生了什么變化以及為什么它不起作用，我很樂意將此破損的教程變成一種學習體驗。

編輯以添加示例替代源

這是r.68：

http://jsfiddle.net/nnu3qnq8/5/

這是r.67：

http://jsfiddle.net/nnu3qnq8/4/

碼：

  $(function () {
    var stats = initStats();

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer();

    renderer.setClearColorHex(0xEEEEEE, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);

    // create the ground plane
    var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);

    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 15
    plane.position.y = 0
    plane.position.z = 0

    // add the plane to the scene
    scene.add(plane);

    // create a cube
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff7777});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.castShadow = true;

    // position the cube
    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z = 0;

    // add the cube to the scene
    scene.add(cube);        

    // position and point the camera to the center of the scene
    camera.position.x = -25;
    camera.position.y = 30;
    camera.position.z = 25;
    camera.lookAt(new THREE.Vector3(10, 0, 0));

    // add subtle ambient lighting
    var ambiColor = "#0c0c0c";
    var ambientLight = new THREE.AmbientLight(ambiColor);
    scene.add(ambientLight);

    // add spotlight for the shadows
    // add spotlight for the shadows
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, -10);
    spotLight.castShadow = true;
    // scene.add( spotLight );

    var pointColor = "#ccffcc";
    var pointLight = new THREE.PointLight(pointColor);
    pointLight.distance = 100;
    pointLight.position = new THREE.Vector3(3, 5, 3);
    scene.add(pointLight);

    // add the output of the renderer to the html element
    $("#WebGL-output").append(renderer.domElement);

    // call the render function
    var step = 0;

    // used to determine the switch point for the light animation
    var invert = 1;
    var phase = 0;

    var controls = new function () {
        this.rotationSpeed = 0.03;
        this.ambientColor = ambiColor;
        this.pointColor = pointColor;
        this.intensity = 1;
        this.distance = 100;
    }

    var gui = new dat.GUI();
    gui.addColor(controls, 'ambientColor').onChange(function (e) {
        ambientLight.color = new THREE.Color(e);
    });

    gui.addColor(controls, 'pointColor').onChange(function (e) {
        pointLight.color = new THREE.Color(e);
    });

    gui.add(controls, 'intensity', 0, 3).onChange(function (e) {
        pointLight.intensity = e;
    });

    gui.add(controls, 'distance', 0, 100).onChange(function (e) {
        pointLight.distance = e;
    });
    render();

    function render() {
        stats.update();
        // move the light simulation
        if (phase > 2 * Math.PI) {
            invert = invert * -1;
            phase -= 2 * Math.PI;
        } else {
            phase += controls.rotationSpeed;
        }
        pointLight.position.z = +(7 * (Math.sin(phase)));
        pointLight.position.x = +(14 * (Math.cos(phase)));
        if (invert < 0) {
            var pivot = 14;
            pointLight.position.x = (invert * (pointLight.position.x - pivot)) + pivot;
        }
        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

    function initStats() {
        var stats = new Stats();
        stats.setMode(0); // 0: fps, 1: ms
        // Align top-left
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }

});

Answer 1

您正在使用不再受支持的模式。

pointLight.position = new THREE.Vector3( 3, 5, 3 );

不要創建新對象。 而是這樣做：

pointLight.position.set( 3, 5, 3 );

three.js r.68