three.js 平行光与阴影及其相关属性
基础篇：three.js 基础认识与简单应用
纹理贴图：three.js 纹理贴图的使用
纹理贴图进阶： three.js纹理贴图进阶
一、灯光与阴影的关系与设置 -- 五个步骤缺一不可 （点、聚会再次赘述）
目标：灯光与阴影
- 环境光无阴影
- 平行光(太阳光)，点光源(电灯泡-四处发光)，聚光灯（八）
1、材质要满足能够对光照有反应
- 最常用-标准网格材质(MeshStandardMaterial)
- 更消耗性能-物理网格材质(MeshPhysicalMaterial)-MeshStandardMaterial的扩展，提供了更高级的基于物理的渲染属性：
2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;
3、设置光照投射阴影 directionalLight.castShadow = true;
4、设置物体投射阴影 sphere.castShadow = true;
5、设置物体接收阴影 plane.receiveShadow = true;
示例：运行结果如下
全部代码如下，解析见代码注释：
/** @Description: 灯光与阴影的关系与设置 -- 五个步骤缺一不可*/import * as THREE from "three";
// 导入轨道控制器(鼠标控制)
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";/*** 目标：灯光与阴影--环境光无阴影，平行光(太阳光)，点光源(电灯泡-四处发光)，聚光灯(八)* 灯光阴影* 1、材质要满足能够对光照有反应--最常用-标准网格材质(MeshStandardMaterial)* --更消耗性能-物理网格材质(MeshPhysicalMaterial)-MeshStandardMaterial的扩展，提供了更高级的基于物理的渲染属性：* 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;* 3、设置光照投射阴影 directionalLight.castShadow = true;* 4、设置物体投射阴影 sphere.castShadow = true;* 5、设置物体接收阴影 plane.receiveShadow = true;*//**1. 创建场景*/
const scene = new THREE.Scene();/** 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)*/
const camera = new THREE.PerspectiveCamera(75, // 视野角度window.innerWidth / window.innerHeight, // 长宽比0.1, // 进截面1000 // 远截面
);
// 设置相机位置
camera.position.set(7, 7, 7);
scene.add(camera); // 将相机添加到场景中/** 添加物体*/
// 创建几何体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);// 1). 设置材质-标准网格材质
const material = new THREE.MeshStandardMaterial();// 生成几何体
const sphere = new THREE.Mesh(sphereGeometry, material);// 4). 投射阴影 --对象是否被渲染到阴影贴图中--三维物体（Object3D）
sphere.castShadow = true;scene.add(sphere);/*** 创建底部平面*/
const planeGeometry = new THREE.PlaneBufferGeometry(10, 10);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;// 5). 接收阴影
plane.receiveShadow = true;scene.add(plane);/*** 灯光*/
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源（平行光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置平行光的位置
directionalLight.position.set(10, 10, 10);// 3). 设置平行光产生动态阴影
directionalLight.castShadow = true;scene.add(directionalLight);/*** 3.初始化渲染器*/
const renderer = new THREE.WebGL1Renderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);// 2). 开启场景中的阴影贴图--允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true;// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);/*** 创建轨道控制器（OrbitControls）* 可以使得相机围绕目标进行轨道运动*/
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环render()中调用update()
controls.enableDamping = true;
// controls.autoRotate = true;
// controls.autoRotateSpeed = 2; // 自转速度/*** 辅助三维坐标系* 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.*/
var axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);// 定义循环渲染方法
function render() {renderer.render(scene, camera); // 执行渲染操作controls.update(); // 加不加都行requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {// console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
});
二、平行光THREE.DirectionalLight
介绍：
平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的。
构造器：
DirectionalLight( color : Integer, intensity : Float )
color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。
intensity - (可选参数) 光照的强度。缺省值为1。与点光源和聚光灯的区别：
最大的区别就是，点光源和聚光灯光源距离物体越远光线越暗。光是从一点发出的。
而被平行光照亮的整个区域接收到的光强是一样的。光是平行的。平行光的特点：
由于模型的阴影渲染会消耗很多的性能，所以我们需要设置平行光相关的区域能够显示阴影，和阴影显示的良好程度。如下几个属性：
//这两个值决定使用多少像素生成阴影 默认512
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.mapSize.width = 2048;或者
directionalLight.shadow.mapSize.set(2048, 2048);
// 设置阴影贴图模糊度
directionalLight.shadow.radius = 20;
// 设置平行光投射相机的属性
directionalLight.shadow.camera.near = 0.5; //产生阴影的最近距离
directionalLight.shadow.camera.far = 500; //产生阴影的最远距离
directionalLight.shadow.camera.left = -5; //产生阴影距离位置的最左边位置
directionalLight.shadow.camera.right = 5; //最右边
directionalLight.shadow.camera.top = 5; //最上边
directionalLight.shadow.camera.bottom = -5; //最下面
示例：运行结果如下
通过 near 的变化：
// 设置阴影贴图模糊度
directionalLight.shadow.radius = 20;
// 设置阴影贴图的分辨率
directionalLight.shadow.mapSize.set(2048, 2048);
// 设置平行光投射相机的属性
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.top = 5;
directionalLight.shadow.camera.bottom = -5;
directionalLight.shadow.camera.left = -5;
directionalLight.shadow.camera.right = 5;
通过更改分辨率（2048 --> 512）:
// 设置阴影贴图模糊度
directionalLight.shadow.radius = 20;
// 设置阴影贴图的分辨率
directionalLight.shadow.mapSize.set(512, 512);
// 设置平行光投射相机的属性
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.top = 5;
directionalLight.shadow.camera.bottom = -5;
directionalLight.shadow.camera.left = -5;
directionalLight.shadow.camera.right = 5;
通过更改模糊度(20 -- > 120)：
// 设置阴影贴图模糊度
directionalLight.shadow.radius = 120;
// 设置阴影贴图的分辨率
directionalLight.shadow.mapSize.set(2048, 2048);
// 设置平行光投射相机的属性
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.top = 5;
directionalLight.shadow.camera.bottom = -5;
directionalLight.shadow.camera.left = -5;
directionalLight.shadow.camera.right = 5;
全部代码如下，解析见代码注释：
/** @Description: 平行光(DirectionalLight)阴影属性与阴影相机原理*/// 导入dat.gui可视化工具
import * as dat from "dat.gui";
import * as THREE from "three";
// 导入轨道控制器(鼠标控制)
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";/*** 目标：灯光与阴影--环境光无阴影，平行光(太阳光)，点光源(电灯泡-四处发光)，聚光灯(八)* 灯光阴影* 1、材质要满足能够对光照有反应--最常用-标准网格材质(MeshStandardMaterial)* --更消耗性能-物理网格材质(MeshPhysicalMaterial)-MeshStandardMaterial的扩展，提供了更高级的基于物理的渲染属性：* 2、设置渲染器开启阴影的计算 renderer.shadowMap.enabled = true;* 3、设置光照投射阴影 directionalLight.castShadow = true;* 4、设置物体投射阴影 sphere.castShadow = true;* 5、设置物体接收阴影 plane.receiveShadow = true;*/
/**1. 创建场景*/
const scene = new THREE.Scene();/** 2.创建相机(这里是 透视摄像机--用来模拟人眼所看到的景象)*/
const camera = new THREE.PerspectiveCamera(75, // 视野角度window.innerWidth / window.innerHeight, // 长宽比0.1, // 进截面1000 // 远截面
);
// 设置相机位置
camera.position.set(7, 7, 7);
scene.add(camera); // 将相机添加到场景中/** 添加物体*/
// 创建几何体
const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
// 1). 设置材质
const material = new THREE.MeshStandardMaterial();
// 生成几何体
const sphere = new THREE.Mesh(sphereGeometry, material);
// 4). 投射阴影 --对象是否被渲染到阴影贴图中--三维物体（Object3D）
sphere.castShadow = true;
scene.add(sphere);/*** 创建平面*/
const planeGeometry = new THREE.PlaneBufferGeometry(10, 10);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
// 5). 接收阴影
plane.receiveShadow = true;
scene.add(plane);/*** 灯光*/
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);// 直线光源（平行光）
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
// 设置平行光的位置
directionalLight.position.set(10, 10, 10);
// 3). 设置平行光产生动态阴影
directionalLight.castShadow = true;// 设置阴影贴图模糊度
directionalLight.shadow.radius = 20;
// 设置阴影贴图的分辨率
directionalLight.shadow.mapSize.set(2048, 2048);// 设置平行光投射相机的属性
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 500;
directionalLight.shadow.camera.top = 5;
directionalLight.shadow.camera.bottom = -5;
directionalLight.shadow.camera.left = -5;
directionalLight.shadow.camera.right = 5;scene.add(directionalLight);const gui = new dat.GUI();
gui.add(directionalLight.shadow.camera, "near").min(0).max(20).step(0.1).onChange(() => {directionalLight.shadow.camera.updateProjectionMatrix();});/*** 3.初始化渲染器*/
const renderer = new THREE.WebGL1Renderer();
// 设置渲染器尺寸
renderer.setSize(window.innerWidth, window.innerHeight);// 2). 开启场景中的阴影贴图--允许在场景中使用阴影贴图
renderer.shadowMap.enabled = true;// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);/*** 创建轨道控制器（OrbitControls）* 可以使得相机围绕目标进行轨道运动*/
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真是效果，必须在动画循环render()中调用update()
controls.enableDamping = true;
// controls.autoRotate = true;
// controls.autoRotateSpeed = 2; // 自转速度/*** 辅助三维坐标系* 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.*/
var axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);// 定义循环渲染方法
function render() {renderer.render(scene, camera); // 执行渲染操作controls.update(); // 加不加都行requestAnimationFrame(render); // 渲染下一帧的时候就会调用render函数
}
render();// 监听尺寸变化实现自适应画面
window.addEventListener("resize", () => {// console.log("画面变化了");// 更新摄像头camera.aspect = window.innerWidth / window.innerHeight;// 更新摄像机的投影矩阵camera.updateProjectionMatrix();// 更新渲染器renderer.setSize(window.innerWidth, window.innerHeight);// 设置渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio);
});
three.js 平行光与阴影及其相关属性相关推荐
- 函数：js设置或获取transform相关属性
问题: transfrom的获取: 使用dom.style.transform只能获取行间设置的transform 使用window.getComputedStyle(dom).transform获取 ...
- 前端学习（3265）：js中undefine中3相关属性
- CSS3的字体和文本相关属性
CSS3其中一个重要变化就是增加了服务器字体功能,这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题.通过CSS3的服务器字体功能,可以控制浏览器使用服务器包含的字体,这样可以保证即使我们的电 ...
- css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
- CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载 本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
- Three.js实现光照阴影
Three.js实现光照阴影 在Three.js中,物体可以形成阴影投影效果,但是由于渲染阴影需要消耗计算机大量资源,所以Three.js在默认情况下是不会渲染阴影的. 为了实现渲染阴影效果,我们还需 ...
- js如何操作表格（常用属性方法汇总）
js如何操作表格(常用属性方法汇总) 一.总结 一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
- css3背景、边框、和补丁相关属性
border :基本语法 border: border-width || border-style || border-color 默认值为: medium none . border-color 的 ...
- vue.js 重定向 和 404 等等相关的问题？
vue.js 重定向 和 404 等等相关的问题? 进入后就是默认 / 重定向 {path:'/',redirect:'home'} 重定向 {path:'/',redirect:{name:'hom ...
最新文章
- 记《浪潮之巅》-第一版-12.短暂的春秋--与机会失之交臂的公司之一太阳公司（sun microsystems）...
- 超郁闷的本地连接故障解决过程！！！
- C语言文本文件与二进制文件转换
- 7种主流案例，告诉你调度器架构设计通用法则(干货!)
- .NET Standard，有哪些替代方案？
- 谷歌：朝鲜国家黑客第二次攻击安全研究员
- tomcat java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListen
- java 异常抛出_Java 如何抛出异常、自定义异常、手动或主动抛出异常
- 求解积分的数值方法——Matlab实现
- 金石无线服务器效果怎么样,天线效果不好？快来看看是不是这几个地方出了问题！...
- word排版技巧：论文图表目录制作步骤。
- Redis（基于狂神说Java-Redis）
- Web开发未来会完全替代客户端开发吗？
- 基于Python的冬奥会领域问答机器人设计
- 【C++】内联函数是什么？内联和宏有什么区别？
- Swift 5.6 特性
- ftp文件服务器与nas性能,nas和ftp服务器的区别
- 个人总结对团队的贡献Android方面
- HTML锚点定位+平滑滚动
- PCL点云处理_安装及环境配置（1）