Three.js - тени направленного света

http://jsfiddle.net/wp6E3/3/

var camera, scene, renderer;
var cubes = [];

init();
animate();

function init() {

    scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0x212223));

    for (var i = 0; i < 10; i++) {
        var cubeGeometry = new THREE.CubeGeometry(1, 1.5, 1);
        var cubeMaterial = new THREE.MeshLambertMaterial({ color: 0x1ec876 });
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.set(i*1.2, 0, 0.5);
        cube.castShadow = true;
        scene.add(cube);

        cubes.push(cube);
    }

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.x = -4;
    camera.position.y = -4;
    camera.position.z = 20;
    camera.lookAt(cubes[5].position);
    scene.add(camera);

    var terrainGeo = new THREE.PlaneGeometry(50, 50);
    var terrainMaterial = new THREE.MeshLambertMaterial({ color: 0xc0c0a0 });
    var terrain = new THREE.Mesh(terrainGeo, terrainMaterial);
    terrain.receiveShadow = true;
    scene.add(terrain);

    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.castShadow = true;
    light.shadowCameraVisible = true;
    light.position.set(-3, 1, 5);
    scene.add(light);
    scene.add( new THREE.DirectionalLightHelper(light, 0.2) );

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = false;
    document.body.appendChild(renderer.domElement);
}

function animate() {
    requestAnimationFrame(animate);
    for (var i = 0; i < cubes.length; i++) {
        cubes[i].rotation.x += 0.01 * i;
        cubes[i].rotation.y += 0.02 * i;
    }

    renderer.render(scene, camera);
}

Почему не работают тени?

Я просмотрел связанные вопросы и ссылки на three.js, но не понимаю, что я делаю не так.

Тени Three.js не работают должным образом

Как создать направленную световую тень в Three.JS?

Тень ThreeJS не отображается

http://threejs.org/docs/#Reference/Lights/DirectionalLight

http://learningthreejs.com/blog/2012/01/20/casting-shadows/


javascript light three.js shadow
person KregHEk    schedule 12.04.2014    source источник
comment
Я установил параметры light.shadowCameraRight=15, light.shadowCameraLeft=-5, light.shadowCameraTop=5, light.shadowCameraBottom=-5 и появилась тень. Что означают эти параметры?   -  person KregHEk    schedule 12.04.2014

Ответы (2)


arrow_upward
4
arrow_downward

Прежде всего, добавьте в сцену контроллер камеры, чтобы вы могли видеть, что делаете. Теперь вы можете вращать камеру для разных ракурсов.

controls = new THREE.OrbitControls( camera, renderer.domElement );

Во-вторых, при использовании jsfiddle обязательно установите ссылку на последнюю версию библиотеки three.js.

<script src="http://threejs.org/build/three.min.js"></script>

Для правильного разрешения важно, чтобы ваша теневая камера располагалась плотно вокруг вашей сцены. Вы делаете это, устанавливая следующее:

light.shadowCameraLeft = -20; // or whatever value works for the scale of your scene
light.shadowCameraRight = 20;
light.shadowCameraTop = 20;
light.shadowCameraBottom = -20;

Для направленных источников света имеет значение только «направление» расположения источника света. Однако, когда задействованы карты теней, важно фактическое положение источника света, поскольку он также управляет теневой камерой.

light.position.set( -60, 20, 100 );

Вот обновленная скрипка. Поверните камеру с помощью мыши.

http://jsfiddle.net/wp6E3/4/

three.js r.66

person WestLangley    schedule 12.04.2014

arrow_upward
1
arrow_downward

Добавьте их к своему световому определению:

light.shadowMapWidth = 
light.shadowMapHeight = 1024;
light.shadowCameraNear = 1;
light.shadowCameraFar = 100;
person gaitat    schedule 12.04.2014
comment
Добавил в light.shadowCameraRight=15, light.shadowCameraLeft=-5 и т.д. Тень работает. Как проявить эти свойства? От чего они зависят? - person KregHEk; 12.04.2014