three.js基础--利用three.js封装的方法实现光照阴影效果

本文主要介绍如何利用three.js封装的方法属性来实现光照阴影

THREE实现光照阴影主要需要四步

渲染器设置renderer

首先告诉渲染器需要渲染阴影

 	// 创建渲染器
      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);

灯光设置light

设置产生阴影的光源，在three.js中只有点光源THREE.PointLight，平行光THREE.DirectionalLight，和聚光源THREE.SpotLight可以产生阴影。

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

产生阴影的物体mesh

设置在光照下产生阴影的物体

mesh.castShadow = true; // mesh对象渲染到阴影贴图中

接受阴