WebGL基础（4）物体的位置、缩放、旋转属性

<template>
  <div class="home">
    <div id="threeContainer" class="threeContainer"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // 导入轨道控制器
export default {
  name: 'Home',
  data () {
    return {
      scene: null,  //场景对象
      camera: null,  //相机对象
      cube: null, //物体
      renderer: null  //渲染器对象
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      // 1. 创建场景
      this.scene = new THREE.Scene()
      
      // 2. 创建相机
      this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
      this.camera.position.set( 0, 0, 10 ) // 设置相机位置
      this.scene.add(this.camera)

      // 3. 添加物体
      // 创建几何体
      const geometry = new THREE.BoxGeometry()
      const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} )
      
      // 根据几何体和材质创建物体
      this.cube = new THREE.Mesh( geometry, material )
      // 修改物体的位置
      // this.cube.position.set(5, 0, 0)
      // this.cube.position.x = 3
      // 物体的缩放
      // this.cube.scale.set(3, 2, 1)
      // this.cube.scale.x = 5
      // 物体的旋转
      // this.cube.rotation.set(Math.PI / 4, 0, 0)
      // this.cube.scale.x = 5

      // 将几何体添加到场景中
      this.scene.add( this.cube )
      
      // 4. 初始化渲染器
      this.renderer = new THREE.WebGLRenderer()
      // 设置渲染器的尺寸大小
      this.renderer.setSize( window.innerWidth, window.innerHeight )
      // 将webgl渲染的canvas内容添加到body中
      document.getElementById('threeContainer').appendChild( this.renderer.domElement )
      // // 使用渲染器 通过相机将场景渲染出来
      // this.renderer.render( this.scene, this.camera )
      this.render()

      // 创建轨道控制器
      const controls = new OrbitControls( this.camera, this.renderer.domElement )
      controls.update()

      // 添加坐标轴辅助器
      const axesHelper = new THREE.AxesHelper( 5 )
      this.scene.add( axesHelper )
    },
    // 渲染函数
    render (time) {
      console.log(time)
      // 物体会沿着x轴一直循环运动
      this.cube.position.x += 0.01
      this.cube.rotation.x += 0.1
      if (this.cube.position.x > 5) {
        this.cube.position.x = 0
      }
      this.renderer.render( this.scene, this.camera )
      // 渲染下一帧的时候就会调用render函数
      requestAnimationFrame( this.render )
    }
  }
}
</script>