Question

点光与平面之间的相互作用似乎已从r.67变为r.68

我试图学习three.js，翻阅一本一岁的书。我已经将教程示例简化为一个平面，一个立方体和一个指示灯以及＆＃34; Shinyness＆＃34;当我使用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

three.js pointLight从r.67变为r.68

1 个答案: