2

Не могу настроить тень. Что не так?

window.onload = function(){
var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);


var renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000);
camera.position.set(0, 0, 1000);

var light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(50, 500, 22);
light.target.position.set(300, 400, 200);
light.castShadow = true;
scene.add(light);
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add(helper);

var geometry = new THREE.SphereGeometry(200, 12, 12);
var material = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});
for (var i = 0; i < geometry.faces.length; i++) {
    geometry.faces[i].color.setRGB(Math.random(),Math.random(),Math.random());
}
var mesh = new THREE.Mesh(geometry,material);
mesh.receiveShadow = true;               
mesh.castShadow = true;
       scene.add(mesh);
//var geometry2 = new THREE.BoxGeometry( 10000, 50, 10000, 1, 1, 1);
var geometry2 = new THREE.PlaneGeometry(10000,10000,1,1);
var material2 = new THREE.MeshLambertMaterial( {color: 0x00ee00} );
var plane2 = new THREE.Mesh( geometry2, material2 );
plane2.receiveShadow = true;
plane2.castShadow = true;
plane2.rotation.x = -Math.PI / 2;
plane2.position.y = -400;
   scene.add( plane2 );

   function loop(){
      renderer.render(scene,camera);
      requestAnimationFrame(function(){loop();});
   }

     loop();
   }
0

1 ответ 1

4

DirectionalLightShadow, тут дается описание того, как задавать тени при наличии THREE.DirectionalLight() в сцене.

В вашем случае можно добавить настройки камеры тени при инициализации источника света:

var light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(50, 500, 22);
light.target.position.set(300, 400, 200);

light.shadow.camera.near = 0.5;       
light.shadow.camera.far = 5000;      
light.shadow.camera.left = -500;
light.shadow.camera.bottom = -500;
light.shadow.camera.right = 500;
light.shadow.camera.top = 500;

light.castShadow = true;
scene.add(light);
var helper = new THREE.CameraHelper( light.shadow.camera );
scene.add(helper);

jsfiddle пример r85

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.