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)
  • 效果
相关推荐
灵感__idea14 分钟前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡1 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo1 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel1 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld1 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel1 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi2 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904273 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki3 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo3 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端