three.js 平行光与阴影及其相关属性

最新推荐文章于 2023-12-08 09:41:35 发布
最新推荐文章于 2023-12-08 09:41:35 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： three.js 文章标签： 前端 three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48594833/article/details/129667842
版权

基础篇：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);
});

 

 

 

 

前端菜菜DayDayUp
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Three.js - 光源使用详解2（聚光灯 SpotLight、平行光 DirectionLight）
hz_love_AI的博客
10-15 2048
Three.js 中有许多不同种类的光源，每种光源都有特别的行为和用法。下面通过一个系列文章介绍它们的用法。
threejs-光源和阴影
qq_37987033的博客
07-09 888
threejs-光源和阴影
Three.js 平行光源阴影
最新发布
u014291990的博客
12-08 1303
点光源PointLight、聚光源SpotLight、平行光等都可以产生阴影，就像实际生活中的影子。环境光这种没有方向的光源，不会产生阴影。本节课给大家讲解平行光的阴影效果如何实现。
Three.js-灯光与阴影
damadashen的博客
07-11 2313
Three中光照及阴影的详解及示例（环境光、平行光、点光源、聚光灯光源的实现及其阴影的实现）
Three.js光源梳理3——平行光（DirectionalLight）
eevee_1的博客
02-09 4623
平行光本质是一个方向向量，在shader中计算时直接与模型顶点的法线方向进行dot点乘操作。 如果L(平行光)的向量与N(顶点法线方向)一样(N Dot L=1)，那么表示模型的这个点正对着光源，应该最亮，相反，如果两个向量呈相反方向(N Dot L=-1)，那么则表示这个点背对光源，应该最暗。 image.png 基础的兰伯特计算模型的明暗就是NdotL。 与Unity中的平行光不一样...
图形化开发（五）033-Three.js之光照——实例1-平行光
weixin_44867717的博客
09-10 375
图形化开发（五）033-Three.js之光照——实例1-平行光 实例1-平行光案例 效果图 light.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>平行光案例</title> <style type="text/css"> html, body { ma
three. js的人体解剖图.zip
07-14
Three.js支持各种光源，如AmbientLight（环境光）、DirectionalLight（平行光）和PointLight（点光源）。阴影的设置也很关键，可以增强模型的立体感。通过启用阴影和调整阴影参数，可以实现更逼真的效果。 五、交互...
使用three.js 的 交互式 3D 心脏模型
07-14
three.js支持点光源、平行光和聚光灯等多种类型，这些光源可以影响模型的阴影和反射效果。根据需求，可能需要多个光源来模拟不同的照明条件。 交互性是这个项目的核心部分。这通常通过监听用户的鼠标或触摸事件来...
three.js-线上运动的光效
10-19
在 three.js 中，可以通过调整光源的位置、颜色、强度和类型（如点光源、平行光或聚光灯）来实现不同的光效。动态光效可以增强场景的视觉动态感，例如模拟阳光的移动、闪烁的灯光或激光束等。 文件名 "step5-3" ...
three.js3D地形.zip
07-13
Three.js提供了多种光照类型，如点光源、平行光和聚光灯。通过调整光源位置和强度，可以模拟太阳光照射在地形上的效果。同时，启用阴影功能可以让地形的起伏显得更为立体。 五、相机控制 在Three.js中，我们可以...
html5+three.js彩色液态流动背景动画特效
06-11
3. **光照与阴影**：为了增加真实感，液态可能还会受到光源的影响，Three.js支持多种类型的灯光，如点光源、平行光和聚光灯。阴影的处理也是提升视觉效果的关键，开发者可能根据需要添加阴影效果。 4. **交互性**：...
【Three.js入门】灯光与阴影、平行光阴影属性、聚光灯的属性和应用
HuoZhiyan 的博客
12-26 2201
本文主要介绍了Three.js中的灯光与阴影，以及平行光与聚光灯的常用属性....
Three.js阴影
lcl130的专栏
08-08 2419
使用灯光后，场景中就会产生阴影。物体的背面确实在黑暗中，这称为核心阴影。我们缺少的是落下的阴影，即对象在其他对象上创建阴影。本文主要探索是落下的阴影的相关内容。
three.js学习之灯光与阴影的关系与设置
qq_45518803的博客
03-06 260
three.js学习之灯光与阴影的关系与设置
ThreeJS中导入的模型没有正常生成阴影解决办法
qq_45430571的博客
09-22 658
在一个Three.js项目中，我试图在场景中渲染一个导入的滑板模型，并希望它能在聚光灯下产生阴影。这是一个令人困惑的问题，因为其他对象（如基本的Three.js几何体）在同样的光照条件下可以正常产生阴影。这也是为什么基本的Three.js几何体可以正常产生阴影，而导入的模型不能的原因。这段代码的核心思想是遍历导入模型的每一个子物体，并确保每一个子物体都设置了 castShadow。属性，但如果模型的某个子部分没有设置这个属性，那么该子部分就不会投射阴影。经过一系列的排查和试验，最终找到了问题的解决方案。
three.js实现日照分析，根据当地（维度和时间）模拟太阳高度角和方位角的变化
weixin_44604262的博客
10-25 738
three.js实现白天效果，根据当地（维度和时间）模拟太阳高度角和方位角的变化
DirectionalLight与shadow
brazen__的专栏
04-16 725
要使场景中物体有阴影先对renderer和mesh设置 renderer.shadowMap.enabled = true; renderer.shadowMapType = THREE.PCFShadowMap; //阴影类型THREE.BasicShadowMap = 0; //默认THREE.PCFShadowMap = 1; //渐淡THREE.PCFSoftShadow
three.js源码翻译-DirectionalLightShadow.js
qq_34205932的博客
09-29 227
three.js源码翻译-DirectionalLightShadow.js 说明 DirectionalLightShadow类是方向光的阴影，DirectionalLightShadow的创建可以在DirectionalLight的源码翻译部分看到，总体来说就是创建了一个正交摄像机传到LightShadow中来，但是一般默认值创建出的阴影很模糊，各种不行，需要具体的设置各个参数来创建出一个清晰...
ThreeJS-平行光物体投影（十九）
以爱护甲,爱满枫林。
04-02 731
/ gui.add(directionalLight.shadow.camera, 'near').min(1).max(25).step(1).name("相机近距离").onChange( () => {gui.add(directionalLight.shadow.camera, 'near').min(1).max(25).step(1).name("相机近距离").onChange( () => {//添加周围环境灯光（由物体发出的灯光）参数（灯色，强度0-1）
three.js调节平行光阴影强度及明暗程度
06-10
要调节平行光阴影的强度和明暗程度，你可以使用Three.js中的`THREE.DirectionalLight`类。这个类代表一个方向光源，可以设置它的颜色、强度、位置等属性，来影响场景中的阴影和明暗程度。 下面是一个示例代码，演示如何使用`THREE.DirectionalLight`类来调节平行光阴影的强度和明暗程度： ```javascript // 创建一个方向光源 var light = new THREE.DirectionalLight(0xffffff, 1); // 设置光源的位置 light.position.set(0, 1, 0); // 设置光源的阴影属性 light.castShadow = true; // 调节阴影强度 light.shadow.mapSize.width = 1024; light.shadow.mapSize.height = 1024; light.shadow.camera.near = 0.5; light.shadow.camera.far = 500; // 将光源添加到场景中 scene.add(light); ``` 在上面的代码中，我们创建了一个白色的方向光源，并将它的位置设置为`(0, 1, 0)`。然后，我们将`castShadow`属性设置为`true`，表示这个光源会产生阴影。接下来，我们调节了阴影的强度，使它更明显。最后，我们将光源添加到场景中。 如果你想调节平行光的明暗程度，可以简单地调节光源的颜色和强度属性。例如，如果你想让场景变得更暗，可以将光源的颜色设置为较暗的颜色，例如`0x333333`，并将强度设置为较小的值，例如`0.5`。相反，如果你想让场景变得更明亮，可以将光源的颜色设置为较亮的颜色，例如`0xffffff`，并将强度设置为较大的值，例如`2.0`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值