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)
  • 效果
相关推荐
1024小神2 分钟前
Cocos游戏开发中,检测两个物体碰撞,并实现物理反弹逻辑
前端·javascript
拾光拾趣录4 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权5 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598245 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87115 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚28 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件31 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite