Два объекта не отбрасывают тень, в то время как другой - PullRequest
Новая
       33

Два объекта не отбрасывают тень, в то время как другой

1 голос
/ 10 апреля 2019

У меня точно такие же три объекта куба, за исключением их положения x.Я хочу, чтобы они отбрасывали тень, но почему-то двое из них не отбрасывают тень, в то время как другая делает.

Вот картинка того, что происходит.https://ibb.co/z6Vwxmf

Я уверен, что castShadow установлен на true для всех объектов.И я не думаю, что я пропустил какое-либо свойство установки тени (потому что средний объект правильно отбрасывает тень.)

Эти объекты создаются в // левом кубе // комментариях правого куба в приведенном ниже коде. 

< script >

    window.addEventListener('load', init, false);

function init(event) {
    createScene();
    createLights();
    createTile01();
    createTile02();
    createTile03();
    createBase();

    loop();
}

var scene, camera, Width, Height, renderer, container;

function createScene() {

    Width = window.innerWidth;
    Height = window.innerHeight;

    scene = new THREE.Scene();

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

    camera.position.x = 0;
    camera.position.y = 10;
    camera.position.z = 50;
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(Width, Height);
    renderer.shadowMap.enabled = true;

    container = document.getElementById('scene');
    container.appendChild(renderer.domElement);
    window.addEventListener('resize', handleWindowResize, false);

}

function handleWindowResize() {
    Height = window.InnerHeight;
    Width = window.InnerWidth;
    renderer.setSize(Width, Height);
    camera.aspect = Width / Height;
    camera.updateProjectionMatrix();
}

var ambiLight, spotLight;

function createLights() {
    ambiLight = new THREE.AmbientLight(0xffffff);
    scene.add(ambiLight);

    spotLight = new THREE.DirectionalLight(0xffffff);
    spotLight.position.set(0, 30, -0);
    spotLight.intensity = 1;
    spotLight.castShadow = true;
    scene.add(spotLight);
}

Tile01 = function() {
    var geom = new THREE.BoxGeometry(10, 10, 2);
    var mat = new THREE.MeshPhongMaterial({
        color: 0x53b0df
    });
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
}

var tile01;

function createTile01() {
    tile01 = new Tile01();
    tile01.mesh.position.set(0, 0, 0);
    scene.add(tile01.mesh);
}

//right cube
Tile02 = function() {
    var geom = new THREE.BoxGeometry(10, 10, 2);
    var mat = new THREE.MeshPhongMaterial({
        color: 0x25b0cf
    });
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
}

var tile02;

function createTile02() {
    tile02 = new Tile02();
    tile02.mesh.position.set(20, 0, 0);
    scene.add(tile02.mesh);
}

//left cube
Tile03 = function() {
    var geom = new THREE.BoxGeometry(10, 10, 2);
    var mat = new THREE.MeshPhongMaterial({
        color: 0x00b0df
    });
    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.receiveShadow = true;
    this.mesh.castShadow = true;
}

var tile03;

function createTile03() {
    tile03 = new Tile03();
    tile03.mesh.position.set(-20, 0, 0);
    scene.add(tile03.mesh);
}

Base = function() {
    var geom = new THREE.CylinderGeometry(100, 30, 5, 60);
    var mat = new THREE.MeshPhongMaterial({
        color: 0xcf34ec
    });

    this.mesh = new THREE.Mesh(geom, mat);
    this.mesh.castShadow = true;
    this.mesh.receiveShadow = true;
}

var base;

function createBase() {
    base = new Base();
    base.mesh.position.set(0, -10, -20);
    scene.add(base.mesh);
}

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

< /script>

Не могли бы вы помочь мне понять, что не так с настройкой?

1 Ответ

1 голос
/ 10 апреля 2019

Я смог решить проблему самостоятельно.

Обращаясь к некоторым решениям, которые я нашел в другом вопросе Q / Что касается проблемы теней, я добавил свойства shadow.camera.left / right / top / bottom ксвет и он работал.

Ниже приведен код, который я исправил.Теперь я могу видеть тени всех трех объектов. 

    var ambiLight, spotLight;
    function createLights() {
        ambiLight = new THREE.AmbientLight(0xffffff);
        scene.add(ambiLight);

        spotLight = new THREE.DirectionalLight(0xffffff);
        spotLight.position.set(0, 30, -0);
        spotLight.intensity = 1;
        spotLight.castShadow = true;

        spotLight.shadow.camera.left = -400;
        spotLight.shadow.camera.right = 400;
        spotLight.shadow.camera.top = 400;
        spotLight.shadow.camera.bottom = -400;
        spotLight.shadow.camera.near = 1;
        spotLight.shadow.camera.far = 1000;

        spotLight.shadow.mapSize.width = 2048;
        spotLight.shadow.mapSize.height = 2048;

        scene.add(spotLight);
    }
...