directionallight三js

Question

我对three.js相当新。我用r55把一些东西放在一起，想要添加灯光。我一直试图根据Mrdoob的文档添加一个DirectionalLight - 没有运气......我尝试添加的灯没有显示 - 添加了shadowCameraVisible用于调试但它只是不会显示up ...有人知道我的代码有什么问题吗???我很感激任何投入!!

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

    //CUBE
    var material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });
    var geometry = new THREE.CubeGeometry(x, y, z);
    cube = new THREE.Mesh(geometry, material);
    cube.position.z = z / 2;
    scene.add(cube);

    //FLOOR
    //floor color:
    var floorMaterial = new THREE.MeshBasicMaterial({
        color: 0xcccccc
    });
    //floor size:
    var floorGeometry = new THREE.PlaneGeometry(20, 20, 1, 1);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.doubleSided = true;
    scene.add(floor);

    //LIGHTS
    var dLight = new THREE.DirectionalLight(0xffffff);
    dLight.position.set = (0, 0, 1);
    dLight.shadowCameraVisible = true;
    dLight.shadowCameraNear = 1;
    dLight.shadowCameraFar = 150;
    dLight.castshadow = true;
    scene.add(dLight);

    //CAMERA POSITION
    camera.position.z = 50;
    controls = new THREE.TrackballControls(camera);

    renderer.shadowMapEnabled = true;
    renderer.shadowMapType = THREE.PCFShadowMap;

}

Answer 1

您可以通过

设置灯光

light.position.set (0,0,1);

但我认为你的光线在几何体内部。 看看http://jsfiddle.net/aSt8c/。它有一个带阴影的工作方向灯。

Answer 2

dLight.position.set = (0,0,1);

哎呀，看起来不对......运行后，灯光位置将不会是3D矢量，这将从光线位置的任何数学运算中生成NaN。

dLight.position.set(0,0,1);
// or
dLight.position = new THREE.Vector3(0,0,1);

Answer 3

关键是，对象的材质必须是MeshLambertMaterial或MeshPhongMaterial。其他材料无法反射光线。

//CUBE var material = new THREE.MeshPhongMaterial({ color: 0xff0000 }); OR var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });

MeshPhongMaterial可用于闪亮的MeshLambertMaterial，用于非闪亮（朗伯）曲面。

Answer 4

您需要设置以下内容： floor.receiveShadow = true;