Three.js第三课-父子元素&缩放旋转

父子元素

设置元素位置
  • 单独轴坐标位置 good.position.x=2
  • 整体轴坐标位置 good.position.set(2,0,0)
局部坐标
  • 理解:当某个物体存在父元素时,那么它的坐标就是局部坐标
  • 参照:其坐标位置会相对于其父元素进行,将其父元素作为原点
  • 表现:当平移父元素时,子元素的位置也会跟着动
  • 代码:
csharp 复制代码
// 定义形状
// BoxGeometry(几何体)
const geometry = new Three.BoxGeometry(1, 1, 1)
// 定义父元素
const parentgeometry=new Three.BoxGeometry(1,2,1)
const parentmaterial=new Three.MeshBasicMaterial({color:"skyblue"})
// 定义材质
const material = new Three.MeshBasicMaterial({ color: "pink" })
// 创建物体
const good = new Three.Mesh(geometry, material)
const parentgood=new Three.Mesh(parentgeometry,parentmaterial)
// 形成父子关系
parentgood.add(good);
parentgood.position.set(-2,0,0)
// 移动物体
good.position.set(2,0,0)

// 将物体添加到场景中
scene.add(parentgood)
  • 效果:
世界坐标
  • 理解:当某个物体不存在父元素时,那么它的坐标就是世界坐标
  • 参照:其坐标位置相对于世界进行,将世界坐标系作为原点
  • 代码:
arduino 复制代码
// 定义形状
// BoxGeometry(几何体)
const geometry = new Three.BoxGeometry(1, 1, 1)
// 定义材质
const material = new Three.MeshBasicMaterial({ color: "pink" })
// 创建物体
const good = new Three.Mesh(geometry, material)
// 移动物体
good.position.x=2

// 将物体添加到场景中
scene.add(good);
  • 效果:

根据上面两个例子,我们可以更加深入的理解局部坐标全局坐标

P1父元素设置位置坐标为(-2,0,0),子元素设置坐标为(2,0,0) 但是实际上子元素的位置却在(0,0,0),那是因为子元素的(2,0,0)是相对于父元素当前所处的位置的(将父元素当作(0,0,0))

缩放scale

  • 坐标系:缩放也是相对于局部坐标系的,因此父元素放大时,子元素也会放大
  • API: scalegood.scale.set(x,y,z)
  • 代码:
c 复制代码
将整个good都放大两倍
good.scale.set(2,2,2)
  • 效果

旋转 rotation

  • 坐标系:旋转也是相对于局部坐标系的,因此父元素旋转时,子元素也会旋转
  • 旋转:欧拉角Euler
  • API:Euler(x,y,z,order) order为旋转顺序,默认为'XYZ'
  • 代码:
c 复制代码
// 绕x轴方向旋转45°
good.rotation.set(Math.PI/4,0,0)
  • 效果
相关推荐
太过平凡的小蚂蚁3 分钟前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫1 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳1 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
liusheng2 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪2 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛2 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能2 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
非凡ghost3 小时前
Syncovery Premium(文件同步软件)
前端·javascript·后端
trsoliu3 小时前
2025前端AI开发实战范式:RAG+私有库落地指南
前端框架·前端工程化
trsoliu3 小时前
2025前端AI Coding产品与实战案例大盘点
前端·ai编程