Three.js+Vue3+Vite物体位移、缩放与旋转（二）

上篇文章中我们阐述了如何创建一个场景，本篇文章中我们继续讲述其他的功能，主要阐述对于物体即几何体的位移、缩放和旋转，另外再额外先补充上篇文章中未书写到的导入轨道控制器，因为本篇讲述的功能可能需要用到这个。

一、导入轨道控制器

//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
//在方法中添加轨道控制器
const getThree = () => {
//添加轨道控制器---OrbitControls
  const controls = new OrbitControls(camera, renderer.domElement)
// 渲染场景和动画
  const animate = () => {
    //进行更新
    controls.update()
  }
}

二、物体位移与父元素

在上篇文章中我们创建了几何体、材质及元素，接下来我们在这个的基础上，给它添加父元素

1. 创建父元素材质

为了与子元素的材质有所区别，以便于我们更明确的观察两者间的位置，给父元素添加个别的材质

//创建材质--父元素
  const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })

2.添加父元素

//添加父元素
  const parentCube = new THREE.Mesh(geometry, parentMaterial)

3.设置父元素与子元素关系

//设置父子关系
  parentCube.add(cube)

4.设置子元素位移

//设置子元素位移缩放--参数分别为x,y,z
  cube.position.set(13, 0, 0)

5.设置父元素位移

//设置父元素位移缩放--参数分别为x,y,z
  parentCube.position.set(-13, 0, 0)

6.场景中添加父元素

 // 加入场景--父元素
  scene.add(parentCube)

7.完整代码及效果

以下只是涉及到上述内容的具体代码

// 创建几何体
  const geometry = new THREE.BoxGeometry(5, 5, 5)
  // 创建材质--子元素
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
  //创建材质--父元素
  const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
  // 创建网格
  const cube = new THREE.Mesh(geometry, material)
  //添加父子关系
  const parentCube = new THREE.Mesh(geometry, parentMaterial)
  //设置父子关系
  parentCube.add(cube)
  //设置子元素位移缩放--参数分别为x,y,z
  cube.position.set(13, 0, 0)
  //设置父元素位移缩放--参数分别为x,y,z
  parentCube.position.set(-13, 0, 0)

  // 加入场景--父元素
  scene.add(parentCube)

从下面的图中我们不难发现，子元素的位置居于坐标轴中心位置，而父元素则在设置位置的x:-13位置，其实子元素的位置还是设置的x:13的位置，只不过它现在的相对位置不是坐标轴原点，而是父元素的位置，父元素的（-13，0，0）这个才是它的原点。

三、物体的缩放与旋转

 1.物体的缩放

对于物体的放大和缩小所用到的方法是scale,这个其实还是比较简单的

//对物体进行缩放--局部缩放
  cube.scale.set(2, 2, 2)

2.物体的旋转

//对物体进行旋转--欧拉角旋转
  cube.rotation.x = Math.PI / 4