Three.js实现光照阴影

最新推荐文章于 2024-06-10 10:40:33 发布

travelclover

最新推荐文章于 2024-06-10 10:40:33 发布

阅读量2.1k

点赞数 1

分类专栏： Three.js 文章标签： webgl 前端

本文链接：https://blog.csdn.net/qq_37155408/article/details/105049581

版权

Three.js 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

Three.js实现光照阴影

在Three.js中，物体可以形成阴影投影效果，但是由于渲染阴影需要消耗计算机大量资源，所以Three.js在默认情况下是不会渲染阴影的。为了实现渲染阴影效果，我们还需要完成以下四个部分的设置。

1. renderer设置

首先我们需要告诉渲染器我们需要阴影效果：

renderer.shadowMap.enabled = true;

更多详细内容可以查看WebGLRenderer的shadowMap属性。

2. 光源设置

然后我们需要定义能够产生阴影的光源：

light.castShadow = true;

注意： 不是所有的光源都能够产生阴影，只有一部分光源可以，例如通过THREE.PointLight(点光源)、THREE.SpotLight(聚光源)和THREE.DirectionalLight(平行光光源)定义的光源是能够产生阴影的。

3. 指定物体投射阴影

接下来我们需要指定场景中的哪些物体能够投射阴影，能够产生阴影的物体需要设置以下代码：

const geometry = new THREE.BoxBufferGeometry(4, 4, 4); // 生成几何体
const material = new THREE.MeshLambertMaterial({ // 生成材质
    color: 0x00ff00,
});
const mesh = new THREE.Mesh(geometry, material); // 生成网格
mesh.castShadow = true; // 对象是否渲染到阴影贴图中，默认值为false

注意： 只有castShadow属性为true的物体才会产生阴影。

4. 指定物体接受阴影

最后我们还需要指定哪些物体能够接受阴影，这样才能够看出阴影效果。

const planeGeometry = new THREE.PlaneGeometry(300, 300); // 生成平面几何
const planeMaterial = new THREE.MeshLambertMaterial({ // 生成材质
  color: 0xcccccc,
});
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); // 生成平面网格
planeMesh.receiveShadow = true; // 设置平面网格为接受阴影的投影面

注意： 只有receiveShadow属性为true的物体才能够接受阴影。

全部代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Three.js实现光照阴影</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from 'https://threejs.org/build/three.module.js';
      import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
      import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

      let stats = new Stats(); // 性能监控器，用来查看Three.js渲染帧率

      // 创建div
      let container = document.createElement('div');
      document.body.appendChild(container);

      // 创建场景
      let scene = new THREE.Scene();

      // 创建相机
      let camera = new THREE.PerspectiveCamera( // 透视投影相机
        40, // 视场，表示能够看到的角度范围
        window.innerWidth / window.innerHeight, // 渲染窗口的长宽比，设置为浏览器窗口的长宽比
        0.1, // 从距离相机多远的位置开始渲染
        2000 // 距离相机多远的位置截止渲染
      );
      camera.position.set(-10, 10, 40); // 设置相机位置

      // 创建渲染器
      let renderer = new THREE.WebGLRenderer({
        antialias: true, // 是否执行抗锯齿
      });
      renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比率。通常用于HiDPI设备，以防止输出画布模糊。
      renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
      renderer.shadowMap.enabled = true;
      container.appendChild(renderer.domElement);

      // 创建控制器
      let controls = new OrbitControls(camera, renderer.domElement);

      // 创建物体
      const geometry = new THREE.BoxBufferGeometry(4, 4, 4); // 生成几何体
      const material = new THREE.MeshLambertMaterial({
        // 生成材质
        color: 0x00ff00,
      });
      const mesh = new THREE.Mesh(geometry, material); // 生成网格
      mesh.castShadow = true; // 对象是否渲染到阴影贴图中，默认值为false
      mesh.position.set(0, 3, 0); // 设置物体位置
      scene.add(mesh); // 添加到场景中

      // 创建平面
      const planeGeometry = new THREE.PlaneGeometry(300, 300); // 生成平面几何
      const planeMaterial = new THREE.MeshLambertMaterial({
        // 生成材质
        color: 0xcccccc,
      });
      const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); // 生成平面网格
      planeMesh.receiveShadow = true; // 设置平面网格为接受阴影的投影面
      planeMesh.rotation.x = -Math.PI / 2; //绕X轴旋转90度
      scene.add(planeMesh); // 添加到场景中

      // 创建平行光源
      const light = new THREE.DirectionalLight(0xffffff, 1); // 平行光，颜色为白色，强度为1
      light.position.set(-40, 40, 20); // 设置灯源位置
      light.castShadow = true; // 允许生成阴影
      light.target = mesh;
      scene.add(light); // 添加到场景中

      animate();

      function animate() {
        requestAnimationFrame(animate);
        stats.begin();
        renderer.render(scene, camera);
        stats.end();
      }
    </script>
  </body>
</html>

travelclover

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Three.js实现光照阴影

Three.js实现光照阴影在Three.js中，物体可以形成阴影投影效果，但是由于渲染阴影需要消耗计算机大量资源，所以Three.js在默认情况下是不会渲染阴影的。为了实现渲染阴影效果，我们还需要完成以下四个部分的设置。1. renderer设置首先我们需要告诉渲染器我们需要阴影效果：renderer.shadowMap.enabled = true;更多详细内容可以查看WebGL...
复制链接

扫一扫