三.js 沒有陰影

Question

我目前正在嘗試深入了解 THREE.js，顯然我正在關注教程和示例，但即使如此，我似乎也無法讓陰影工作。

shadowMap.enabled設置為 true， castShadow設置在燈光下方的立方體上，並且receiveShadow在地板上設置為 true。

我的嘗試在https://mroman.ch/shadows/cg.html上可見

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

function main() {
  const canvas = document.querySelector('#canvas');
  const renderer = new THREE.WebGLRenderer({canvas,'antialias':true});
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.BasicShadowMap;




  const fov = 75;
  const aspect = 1;  
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 8*0.2;
  camera.position.y = 2*0.2;

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

  const sz = 0.2;

  const scene = new THREE.Scene();

  {
    const color = 0xFFFFFF;
    const intensity = 2;
    const light = new THREE.PointLight(color, intensity);
    light.position.set(0, 2*sz, 2*sz);
    light.castShadow = true;
    light.shadow.mapSize.width = 512;
    light.shadow.mapSize.height = 512;
    var d = 200;

    light.shadow.cameraLeft = -d;
    light.shadow.cameraRight = d;
    light.shadow.cameraTop = d;
    light.shadow.cameraBottom = -d;

    light.shadow.camera.far = 1000;

    const helper = new THREE.CameraHelper( light.shadow.camera );
    scene.add( helper );

    scene.add(light);
  }

  const material = new THREE.MeshPhongMaterial({color: "brown"});
  const mat_green = new THREE.MeshPhongMaterial({color:"green"});
  const mat_floor = new THREE.MeshPhongMaterial({color:"gray"});

  const group = new THREE.Group();



  var geometry = new THREE.CylinderGeometry(sz/2,sz/1.5,3*sz,8,8);
  var cube = new THREE.Mesh(geometry, material);
  cube.position.set(0,sz,0);
  group.add(cube);



  geometry = new THREE.BoxGeometry(sz,sz,sz);
  cube = new THREE.Mesh(geometry, mat_green);
  cube.position.set(0.0,3*sz,0);
  group.add(cube);

  geometry = new THREE.IcosahedronGeometry(sz);
  cube = new THREE.Mesh(geometry, mat_green);
  cube.position.set(sz,3*sz,0);
  group.add(cube);

  geometry = new THREE.IcosahedronGeometry(sz);
  cube = new THREE.Mesh(geometry, mat_green);
  cube.position.set(-sz,3*sz,0);
  group.add(cube);

  geometry = new THREE.IcosahedronGeometry(sz);
  cube = new THREE.Mesh(geometry, mat_green);
  cube.position.set(0.0,3*sz,sz);
  group.add(cube);

  geometry = new THREE.IcosahedronGeometry(sz);
  cube = new THREE.Mesh(geometry, mat_green);
  cube.position.set(0.0,3*sz,-sz);
  group.add(cube);

  geometry = new THREE.IcosahedronGeometry(sz);
  cube = new THREE.Mesh(geometry, mat_green);
  cube.position.set(0.0,4*sz,0.0);
  group.add(cube);

  const floor = new THREE.Group();

  for(var x = -4; x <= 4; x++) {
   for(var z = -4; z <= 4; z++) {
     geometry = new THREE.BoxGeometry(sz,sz,sz);
     cube = new THREE.Mesh(geometry, mat_floor);
     cube.position.set(x*sz,-sz,z*sz);
     cube.receiveShadow = true;
     floor.add(cube);
   }
  }



  geometry = new THREE.BoxGeometry(sz, sz, sz);
  cube = new THREE.Mesh(geometry, mat_floor);
  cube.position.set(0,sz,2*sz);
  cube.castShadow = true;
  scene.add(cube);

  scene.add(group);
  scene.add(floor);


  function render(time) {
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}

main();

誰能指出我哪里弄錯了？

Answer 1

出於好奇，第一次嘗試 ThreeJs 來回答這個問題，所以可能解釋的不夠好。

結果

為了修復立方體陰影，我改變了這個：

const light = new THREE.PointLight(color, intensity);
light.position.set(0, 2*sz, 2*sz);

對此：

const light = new THREE.PointLight(color, intensity);
light.position.set(0, 3 * sz, 3 * sz);

我想這只是光發射器在立方體內部的問題？

而圓柱體只是錯過了投射陰影的屬性。 我建議將cube變量名稱更改為更有意義的名稱。

var geometry = new THREE.CylinderGeometry(sz / 2, sz / 1.5, 3 * sz, 8, 8);
var cube = new THREE.Mesh(geometry, material);
cube.castShadow = true;