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)
  • 效果
相关推荐
慧一居士6 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead8 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js