阴影没有出现 ThreeJS

Question

我想了解我的场景出了什么问题。物体没有投射阴影，一切看起来都太亮了。我按照文档做了一切，但我不明白哪里出了问题。

'use strict';

/* global THREE */
let loadedModel;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; 


const loader = new THREE.GLTFLoader();

function main() {
  
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  const geometry2 = new THREE.PlaneGeometry( 1000, 1000 );
  const material2 = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
  const plane = new THREE.Mesh( geometry2, material2 );
  plane.rotateX( - Math.PI / 2);
  plane.castShadow = false;
  plane.receiveShadow = true;
  scene.add( plane );

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial( { color: 0xcc2fff } );
  const cube = new THREE.Mesh( geometry, material );
  
  cube.position.set(0,10,0)
  cube.castShadow = true;
  cube.receiveShadow = true;
  scene.add( cube );

  const light2 = new THREE.PointLight( 0x20202A, 50, 10 );
  light2.position.set( 0 , 15, 10 );
  light2.castShadow = true;

  scene.add( light2 );

  const sphereSize = 1;
  const pointLightHelper = new THREE.PointLightHelper( light2, sphereSize );
  scene.add( pointLightHelper );
  
  camera.position.set(20,20,20);
  camera.lookAt(plane.position);

  renderer.render( scene, camera );
}

main();

我试着摆弄灯光但没有任何改变，也许相机有问题？我真的不明白。我习惯了 Blender，但以这种方式手动完成所有操作让我有点困惑。

Answer 1

您使用 MeshBasicMaterial。这个material不受灯光影响，也不能投射阴影。您应该将其更改为 MeshLambertMaterial 或 MeshPhongMaterial。

  const geometry2 = new THREE.PlaneGeometry( 1000, 1000 );
  const material2 = new THREE.MeshLambertMaterial ( {color: 0xffff00, side: THREE.DoubleSide} );
  const plane = new THREE.Mesh( geometry2, material2 );

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshLambertMaterial ( { color: 0xcc2fff } );
  const cube = new THREE.Mesh( geometry, material );

阴影没有出现 ThreeJS

Shadows doesn't show up ThreeJS

three.js