在三个 js 中未使用 HDR 环境纹理投射/接收阴影

Question

我是三个 js 的新手，我一直在开发一个项目，我想在其中投射导入 3D 模型的阴影，该模型可从此 link 下载，还可以从 link 免费包下载 HDR 文件。

根据互联网上提供的视频，在谷歌搜索我的问题时，我发现我的代码中存在一些问题，我已经对其进行了更改，例如

scene.environment = texture;

。我将模型的网格添加到

castShadow = true

并且

receiveShadow = true

还添加了

receiveShadow = true

。但我仍然无法投射阴影。

我使用的库版本：

三 - v0.162.0 节点-v20.11.1 vite-v5.2.0

这是我的index.js 文件代码：

import * as THREE from "three";
import "./style.css";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
// Scene
const scene = new THREE.Scene();

// Sizes
const sizes = {
  width: 800,
  height: 500,
};

const gltfLoader = new GLTFLoader();

const rgbeloader = new RGBELoader();

let car3;
rgbeloader.load(
  "./WhiteNeons_NAD.hdr",
  (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;
    scene.castShadow = true;

    gltfLoader.load(
      "./models/car3/scene.gltf",
      (gltf) => {
        const model = gltf.scene;
        model.position.set(0, 0, 0);
        model.traverse((node) => {
          node.castShadow = node.isMesh;
          node.receiveShadow = node.isMesh;
        });
        scene.add(model);
        car3 = model;
      },
      undefined,
      (error) => {
        console.error(error);
      }
    );
  },
  undefined,
  (err) => {
    console.error("HDR:: ", err);
  }
);

// Plane
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMat = new THREE.MeshBasicMaterial({ color: 0x5a5a5a });
const plane = new THREE.Mesh(planeGeometry, planeMat);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);

const gridHelper = new THREE.GridHelper();
gridHelper.receiveShadow = true;
scene.add(gridHelper);
// Camera
const camera = new THREE.PerspectiveCamera(
  45,
  sizes.width / sizes.height,
  0.1,
  1000
);
camera.position.set(5, 2, 0);
// camera.position.z = 20;
scene.add(camera);

// Renderer
const canvas = document.querySelector(".webgl");
const renderer = new THREE.WebGLRenderer({ canvas });

renderer.setClearColor(0xa3a3a3);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 6;

renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.render(scene, camera);

// Controls
const controls = new OrbitControls(camera, canvas);

window.addEventListener("resize", () => {
  camera.updateProjectionMatrix();
});

function animate(time) {
  if (car3) {
    car3.rotation.y = -time / 1000;
  }
  controls.update();
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

Answer 1

在

three.js

中，无法使用环境贴图投射阴影。

您必须使用阴影投射光，例如定向光、点光或聚光灯，或者以某种方式使用假阴影。一种选择是使用

THREE.ShadowMesh

但这只会产生平面阴影，因此它不能完全替代经典阴影贴图。