【ThreeJS Basics 1-4】变换物体 VIP

---

概述

有常用的四种维度，用来变换物体

• 位置 position
• 旋转 rotation
• 缩放 scale
• 四元数 quaternion

再此之前引入一个 Axes Helper 用于帮我们更好的观察物体的变换

---

Axes helper

这个是官网的说明

在场景中添加一个 轴 Helper，(我也不知道怎么翻译好了) ，然后移动一下相机的位置，可以看到三个轴都能显示出来

也可以填写数字来改变轴的长度

import * as THREE from 'three'

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

/**
 * Axes Helper
 */
const axesHelper = new THREE.AxesHelper(2)
scene.add(axesHelper)

/**
 * Sizes
 */
const sizes = {
   
    width: 800,
    height: 600
}

/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
camera.position.y = 0.5
camera.position.x = 0.5

// camera.lookAt(new THREE.Vector3(0, - 1, 0))
scene.add(camera)

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
   
    canvas: canvas
})
renderer.setSize(sizes.width