【Threejs】从零开始（三）--物体移动与父子元素

1.首先创建一个基本几何体

import * as THREE from 'three'  // 导入threejs
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'  // 导入轨道控制器

const scene = new THREE.Scene()  // 创建场景
const camera = new THREE.PerspectiveCamera(
  75, // 视角
  window.innerWidth / window.innerHeight,// 长宽比
  0.1, // 近截面
  1000// 远截面
)  // 创建相机

const renderer = new THREE.WebGLRenderer()  // 创建渲染器
renderer.setSize(window.innerWidth, window.innerHeight)  // 设置渲染器大小
document.body.appendChild(renderer.domElement)  // 将渲染器添加到页面中


const geometry = new THREE.BoxGeometry()  // 创建几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })  // 创建材质
const cube = new THREE.Mesh(geometry, material)  // 创建网格
scene.add(cube)  // 将网格添加到场景中

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 开启阻尼
controls.dampingFactor = 0.02; // 设置阻尼系数
// controls.autoRotate = true; // 开启自动旋转


function render() {
  //如果后期需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入controls.update()
  controls.update()
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

2.怎么控制物体的位置？

这里可以引入position方法。

cube.position.set(2,2,2)  // 设置几何体位置

其中set的三个变量分别代表是xyz轴。

3.父子元素关系是怎样的的？

首先创建一个父元素，一个子元素。为便于区分用让他们材质不同。

const geometry = new THREE.BoxGeometry()  // 创建几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })  // 创建材质
const parentMaterial = new THREE.MeshBasicMaterial({ color:0x00ff00, wireframe: true })  // 创建材质
const parentCube = new THREE.Mesh(geometry, parentMaterial)  // 创建父元素
const cube = new THREE.Mesh(geometry, material)  // 创建网格
scene.add(parentCube)  // 将网格添加到场景中
parentCube.add(cube)  // 将网格添加到父元素中

我们设置子元素的位置

cube.position.set(2,0,0)  // 设置几何体位置

可以得到

这个时候我们调整父元素的坐标，可以看到：

parentCube.position.set(2,0,0)  // 设置几何体位置

因此可以得到，子元素的位置是也相对于父元素来说的，而父元素是基于原点的。