WebGL基础（10）应用图形用户界面更改变量

<!-- 基础最终代码 -->
<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' // 导入轨道控制器
import gsap from 'gsap' // 导入动画库
import * as dat from 'dat.gui' // 导入dat.gui
export default {
  name: 'Home',
  data () {
    return {
      scene: null,  //场景对象
      camera: null,  //相机对象
      cube: null, //物体
      controls: null, // 控制器
      renderer: null,  //渲染器对象
      clock: null, //跟踪时间
      gui: 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 )

      // 应用图形用户界面更改变量
      this.gui = new dat.GUI()
      this.gui.add(this.cube.position, 'x').min(0).max(5).step(0.01).name('移动x轴')
      .onChange((value) => { console.log('移动x轴', value) })
      .onFinishChange((value) => { console.log('完全停下下来', value) })
      // 设置颜色
      let params = { 
        color: '#ffff00',
        fn: () => {
          // 让物体动起来
          gsap.to(this.cube.position, { x: 5, duration: 5, repeat: -1, yoyo: true })
        }
      }
      this.gui.addColor(params, 'color').onChange((value) => { 
        console.log('颜色改变值', value)
        this.cube.material.color.set(value)
      })
      // 设置选项框
      this.gui.add(this.cube, 'visible').name('是否显示')
      // 设置方法
      this.gui.add(params, 'fn').name('物理运动')
      // 设置文件夹
      let folder = this.gui.addFolder('设置物体')
      folder.add(this.cube.material, 'wireframe')

      // 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.controls = new OrbitControls( this.camera, this.renderer.domElement )

      // 设置控制器阻尼，让控制器更真实
　　　 this.controls.enableDamping = true


      // 添加坐标轴辅助器
      const axesHelper = new THREE.AxesHelper( 5 )
      this.scene.add( axesHelper )

      // 设置时钟
      this.clock = new THREE.Clock()

      // 设置动画
      // var animate1 = 
      // gsap.to(this.cube.position, {
      //   x: 5, 
      //   duration: 5, 
      //   ease: 'power1.inOut',
      //   repeat: 2, // 设置重复次数  -1一直重复
      //   yoyo: true, // 往返运动
      //   delay: 0, // 延迟
      //   onStart: () => {
      //     console.log('动画开始')
      //   },
      //   onComplete: () => {
      //     console.log('动画完成')
      //   }
      // })
      // gsap.to(this.cube.rotation, {
      //   x: 2 * Math.PI, 
      //   duration: 5, 
      //   ease: 'power1.inOut',
      // })

      // 渲染函数
      this.render()
      // 监听尺寸变化
      this.resize()


      // 双击控制动画
      // window.addEventListener('dblclick', () => {
      //   if (animate1.isActive()) { // 判断是否正在开始动画
      //     animate1.pause() // 停止动画
      //   } else {
      //     animate1.pauresumese() // 开始动画
      //   }
      // })

      // 双击控制全屏他和退出全屏
      // window.addEventListener("dblclick", () => {
      //   const fullScreenElement = document.fullscreenElement
      //   if (!fullScreenElement) {
      //     // 用画布对象进入全屏
      //     this.renderer.domElement.requestFullscreen()
      //   } else {
      //     // 用document对象退出全屏
      //     document.exitFullscreen()
      //   }
      // })
    },
    // 渲染函数
    render () {
      this.controls.update()
      this.renderer.render( this.scene, this.camera )
      // 渲染下一帧的时候就会调用render函数
      requestAnimationFrame( this.render )
    },
    // 监听尺寸变化，更新渲染页面
    resize () {
      window.addEventListener('resize', () => {
        // 更新摄像头
        this.camera.aspect = window.innerWidth / window.innerHeight
        // 更新摄像机的投影矩阵
        this.camera.updateProjectionMatrix()
        // 更新渲染器
        this.renderer.setSize( window.innerWidth, window.innerHeight )
        // 设置渲染器的像素比
        this.renderer.setPixelRatio(window.devicePixelRatio)
      })
    }
  }
}
</script>