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渲染帧率// 创建divlet 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; // 对象是否渲染到阴影贴图中，默认值为falsemesh.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); // 平行光，颜色为白色，强度为1light.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>

Three.js实现光照阴影相关推荐

UE3 光照阴影
光照 & 阴影对于创建高水准环境而言,关卡中几何体的照明方式起着至关重要的作用.人类眼睛和脑袋希望光源能够通过特定方式与表面进行交互,填充一个房间或投射阴影.任何背离这条原则的东西都可能会破 ...
UE4渲染的整体流程（可视性、GBuffer、反射、动态光照阴影、后期处理）
个人博客完整原文:https://alvincr.com/2021/02/ue4-1-rendering/ 评价渲染工具的好坏参考:渲染质量.渲染功能及性能. 1 整体流程 AlvinCR认为渲染并不 ...
three.js 平行光与阴影及其相关属性
基础篇:three.js 基础认识与简单应用纹理贴图:three.js 纹理贴图的使用纹理贴图进阶: three.js纹理贴图进阶一.灯光与阴影的关系与设置 -- 五个步骤缺一不可 (点.聚会再 ...
VTK修炼之道70：体绘制讨论_光照阴影、VTKLODProp3D
1.光照与阴影通过VTKVolumeProperty可以设置体绘制阴影效果(Shading).阴影效果主要受环境光系数.散射光系数.反射光系数和高光强度四个参数影响. vtkVolumeProper ...
cocos creator 3D学习（六）光照+阴影
目录前言分类 1.方向光 2.球面光 3.聚光灯 4.阴影 5.环境光最后前言有一些会需要在cocos creator 3D里面加光照,让模型更好看一些 cocos creator 3D里面 ...
图片阴影html,js图片彩色阴影特效插件
image-shadow.js是一款用于制作图片彩色阴影特效的js插件.它通过CSS3 filter过滤器来生成图片对应颜色的阴影效果. 注意,IE浏览器和Edge浏览器不支持该图片彩色阴影特效. 使 ...
Unity 光照阴影烘焙
设置光照(必须将烘焙的模型设为static) 设置烘焙参数烘焙效果加载烘焙场景
matlab仿真条纹光照阴影,正常光照条件下全工况光伏阵列通用Matlab/Simulink仿真模型...
一引言进入新世纪以来,太阳能光伏发电作为一种可再生清洁能源成为低碳趋势下各国研究的热点,世界范围内的光伏电池产量及光伏系统装机容量也都在迅速增长.光伏系统设计与分析需将不同环境状态下光伏系统的输出特性 ...
ShaderJoy —— 二维多光源光照阴影【GLSL】
效果图一个光源跟随鼠标,一个光源上下移动绿色的 box 为障碍物算法阐述光源亮度的指数衰减我们想要的效果是,光的亮度随着离光源的距离越大而迅速衰减 ,所以很自然地需要先计算出像素到光源的距离 ...

Three.js实现光照阴影

Three.js实现光照阴影

1. renderer设置

2. 光源设置

3. 指定物体投射阴影

4. 指定物体接受阴影

Three.js实现光照阴影相关推荐

最新文章

热门文章