Question

我正试图在this jsfiddle中的立方体下创建一个阴影，（下面的代码），但阴影太大了，我认为也没有正确的形状。是什么导致了这个阴影，我该如何解决？

谢谢

var initScene, render,
projector, renderer, scene, ground, light, 
camera, box, pointLight;

projector = new THREE.Projector;

scene = new THREE.Scene;

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

light = new THREE.DirectionalLight( 0xFFFFFF );
light.position.set( 20, 80, 0 );
light.target.position.copy( scene.position );
light.castShadow = true;

light.shadowCameraLeft = -60;
light.shadowCameraTop = -60;
light.shadowCameraRight = 60;
light.shadowCameraBottom = 60;
light.shadowCameraNear = 1;
light.shadowCameraFar = 2000;
light.shadowBias = 10;
light.shadowMapWidth = light.shadowMapHeight = 2040;
light.shadowDarkness = .7;

scene.add( light );

box = new THREE.Mesh(
    new THREE.CubeGeometry( 5, 5, 40 ), 
    new THREE.MeshLambertMaterial({ 
        color: 0xffffff, 
        opacity: 0.7, 
        transparent: true, 
        depthWrite: false 
}));
box.position.set( 10, 10, 10 );
box.castShadow = true;
scene.add(box);

ground = new THREE.Mesh(
    new THREE.CubeGeometry(1000, 1, 1000),
    new THREE.MeshLambertMaterial({ 
        color: 0xffffff, 
        opacity: 0.3, 
        transparent: true 
}));
ground.receiveShadow = true;
scene.add( ground );

camera = new THREE.PerspectiveCamera(
    35, window.innerWidth / window.innerHeight, 1, 1000
);
camera.position.set( 100, 100, 100 );
camera.lookAt( scene.position );
scene.add( camera );

renderer.render( scene, camera );
scene.simulate();

Answer 1

出于某种原因，我不能去小提琴，但是从我看到你的立方体是（10,10,10），大小为5，你的光是（20,80,0）。我的第一个猜测是你的光很接近立方体。尝试将灯光移动到（200,200,0），看看会发生什么。

Three.js阴影不如预期

1 个答案: