ThreeJS阴影不渲染 [英] ThreeJS shadow not rendering

问题描述

我浏览了许多其他 S.O.问题，遵循了所有建议，但我仍然不知道为什么我无法在这个非常基本的场景上渲染阴影.

I've looked through a number of other S.O. questions, followed all of the advice, but I'm still clueless as to why I can't get shadows to render on this very basic scene.

http:///jsfiddle.net/4Txgp/

[更新] 代码:

var SCREEN_WIDTH = window.innerWidth - 25;
var SCREEN_HEIGHT = window.innerHeight - 25;

var camera, scene;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

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

    camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.x = 1200;
    camera.position.y = 1000;
    camera.lookAt({
        x: 0,
        y: 0,
        z: 0
    });

    scene = new THREE.Scene();

    var groundMaterial = new THREE.MeshLambertMaterial({
        color: 0x6C6C6C
    });
    plane = new THREE.Mesh(new THREE.PlaneGeometry(10000, 10000, 100, 100), groundMaterial);
    plane.rotation.x = -Math.PI / 2;
    plane.receiveShadow = true;

    scene.add(plane);

    // LIGHTS
    // scene.add(new THREE.AmbientLight(0x666666));

    /*
    var light;

    light = new THREE.DirectionalLight(0xdfebff, 1.75);
    light.position.set(600, 800, 100);
    //light.position.multiplyScalar(1.3);

    light.castShadow = true;
    light.shadowCameraVisible = true;

    light.shadowMapWidth = light.shadowMapHeight = 2048;

    var d = 50;

    light.shadowCameraLeft = -d;
    light.shadowCameraRight = d;
    light.shadowCameraTop = d;
    light.shadowCameraBottom = -d;

    light.shadowCameraFar = 500;
    light.shadowDarkness = 0.5;

    scene.add(light);
    */

    var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 700, 1000, 100 );

spotLight.castShadow = true;
    spotLight.shadowCameraVisible = true;

spotLight.shadowMapWidth = 2048;
spotLight.shadowMapHeight = 2048;

spotLight.shadowCameraNear = 100;
spotLight.shadowCameraFar = 2000;
spotLight.shadowCameraFov = 30;

scene.add( spotLight );

    var boxgeometry = new THREE.CubeGeometry(100, 200, 100);
    var boxmaterial = new THREE.MeshLambertMaterial({
        color: 0x0aeedf
    });
    var cube = new THREE.Mesh(boxgeometry, boxmaterial);

    cube.position.x = 0;
    cube.position.y = 100;
    cube.position.z = 0;

    scene.add(cube);

    // RENDERER
    webglRenderer = new THREE.WebGLRenderer();
    webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    //webglRenderer.domElement.style.position = "relative";
    webglRenderer.shadowMapEnabled = true;
    webglRenderer.shadowMapSoft = true;

    container.appendChild(webglRenderer.domElement);
}

function animate() {
    var timer = Date.now() * 0.0002;
    camera.position.x = Math.cos(timer) * 1000;
    camera.position.z = Math.sin(timer) * 1000;
    requestAnimationFrame(animate);
    render();
}

function render() {
    camera.lookAt(scene.position);
    webglRenderer.render(scene, camera);
}

我有一个场景，有一个平面、一个物体(立方体)、一个聚光灯(直接从 http://threejs.org/docs/58/#Reference/Lights/SpotLight 用于测试目的)和一个相机.它渲染得很好，除了立方体没有在地面"(平面)上投射阴影，并且阴影看起来像是在基本材质中完成的.我正在使用 Phongs 和 Lamberts 的组合.

I have a scene with a plane, an object (cube), a spotlight (copied directly from http://threejs.org/docs/58/#Reference/Lights/SpotLight for testing purposes) , and a camera. It renders fine, except that the cube is not casting a shadow on the "ground" (plane), and the shading looks like everything has been done in a basic material. I'm using a combo of Phongs and Lamberts.

我的定向光设置为 castShadow = true;，我的平面设置为 receiveShadow = true，以及阴影贴图设置.渲染器本身具有 shadowMapEnabled = true.

My directional light is set to castShadow = true;, and my plane is set with receiveShadow = true, along with shadow map settings. The renderer itself has shadowMapEnabled = true.

我尝试了各种解决方案，我记得在以前版本的 ThreeJS 中，会根据您想要执行的操作进行外部库调用，但我也在 JSFiddle 上看到了其他示例，只是单独调用 ThreeJS，以及来自官方网站的示例，效果很好.

I've tried various solutions, I remember with previous versions of ThreeJS there would be external library calls depending on what you wanted to do, but I've also seen other examples on JSFiddle just calling ThreeJS by itself, as well as examples from the official site, that work fine.

关于忽略一些简单和小东西的任何提示/信息/建设性评论?

Any hints/info/constructive remarks about overlooking something simple and small?

推荐答案

需要设置

cube.castShadow = true;

并确保阴影相机远平面到达立方体.

and make sure the shadow camera far plane reaches the cube.

小提琴:http://jsfiddle.net/4Txgp/13/

three.js r.58

three.js r.58

这篇关于ThreeJS阴影不渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！