二、Three.js之几何体、轨道控制器、坐标辅助器

一、创建几何体，并添加轨道控制器

<template>
  <div id="about"></div>
</template>

<script>
import * as THREE from "three";
// 引入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  methods: {
    init() {
      // 创建场景
      const scene = new THREE.Scene();
      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        10000
      );

      // 设置相机高度
      camera.position.set(0, 0, 10);
      // 创建一个几何体
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      // 创建材质
      const mater = new THREE.MeshBasicMaterial({ color: 0xffee22 });
      // 创建网，将几何体和材质包裹
      const cube = new THREE.Mesh(geometry, mater);

      // 将网追加到场景中
      scene.add(cube);

      // 创建渲染函数
      const renderer = new THREE.WebGL1Renderer();
      // 设置画布
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.getElementById("about").appendChild(renderer.domElement);

      // 添加轨道控制器
      new OrbitControls(camera, renderer.domElement);

      // 渲染
      function render() {
        renderer.render(scene, camera);
        // 浏览器渲染函数，会在下一帧自动调用
        requestAnimationFrame(render);
      }
      render();
    },
  },
  mounted() {
    this.init();
  },
};
</script>

二、效果

• 可以通过鼠标点击拖拽进行轨道切换

三、添加坐标辅助器

      // 添加坐标辅助器  参数：坐标线条的长度 红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.
      const axesHelper = new THREE.AxesHelper(5);
      // 追加到场景中
      scene.add(axesHelper);

四、控制几何体的位置、缩放

4.1 控制几何体的位置

      // 控制几何物体的位置
      cube.position.set(5, 0, 0);
      // 或直接通过 . 的方式修改
      cube.position.y = 5;

4.2 动态改变几何体的位置

      // 渲染
      function render() {
        renderer.render(scene, camera);

        // 每帧移动0.01
        cube.position.x -= 0.01;
        if (cube.position.x <= 0) {
          cube.position.x = 5;
        }

        // 浏览器渲染函数，会在下一帧自动调用
        requestAnimationFrame(render);
      }
      render();

4.3 控制几何体的缩放

      // 控制几何物体的缩放
      // cube.scale.x = 5
      cube.scale.set(2, 3, 2);

4.4 控制几何体的旋转

      // 控制几何体的旋转   45°
      cube.rotation.set(Math.PI / 4, 0, 0);

五、引入动画插件

• 引入gsap动画插件
• npm install gsap
• www.npmjs.com/package/gsa…

5.1 控制几何体移动和缩放

// 导入gsap动画插件
import gsap from "gsap";

// 控制几何动画   几何体x轴从 5 移动到 1 ，用时 5s
gsap.to(cube.position, {
    x: 1,
    duration: 5,
    repeat: -1, // -1 ：无限循环
    yoyo: true, // 往返循环
    delay:2, // 延迟2s
});
// 控制几何动画 几何体缩放到 5 用时 5s
gsap.to(cube.scale, { x: 5, duration: 5 });

5.2 动画事件

gsap.to(cube.position, {
x: 1,
duration: 5,
onComplete: () => {
  console.log("动画完成");
},
onStart: () => {
  console.log("动画开始");
},
});

5.3 控制动画停止/开始

  const animation = gsap.to(cube.position, {
    x: 1,
    duration: 5,
    repeat: -1, // -1 ：无限循环
    yoyo: true, // 往返循环
  });

  window.addEventListener("dblclick", () => {
    // 判断动画是否激活中
    if (animation.isActive()) {
      animation.pause(); // 停止动画
    } else {
     // animation.play(); // 开始动画
      animation.resume(); // 恢复
    }
  });

六、开启控制器阻尼

// 开启控制器阻尼感，让效果更加真实 注意：需在动画渲染处调用 .update()
orbitControls.enableDamping = true;

  // 渲染
  function render() {
    orbitControls.update();
    renderer.render(scene, camera);
    // 浏览器渲染函数，会在下一帧自动调用
    requestAnimationFrame(render);
  }
  render();
},