当前位置: 首页 > news >正文

Basic Threejs (2)

1、UV映射-二维纹理坐标

//设置uv坐标;plane平面是有uv属性直接设置map贴图就行,但是这种自定义的几何体没有uv属性,需要设置uv
const uv = new Float32Array([ //对比vert 四个点,需要一一对应0, 0, 1, 0, 1, 1, 0, 1   //正面:一个顶点两个坐标
])
ger.setAttribute("uv", new THREE.BufferAttribute(uv, 2))  //2表示数组是两个一组,xy为一组

2、法向:

  • 垂直于面的线,用于计算光反射
  • 法向量辅助器VertexNormalsHelper
//1、计算法向量
ger.computeVertexNormals()//2、自定义设法向量:法向量是一个三维的向量
const normals = new Float32Array([  //总共四个点:射向眼睛的方向0,0,1, 0,0,1, 0,0,1, 0,0,1
])
//创建法向量属性
ger.setAttribute("normal", new THREE.BufferAttribute(normals, 3))

3、顶点转化、位移、旋转

  • 注意顶点转换以及物体的旋转缩放区别
    • 顶点转化:对顶点数据的转换
    • 物体转换:对物体的转换(常用)

4、包围盒&世界矩阵转换

  • computeBoundingBox计算geometry包围盒
  • Box3Helper包围盒辅助器
    注意:父元素在进行了旋转变化后,要去更新几何体的世界矩阵 updateWorldMatrix

5、几何居中、获取几何体中心

  • 一般是采用包围盒、包围球进行计算
  • 设置几何体居中:center方法
  • 获取包围盒中心:
//new THREE.Vector3()得到的数据赋值给三维空向量
let center = geomertry.getCenter(new THREE.Vector3())
  • 包围球和包围球辅助器
let sp = geomertry.boundingSpere	//获取包围球
sp.applyMatrix4(duckMesh.matrixWorld)
let spereGeo = new THREE.SphereGeomertry(sp.center, 16,16)//创建包围球辅助器
let spereMat = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true
})
let spereMesh = new THREE.Mesh(spereGeo,spereMat)
spereMesh.position.copy(geomertry.center)
scene.add(spereMesh)

6、获取多物体包围盒

//arr 是几何体数组
let box = new THREE.Box3()
let box3 = new THREE.Box3().setFromObject(arr)
box.union(nox3)	//联合几个包围盒计算

7、边缘几何体与线框几何体

  • 边缘几何体(EdgesGeometry):对边缘进行计算得到线框的一个类
  • 线框几何体(WireframeGeometry):会渲染一个几何体所有三角形的面,对每个面会渲染出它的三条边
const geomertry = scence.geomertry
//获取边缘geomertry
let edgesGeometry = new THREE.EdgesGeometry(geomertry)
let edgesMaterial = new THREE.LineBasicMaterial({color: 0xffffff})
let edges = new THREE.LineSegments(edgesGeometry,edgesMaterial)//更新场景世界转换矩阵
scence.updateWorldMatrix(true,true)
edges.matrix.copy(scence.matrixWorld)	//复制世界转换矩阵到线框
//结构更新 线框 的位置、旋转、缩放
edges.matrix.decompose(edges.position, edges.quaternion,edges.scale)
//traverse可以遍历递归所有子物体
http://www.dtcms.com/a/344490.html

相关文章:

  • Unity中国小游戏行业沙龙:抖音小游戏平台分析与规划
  • Excel处理控件Aspose.Cells教程:使用Python将 Excel 转换为 NumPy
  • AWS OpenSearch 是什么
  • 复合设计模式
  • 阿里云详解:与 AWS、GCP 的全方位比较
  • openEuler系统中home文件夹下huawei、HwHiAiUser、lost+found 文件夹的区别和作用
  • 农业-学习记录
  • vue中监听页面滚动位置
  • Playwright进阶指南 (5):拦截与模拟网络请求
  • 【LLMs篇】19:vLLM推理中的KV Cache技术全解析
  • SymPy 中抽象函数的推导与具体函数代入
  • 《器件在EMC中的应用》---磁珠在EMC中的应用
  • 一次性密码(OTP)原理及应用
  • 解决 PyTorch 导入错误:undefined symbol: iJIT_NotifyEvent
  • 数据结构之深入探索快速排序
  • Spring Start Here 读书笔记:第10章 Implementing REST services
  • vue vxe-gantt 甘特图自定义任务条样式模板 table 自定义插槽模板
  • 云手机是依靠哪些技术运行的?
  • Shell脚本源码安装Redis、MySQL、Mongodb、PostgreSQL(无报错版)
  • 遥感机器学习入门实战教程|Sklearn案例⑥:网格搜索与超参数优化
  • Logstash——性能、可靠性与扩展性架构
  • Python爬虫实战:构建古籍抄本数据采集分析系统
  • 实验二 Cisco IOS Site-to-Site Pre-share Key
  • LeetCode第55题 - 跳跃游戏
  • GitHub 热榜项目 - 日榜(2025-08-22)
  • 解析三品汽车零部件PLM系统解决方案:如何助力行业解决研发管理难题
  • Curity CTO 深度解析:AI 智能体正让我们“梦游”般陷入安全危机
  • 车载中控:汽车的数字大脑与交互核心
  • 第五章:Leaflet 进阶:高德地图交互与事件处理全解析
  • git回滚相关命令指南