【技术调研】三维(3)-ThreeJs-几何体、材质、贴图、灯光及案例

news2025/1/17 3:03:45

几何体

​ 几何体是构建模型的基础,模型=几何体+材质。threejs中已内置了很多几何体。这里不一一介绍。

在这里插入图片描述

BufferGeometry

是面片、线或点几何体的有效表述。包括顶点位置,面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。

BufferGeometry是一个没有任何形状的空几何体,通过定义顶点数据将BufferGeometry自定义为任何几何形状。类似于webGL中通过点来绘制几何体。

材质

​ 材质描述了物体的外观。材质的属性(以MeshBasicMaterial为例):

.alphaMap : Texture
alpha贴图是一张灰度纹理,用于控制整个表面的不透明度。(黑色:完全透明;白色:完全不透明)。 默认值为null。

仅使用纹理的颜色,忽略alpha通道(如果存在)。 对于RGB和RGBA纹理,WebGL渲染器在采样此纹理时将使用绿色通道, 因为在DXT压缩和未压缩RGB 565格式中为绿色提供了额外的精度。 Luminance-only以及luminance/alpha纹理也仍然有效。

.aoMap : Texture
该纹理的红色通道用作环境遮挡贴图。默认值为null。aoMap需要第二组UV。

.aoMapIntensity : Float
环境遮挡效果的强度。默认值为1。零是不遮挡效果。

.color : Color
材质的颜色(Color),默认值为白色 (0xffffff)。

.combine : Integer
如何将表面颜色的结果与环境贴图(如果有)结合起来。

选项为THREE.MultiplyOperation(默认值),THREE.MixOperation, THREE.AddOperation。如果选择多个,则使用.reflectivity在两种颜色之间进行混合。

.envMap : Texture
环境贴图。默认值为null。

.fog : Boolean
材质是否受雾影响。默认为true。

.lightMap : Texture
光照贴图。默认值为null。lightMap需要第二组UV。

.lightMapIntensity : Float
烘焙光的强度。默认值为1。

.map : Texture
颜色贴图。可以选择包括一个alpha通道,通常与.transparent 或.alphaTest。默认为null。

.reflectivity : Float
环境贴图对表面的影响程度; 见.combine。默认值为1,有效范围介于0(无反射)和1(完全反射)之间。

.refractionRatio : Float
空气的折射率(IOR)(约为1)除以材质的折射率。它与环境映射模式THREE.CubeRefractionMapping 和THREE.EquirectangularRefractionMapping一起使用。 The index of refraction (IOR) of air (approximately 1) divided by the index of refraction of the material. It is used with environment mapping mode THREE.CubeRefractionMapping. 折射率不应超过1。默认值为0.98。

.specularMap : Texture
材质使用的高光贴图。默认值为null。

.wireframe : Boolean
将几何体渲染为线框。默认值为false(即渲染为平面多边形)。

.wireframeLinecap : String
定义线两端的外观。可选值为 'butt','round' 和 'square'。默认为'round'。

该属性对应2D Canvas lineJoin属性, 并且会被WebGL渲染器忽略。

.wireframeLinejoin : String
定义线连接节点的样式。可选值为 'round', 'bevel' 和 'miter'。默认值为 'round'。

该属性对应2D Canvas lineJoin属性, 并且会被WebGL渲染器忽略。

.wireframeLinewidth : Float
控制线框宽度。默认值为1。

​ 一些常用的材质:

材质 描述 受光照影响 特点
MeshBasicMaterial 基础光照模型 ×
MeshLambertMaterial Lambert光照模型(漫反射)
MeshPhongMaterial Phong光照模型(漫反射、高光反射)
MeshStandardMaterial 基于物理的光照模型(PBR物理材质),可以提供更加真实的材质效果 物理网格材质使用了更复杂的着色器功能,大部分的特性是默认关闭的,需要手动开启。
MeshPhysicalMaterial 属于PBR物理材质(基于物理的渲染physically-based rendering),可以提供更加真实的材质效果 MeshPhysicalMaterialMeshStandardMaterial的扩展子类

官网材质相关内容:

在这里插入图片描述

贴图

​ 可以理解为“皮肤”,一些常用的贴图:

  • 纹理贴图: 即常规颜色贴图,具体见官网map
  • 环境光贴图:用于模拟物体表面环境光的遮蔽效果,具体见官网aoMap
  • 法线贴图:具体见官网normalMap
  • 粗糙度贴图:具体见官网roughnessMap
  • 高度贴图:具体见官网displacementMap

灯光

​ 使用Light模拟光照对网格模型mesh(物体表面)的影响,如果使用受光照影响的材质,在不开灯的情况下是看不见的。

环境光AmbientLight

环境光AmbientLight没有特定方向,整体改变场景的光照,会均匀的照亮场景中的所有物体。因为没有方向,所以不能用来投射阴影。

语法:AmbientLight( color : Color, intensity : Float )

  • color 可选,光源颜色,默认白色
  • intensity 可选,光照的轻度,默认值为1
//环境光:没有特定方向,整体改变场景的光照明暗
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambient);

平行光

语法:DirectionalLight( color : Color, intensity : Float )

  • color 可选,光源颜色,默认白色
  • intensity 可选,光照的强度默认值为 1。

平行光的方向是一个矢量,平行光的属性如下:<

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2132768.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

代码随想录训练营Day3 | 链表理论基础 | 203.移除链表元素 | 707.设计链表 | 206.反转链表

今天任务&#xff1a;学习链表理论基础 链表的类型 链表的存储方式 链表的定义…

基于SpringBoot+Vue+MySQL的招聘管理系统

系统展示 用户前台界面 管理员后台界面 企业后台界面 系统背景 在当今数字化转型的大潮中&#xff0c;企业对于高效、智能化的人力资源管理系统的需求日益增长。招聘作为人力资源管理的首要环节&#xff0c;其效率与效果直接影响到企业的人才储备与竞争力。因此&#xff0c;构建…

linux 操作系统下crontab命令及使用案例介绍

linux 操作系统下crontab命令及使用案例介绍 Linux 操作系统下的 crontab 命令用于设置周期性执行的任务 crontab 命令概述 基本语法 bash crontab [-u user] file crontab [-u user] [-l | -r | -e] [-i] [-s] 主要功能 创建、编辑和管理用户的计划任务&#xff08;cron…

基于中心点的目标检测方法CenterNet—CVPR2019

Anchor Free目标检测算法—CenterNet Objects as Points论文解析 Anchor Free和Anchor Base方法的区别在于是否在检测的过程中生成大量的先验框。CenterNet直接预测物体的中心点的位置坐标。 CenterNet本质上类似于一种关键点的识别。识别的是物体的中心点位置。 有了中心点之…

【工具】前端JavaScript代码在线执行器 方便通过网页 手机测试js代码

【工具】前端JavaScript代码在线执行器 方便通过网页 手机测试js代码 自动补全js代码格式化代码色彩打印日志清空日志待补充 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport"…

基于SpringBoot+Vue+MySQL的热门网络游戏推荐系统

系统展示 用户前台界面 管理员后台界面 系统背景 基于SpringBootVueMySQL的热门网络游戏推荐系统&#xff0c;其背景主要源于当前网络游戏市场的蓬勃发展与用户需求的日益多样化。随着互联网的普及和技术的不断进步&#xff0c;网络游戏已成为人们休闲娱乐的重要方式之一。面对…

JAVA开源项目 校园管理系统 计算机毕业设计

本文项目编号 T 026 &#xff0c;文末自助获取源码 \color{red}{T026&#xff0c;文末自助获取源码} T026&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 管…

网络安全-intigriti-0422-XSS-Challenge Write-up

目录 一、环境 二、解题 2.1看源码 一、环境 Intigriti April Challenge 二、解题 要求&#xff1a;弹出域名就算成功 2.1看源码 我们看到marge方法&#xff0c;肯定是原型链污染题目 接的是传参&#xff0c;我们可控的点在于qs.config和qs.settings&#xff0c;这两个可…

逆向工程 反编译 C# net core

索引器访问 在您的代码中&#xff0c;您试图使用 configurationRoot.get_Item("AgileConfig:appId") 来访问配置项&#xff0c;但这里存在几个问题&#xff1a; 错误的访问方法&#xff1a;在 .NET 的 IConfigurationRoot 接口中&#xff0c;没有直接名为 get_Item 的…

python fastapi 打包exe

创建虚拟环境 python -m venv 国内依赖仓库 # 换源 pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple pip config set install.trusted-host mirrors.aliyun.com 安装nuitka pip install nuitka 生成exe nuitka --mingw64 --show-progress --s…

[000-01-008].第08节:Sentinel 环境搭建

1.Sentinel的构成&#xff1a; 核心库-后台默认的端口是8719控制台-前台默认的是8080端口 2.2.搭建Sentinel环境&#xff1a; a.下载Sentinel&#xff1a; 1.sentinel官方提供了UI控制台&#xff0c;方便我们对系统做限流设置。可以在GitHub下载 b.下载后运行Sentinel&#…

自动驾驶系列—掌握速度,驾驭安全,限速信息提醒功能(SLIF)介绍

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

心觉:收钱就像喝水一样简单,是如何做到的?

Hi&#xff0c;我是心觉&#xff0c;与你一起玩转潜意识、脑波音乐和吸引力法则&#xff0c;轻松掌控自己的人生&#xff01; 挑战每日一省写作168/1000天 真的存在赚钱跟喝水一样简单的事情 这两天亲身体验过 某位做知识付费的大佬&#xff0c;昨天写一篇文章就哗哗哗的开…

导弹追踪问题:蒙特卡罗模拟+matlab代码

问题描述 蒙特卡罗模拟思想 采用微元法以直代曲的思想&#xff0c;假设一个个小时间段内&#xff0c;B船先走完一段直线距离后&#xff0c;导弹朝着两者连线方向走直线&#xff0c;这样若干条直线便近似拟合导弹轨迹。代码中判断碰撞的依据是A、B之间的距离小于某个阈值&#x…

JSON 数据 Excel 行转列

有如下JSON数据 [{id:1,name:小明,score:90}, {id:2,name:小李,score:89}, {id:3,name:小王,score:77}, {id:4,name:小刘,score:56}] 粘贴到 Excel 选中列-->数据tab-->分列 下一步 分隔符号-->其他【,】-->完成 CtrlF 替换-->全部替换 掉不要的字符为空 得…

代码随想录Day 43|leetcode题目:300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

提示&#xff1a;DDU&#xff0c;供自己复习使用。欢迎大家前来讨论~ 文章目录 动态规划Part10题目一&#xff1a;300.最长递增子序列解题思路&#xff1a; 题目二&#xff1a;674. 最长连续递增序列解题思路&#xff1a; 题目三&#xff1a; 718. 最长重复子数组解题思路滚动…

Radiance Field Learners As UAV First-Person Viewers 精读

1. 多尺度相机空间估计模块&#xff1a; 关键帧选择器&#xff1a;自动选择最具代表性的帧进行渲染&#xff0c;减少计算量&#xff0c;提高渲染效率。无人机轨迹预测&#xff1a;通过历史轨迹预测无人机的未来位置&#xff0c;确保实时视角调整&#xff0c;提高无人机导航的准…

云渲染与AI渲染分别是什么?两者的优势对比

云渲染和AI渲染是两种先进的渲染技术&#xff0c;它们各自具有独特的优势和应用场景。下面针对两种情况来简单说明下。 1、云渲染&#xff1a; - 定义&#xff1a;云渲染是一种利用远程服务器(云端)来处理和生成渲染效果的技术。它允许用户将计算密集型的任务转移到云端&#…

[论文笔记] CSFCN

摘要 上下文建模或多级特征融合方法已被证明可以有效提高语义分割性能。 然而&#xff0c;它们并不是专门处理像素上下文不匹配和空间特征不对齐的问题&#xff0c;并且高计算复杂度阻碍了它们在实时场景中的广泛应用。 在这项工作中&#xff0c;我们提出了一种轻量级的上下文…

8.第二阶段x86游戏实战2-实现瞬移

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…