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)
  • 效果
相关推荐
huabuyu20 小时前
基于 React + MarkdownIt 的 Markdown 渲染器实践:支持地图标签和长按复制
前端
芦苇Z20 小时前
HTML <a> 标签的 rel 属性全解析:安全、隐私与 SEO 最佳实践
前端·html
在这儿不行20 小时前
Android 15边到边模式
前端
源猿人20 小时前
企业级文件浏览系统的Vue实现:架构设计与最佳实践
前端·javascript·数据可视化
红红大虾20 小时前
Defold引擎中关于CollectionProxy的使用
前端·游戏开发
最后一个农民工20 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
RoyLin20 小时前
TypeScript设计模式:迭代器模式
javascript·后端·node.js
xw520 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !21 小时前
uni-app中v-if使用”异常”
前端·uni-app