three.js — урок № 2 — Добавление материалов, свет, и тени

three.js — урок № 2 — Добавление материалов, свет, и тени

Добавление новых материалов и освещения в Three.js очень проста и осуществляется в  значительной степени так же, как мы объяснили в предыдущем разделе. Мы начинаем путем добавления источника света в сцене:

var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );

Метод SpotLight() светит на нашу сцену из своего положения (Spotlight.position.set (-40, 60, -10)).

Если мы откроем сцену в это время, то не увидим никакой разницы с предыдущим примером.Причина в том, что различные материалы по-разному реагируют на свет.
Основной материал, который мы использовали в предыдущем примере (с помощью метода MeshBasicMaterial ()) никак не реагирует на источники света в сцене. Они просто добавляют материал красного цвета.

Таким образом, мы должны изменить материалы для нашего plane, сферы и куба, как показано в коде:

function init() {

        // 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.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMapEnabled = true;

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

        // 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: 0xff0000});
        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);

        var sphereGeometry = new THREE.SphereGeometry(4,20,20);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

        // position the sphere
        sphere.position.x=20;
        sphere.position.y=4;
        sphere.position.z=2;
        sphere.castShadow=true;

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

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

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

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // call the render function
        renderer.render(scene, camera);
    };

    window.onload = init;

Тени по умолчанию отключены в three.js, так как съедают много ресурсов, но их легко включить

renderer.setClearColorHex(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true; // будут ли объекты на сцене отбрасывать тень

Самое первое изменение, которое мы должны сделать, это сказать визуализации, что мы хотим использовать тени в нашей сцене. Вы можете сделать это, установив shadowMapEnabled свойство true.

Если вы посмотрите на результат от этого изменения, то отличий не заметите. Это происходит потому, что мы должны явно указать, какие объекты отбрасывают тень и какие объекты отражают тени.

В нашем примере, мы хотим чтобы сфера и куб отбросила тень на плоскость. Вы можете сделать это, установив соответствующие свойства на тех, объектах которые отбрасывают тени — куб и сфера

cube.castShadow = true; // для отброса теней кубом
sphere.castShadow = true; // для отброса теней сферой

Для отражения тени у плоскости

plane.receiveShadow = true;

Теперь, есть только одна вещь, которую вам нужно сделать, чтобы получить тени. spotLight(), который мы использовали в этом примере, и он может работать с тенями.

spotLight.castShadow = TRUE;

И с этим мы получаем сцену в комплекте с тенями от нашего источника света, как показано в примере.

Попробуйте изменять параметры spotLight, чтобы получить различные тени от ваших объектов.