threejs系列:光源与光照🪀

写在最前

光照是计算机图形学中的一个重要概念,它可以用来模拟现实世界中的光线效果。光照的效果可以影响图形的视觉效果,使其更加逼真和真实。

图形学光照的研究主要集中在以下几个方面:

  • 光源模型:光源模型是用于描述光源的物理模型。常见的光源模型包括点光源模型、聚光灯模型、平行光源模型和环境光源模型。
  • 光照模型:光照模型是用于描述光线与物体相互作用的模型。常见的光照模型包括漫反射模型、镜面反射模型、折射模型和材质模型。
  • 光照算法:光照算法是用于计算光照效果的算法。常见的光照算法包括直接光照算法、间接光照算法和全局光照算法。

光源模型

THREE.AmbientLight 环境光

环境光源是没有原点,没有方向的光源,它公平的给予场景中的每一个物体相同的光亮,也称为全局光照。

假设颜色为 meshColor 的物体不受其他因素影响,且设置光源强度为1,颜色为lightColor的环境光,则物体最终渲染的颜色值为 meshColor * lightColor

js 复制代码
  let light = new AmbientLight(0xFF0000, 1);

  let cube = new Mesh(
    new BoxGeometry(1, 1, 1),
    new MeshStandardMaterial({ color: 0xCCCCCC })
  );

  console.log(new Color(0xFF0000).multiply(new Color(0xCCCCCC)).getHexString());

(可以用吸色盘查看颜色是否和打印的值一样)

THREE.PointLight 点光源

从一个点向各个方向发射的光源,现实生活中例子:灯泡、萤火虫等。

  • color -(可选)一个表示颜色的 Color 的实例、字符串或数字,默认为一个白色(0xffffff)的 Color 对象。
  • intensity -(可选)光照强度。默认值为 1。
  • distance - 光源照射的最大距离。默认值为 0(无限远)。
  • decay - 沿着光照距离的衰退量。默认值为 2。

定位定光的辅助对象 THREE.PointLightHelper

js 复制代码
const pointLightHelper = new THREE.PointLightHelper(pointLight);
scene.add(pointLightHelper);

THREE.SpotLight 聚光灯

光线从一个点沿一个方向射出,随着光线照射的变远,光线圆锥体的尺寸也逐渐增大。现实生活中:手电筒

  • color -(可选)一个表示颜色的 Color 的实例、字符串或数字,默认为一个白色(0xffffff)的 Color 对象。
  • intensity -(可选)光照强度。默认值为 1。
  • distance - 光源照射的最大距离。默认值为 0(无限远)。
  • angle - 光线照射范围的角度。默认值为 Math.PI/3。
  • penumbra - 聚光锥的半影衰减百分比。默认值为 0。
  • decay - 沿着光照距离的衰减量。默认值为 2。

定位定光的辅助对象 THREE.SpotLightHelper

js 复制代码
const spotLightHelper = new THREE.SpotLightHelper(spotLight);
scene.add(spotLightHelper);

THREEJS.DirectionalLight 平行光

从某个角度发出平行且恒定的光强,常用于模拟太阳光。

  • color -(可选)一个表示颜色的 Color 的实例、字符串或数字,默认为一个白色(0xffffff)的 Color 对象。
  • intensity -(可选)光照的强度。默认值为 1。

定位定光的辅助对象 THREE.DirectionalLightHelper

js 复制代码
const helper = new THREE.DirectionalLightHelper( light, 5 ); 
scene.add( helper );
相关推荐
幻云2010几秒前
Python深度学习:筑基与实践
前端·javascript·vue.js·人工智能·python
@大迁世界2 分钟前
停止使用 innerHTML:3 种安全渲染 HTML 的替代方案
开发语言·前端·javascript·安全·html
缘木之鱼2 分钟前
CTFshow __Web应用安全与防护 第二章
前端·安全·渗透·ctf·ctfshow
沛沛老爹3 分钟前
从Web到AI:多模态Agent Skills生态系统实战(Java+Vue构建跨模态智能体)
java·前端·vue.js·人工智能·rag·企业转型
子非鱼92112 分钟前
Vue框架快速上手
前端·javascript·vue.js
winfredzhang12 分钟前
从零构建:基于 Node.js 与 ECharts 的量化交易策略模拟系统
前端·node.js·echarts·股票·策略
We་ct15 分钟前
LeetCode 380. O(1) 时间插入、删除和获取随机元素 题解
前端·算法·leetcode·typescript
LawrenceLan36 分钟前
Flutter 零基础入门(二十三):Icon、Image 与资源管理
开发语言·前端·flutter·dart
津津有味道1 小时前
WEB浏览器网页读写Desfire EV1 EV2 EV3卡,修改DES、3DES、AES密钥JS源码JavaScript
前端·javascript·nfc·desfire·ev2·ev3·ev1
敲敲了个代码1 小时前
前端指纹技术是如何实现的?(Canvas、Audio、硬件API 核心原理解密)
前端·javascript·学习·算法·面试·web