我在 Three.js 中遇到奇怪或部分阴影。只是想在一个或一组立方体上获得基本的阴影

Question

尽管对 javascript 很陌生，但目前正在尝试让一些阴影在 Three.js 中工作。在尝试让立方体出现并具有像样的阴影后，我能够获得部分阴影，但似乎只有部分网格正在投射阴影。

理论上，阴影应该看起来更像这样：

我设置了两个灯来投射阴影，以及一个半球灯来提高亮度。我还参考了一些问题和教程，试图获得正确的材料，但到目前为止还没有太多运气。

总的来说，阴影看起来不错，只是它们似乎只为物体的一部分投射阴影。关于这个基本方面的直接指导或深入教程的链接可能会有所帮助，我尝试使用官方示例，但在删除代码中的对象后无法使其工作。 （具体来说这个：链接到官方示例

有关更多背景信息，我使用的是 M1 Macbook pro，并且在 safari 和 Firefox 上都遇到了问题。

这是我正在使用的脚本：

<!-- importmap added by TheJim01 -->
<script type="importmap">
{
  "imports": {
    "three": "https://threejs.org/build/three.module.js",
    "three_orbitControls": "https://threejs.org/examples/jsm/controls/OrbitControls.js"
  }
}
</script>
<script type="module">
import * as THREE from 'three';
import { Object3D } from 'three';
import { OrbitControls } from 'three_orbitControls'; // TheJim01 modified to use importmap

// Establish Scene
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0xD3D3D3 );
scene.fog = new THREE.Fog( 0xa0a0a0, 10, 2000 );

// Add Ground
const ground = new THREE.Mesh( 
    new THREE.PlaneGeometry( 1000, 1000 ), // geometry
    new THREE.MeshPhongMaterial( {  //material
        color: 0xFFFFFF, 
        depthWrite: false 
    } ) );

ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );

// Add directional lighting
const light = new THREE.DirectionalLight( "#FFFFFF", 1.25 );
light.position.set(-25, 50, 30);
light.castShadow = true; // default false

//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.1; // default
light.shadow.camera.far = 500; // default
scene.add( light );

const secondLight = new THREE.DirectionalLight ( "#FFFFFF", 0.5 );
secondLight.position.set(20, 30, -50);
secondLight.castShadow = true;

//Set up shadow properties for the light
secondLight.shadow.mapSize.width = 512; // default
secondLight.shadow.mapSize.height = 512; // default
secondLight.shadow.camera.near = 0.1; // default
secondLight.shadow.camera.far = 500; // default
scene.add( secondLight );

// Add hemisphere light
const hlight = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1.5);
const helper = new THREE.HemisphereLightHelper( hlight, 1 );
//scene.add( helper );

//Set up shadow properties for the light
light.shadow.mapSize.width = 512; // default
light.shadow.mapSize.height = 512; // default
light.shadow.camera.near = 0.1; // default
light.shadow.camera.far = 500; // default

// Camera
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true });
camera.position.z = 25;
camera.position.x = 25;
camera.position.y = 25;
camera.lookAt(0,0,0)

// Renderer
renderer.setSize( window.innerWidth , window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.shadowMapSoft = true;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapWidth = 1024;
renderer.shadowMapHeight= 1024;
document.body.appendChild( renderer.domElement );


const controls = new OrbitControls( camera, renderer.domElement );


// Cube
const material = new THREE.MeshPhongMaterial({
    color: 0xC8FAFF,
    roughness: 10,
  })

const geometry_1 = new THREE.BoxGeometry( 4, 5, 6 );
const cube1 = new THREE.Mesh( geometry_1, material );
cube1.position.set(
    -5, // Width
    0.5 * cube1.geometry.parameters.height, // Height
    0); // Depth
cube1.castShadow = true;
cube1.receiveShadow = true;
scene.add( cube1 );


//animate the scene
function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}


animate();
</script>

Answer 1

发现问题是由于阴影剪切造成的，如 @WestLangley 评论中所示。