vue three基础知识笔记

1、安装依赖

cnpm i three gsap dat.gui three-orbit-controls --save

2、使用

<template>
  <div class="home" ref="container"> </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";
export default {
  name: 'Home',
  data() {
    return {
      container:null,
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      controls:null
    }
  },
  mounted () {
    //初始化
    this.init();
    //动画
    this.animate(); 
    //初始化gui
    this.initGUI()
    // 监听画面变化（放置代码末尾）
    window.addEventListener("resize", () => {
      //更新摄像头
      this.camera.aspect = this.container.clientWidth / this.container.clientHeight;
      // 更新摄像机投影矩阵
      this.camera.updateProjectionMatrix();
      // 更新渲染器
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      // 设置渲染器像素比
      this.renderer.setPixelRatio(window.devicePixelRatio);
    }); 

  },
  methods: {
    init() {
      this.container = this.$refs.container;
      
      //创建场景
      this.scene = new THREE.Scene();
       //设置相机
      this.camera = new THREE.PerspectiveCamera(75,this.container.clientWidth / this.container.clientHeight,0.1,1000);
      this.camera.position.set(0, 0, 10);// 设置相机位置
      this.scene.add(this.camera);// 添加相机到场景中
      //  创建网格模型
      const geometry = new THREE.BoxGeometry(3, 3, 3); //创建一个立方体几何对象Geometry
      const material = new THREE.MeshLambertMaterial({
        color: 0x00ff00,
       // wireframe:true,//线框
      }); //材质对象Material
      this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh关联几何体和材质
      this.scene.add(this.mesh); //网格模型添加到场景中
      //设置光源
      const point = new THREE.PointLight(0xffffff); //点光源
      point.position.set(300, 400, 500); //点光源位置
      this.scene.add(point); //点光源添加到场景中
      const ambient = new THREE.AmbientLight(0x444444);//环境光
      this.scene.add(ambient); //环境光添加到场景中
      //创建渲染器对象
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight); //设置渲染区域尺寸
      //renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      // 将webgl渲染的canvas内容添加到body
      this.container.appendChild(this.renderer.domElement); 
      // 添加轨道控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;// 设置轨道自然
      this.controls.update() // 设置惯性
      // 添加坐标轴辅助器
      const axesHelper = new THREE.AxesHelper(5);
      this.scene.add(axesHelper); 
      
     
    },
    initGUI(){
      // 应用图形界面更改变量
        const gui = new dat.GUI();
        gui.add(this.mesh.position, "x").min(0) // 最小值.max(5) // 最大值.step(0.05) // 调节的精度.name("移动x坐标") // 属性名.onChange((value) => { //监听回调console.log("值被修改了：", value);});

        // 修改物体的颜色
        const params = {color: "#fff",fn: () => {gsap.to(this.mesh.position, {x: 5,ease: "power1.out",duration: 5,repeat: -1,yoyo: true,});},
        };
        gui.addColor(params, "color").onChange((value) => {this.mesh.material.color.set(value)
        });

        // 设置是否显示目标物
        gui.add(this.mesh, "visible").name("是否显示");

        // 添加文件夹
        var folder = gui.addFolder("设置立方体");
        // 将配置材质的属性加入folder文件夹
        folder.add(this.mesh.material, "wireframe");
        // 将点击触发某个事件的方法加入到folder文件夹
        folder.add(params, "fn").name("立方体运动"); 

    },
    animate() {
      this.controls.update();
      // this.mesh.rotation.y += 0.005;
      // 将几何体旋转
      //gsap.to(this.mesh.position, { x: 2 * Math.PI, duration: 5, repeat: -1 }); 
      gsap.to(this.mesh.position, {
          x: 5, // 沿x轴移动5个像素
          ease: 'power3', // 使用***模式进行移动
          duration:3, // 持续时间5秒
          repeat: -1, // 循环执行
          yoyo: true, // 动画流畅度优化
          onComplete:()=>{}//动画完毕后调用的函数
      });
      this.renderer.render(this.scene, this.camera);// 渲染下一帧的时候就调用
      requestAnimationFrame(this.animate);
    }

  },
}
</script>
<style lang="scss" scoped>
.home{
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}
</style>