【threejs】视角切换

视角切换

点击按钮，让相机视角切换到对应的位置，并且使控制器更改观察目标，使用 GSAP 动画库完成带有动画的视角切换效果。

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<template>
  <div class="btn-wrap">
    <button @click="init3D.angleOrigin()">原始 视角</button>
    <button @click="init3D.angle1()">红色立方体 视角</button>
    <button @click="init3D.angle2()">绿色立方体 视角</button>
    <button @click="init3D.angle3()">蓝色立方体 视角</button>
  </div>
  <div ref="threeContainer" class="three-container"></div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { BaseThree } from "@/common/three/BaseThree.js";
  import * as THREE from "three";
  import { gsap } from "gsap";

  const threeContainer = ref(null);

  class Init3D extends BaseThree {
    constructor(dom) {
      super(dom);
      this.createCube();
    }
    // 创建三个立方体
    createCube() {
      const geometry = new THREE.BoxGeometry(1, 1, 1);
      const material1 = new THREE.MeshBasicMaterial({ color: 0xff0000 });
      const material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const material3 = new THREE.MeshBasicMaterial({ color: 0x0000ff });

      this.cube1 = new THREE.Mesh(geometry, material1);
      this.cube1.position.x = -6;
      this.scene.add(this.cube1);

      this.cube2 = new THREE.Mesh(geometry, material2);
      this.cube2.position.x = 6;
      this.scene.add(this.cube2);

      this.cube3 = new THREE.Mesh(geometry, material3);
      this.cube3.position.z = -6;
      this.scene.add(this.cube3);

      this.animate(() => {
        this.cube1.rotation.x += 0.05;
        this.cube2.rotation.y += 0.05;
        this.cube3.rotation.z += 0.05;
      });
    }
    // 改变视角
    checkAngle(targetPosition, targetMesh) {
      gsap.to(this.camera.position, {
        ...targetPosition,
        duration: 1,
      });
      gsap.to(this.controls.target, {
        ...targetMesh.position,
        duration: 1,
      });
    }
    // 原始视角
    angleOrigin() {
      gsap.to(this.camera.position, {
        ...this.cameraOriginPosition,
        duration: 1,
      });
      gsap.to(this.controls.target, {
        ...this.orbitControlsTarget,
        duration: 1,
      });
    }
    // 视角1
    angle1() {
      this.checkAngle({ x: 1, y: 2, z: 3 }, this.cube1);
    }
    // 视角2
    angle2() {
      this.checkAngle({ x: 3, y: 2, z: 5 }, this.cube2);
    }
    // 视角3
    angle3() {
      this.checkAngle({ x: 4, y: 2, z: -2 }, this.cube3);
    }
  }

  let init3D;
  onMounted(() => {
    init3D = new Init3D(threeContainer.value);
  });
</script>

<style scoped>
  .three-container {
    width: 100vw;
    height: calc(100vh - 20px);
  }
  .btn-wrap {
    position: fixed;
    top: 30px;
    left: 0;
  }

  .btn-wrap button {
    font-size: 18px;
  }
  .btn-wrap button:hover {
    color: #00f;
  }

  .btn-wrap button + button {
    margin-left: 10px;
  }
</style>

BaseThree.js （基础的 threejs 场景元素封装）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

export class BaseThree {
  constructor(dom) {
    this.cameraOriginPosition = new THREE.Vector3(0, 5, 5);
    this.orbitControlsTarget = new THREE.Vector3(0, 0, 0);
    this.dom = dom;
    this.createScene();
    this.createCamera();
    this.createRenderer();
    this.createControls();
    this.createHelpers();
    this.animate();
  }
  // 场景
  createScene() {
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.CubeTextureLoader().setPath("/images/skyBox6/").load(["posx.jpg", "negx.jpg", "posy.jpg", "negy.jpg", "posz.jpg", "negz.jpg"]);
  }
  // 相机
  createCamera() {
    this.camera = new THREE.PerspectiveCamera(75, this.dom.clientWidth / this.dom.clientHeight, 0.1, 1000);
    this.camera.position.set(...this.cameraOriginPosition);
  }
  // 渲染器
  createRenderer() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(this.dom.clientWidth, this.dom.clientHeight);
    this.dom.appendChild(this.renderer.domElement);
  }
  // 控制器
  createControls() {
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.target.set(...this.orbitControlsTarget);
    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.1;
  }
  // 辅助工具
  createHelpers() {
    const axesHelper = new THREE.AxesHelper(50);
    const gridHelper = new THREE.GridHelper(100, 100, 0x0000ff, 0x111111);
    this.scene.add(axesHelper, gridHelper);
  }
  // 动画函数
  animate(callback) {
    const _animate = () => {
      requestAnimationFrame(_animate);
      if (typeof callback === "function") callback();
      this.controls.update();
      this.renderer.render(this.scene, this.camera);
    };
    _animate();
  }
}

效果

视角切换