Three.js + Vue3 入门与进阶教程

2023-07-31 10:35:34

基本设置

在使用 Three.js 加上 Vue3 创建 3D 图形应用前，先确保已安装必要的依赖项。需要安装 three 和 vue。

安装依赖

可以通过 npm 或者 yarn 来管理这些包：

npm install three vue @vue/cli

或者使用 yarn:

yarn add three vue @vue/cli

创建 3D 场景基础架构

在 Vue3 中集成 Three.js 需要一些基本的场景设置，如创建渲染器、相机以及一个简单的立方体。

设置渲染器和相机

首先，在 Vue 组件中引入必要的库，然后初始化三个主要对象：scene, camera, 和 renderer。这些是 Three.js 构建 3D 场景的基础组件。

<template>
  <div ref="container"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  name: "ThreeVue",
  mounted() {
    this.initThree();
  },
  methods: {
    initThree() {
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      
      const renderer = new THREE.WebGLRenderer({antialias: true});
      renderer.setSize(window.innerWidth, window.innerHeight);

      this.$refs.container.appendChild(renderer.domElement);
      camera.position.z = 5;

      // 添加光源
      var light = new THREE.AmbientLight(0x404040); // soft white light
      scene.add(light);

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      function animate() {
        requestAnimationFrame(animate);
        
        // 旋转立方体
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      }

      animate();
    }
  }
}
</script>

原理解释

在上面的代码中，我们创建了一个简单的立方体，并将其添加到场景中。通过requestAnimationFrame()不断调用渲染函数来更新画面。

进阶功能实现

随着应用复杂性的增加，需要处理更复杂的交互和动态效果，例如响应式窗口大小调整、用户输入以及物理模拟等。

响应式窗口尺寸调整

为了使应用程序在不同屏幕尺寸上表现良好，需要监听窗口的 resize 事件，并根据新的宽度和高度重新设置相机和渲染器的参数。

mounted() {
    this.initThree();
    window.addEventListener('resize', this.onWindowResize);
},
methods: {
    onWindowResize(event) {
      const width = event.target.innerWidth;
      const height = event.target.innerHeight;

      this.camera.aspect = width / height;
      this.renderer.setSize(width, height);

      this.camera.updateProjectionMatrix();
    }
}

用户输入与交互

Three.js 提供了多种方式来处理用户输入，如键盘和鼠标事件。Vue3 的事件绑定机制使得处理这类交互变得简单。

mounted() {
  window.addEventListener('keydown', this.handleKeyDown);
},
methods: {
  handleKeyDown(event) {
    if (event.key === 'ArrowRight') {
      // 向右移动相机或其他对象
    }
  },
}

物理模拟

使用 Three.js 的 Cannon.js 或者其他物理引擎，可以为应用添加真实的物理交互效果。

import * as CANNON from 'cannon';

// 创建世界和重力
var world = new CANNON.World();
world.gravity.set(0, -9.82, 0);

// 创建地面
var groundShape = new CANNON.Plane();
groundShape.material = new CANNON.Material('ground');
groundShape.quaternion.setFromAxisAngle(new CANNON.Vec3(-1, 0, 0), Math.PI / 2);
world.addBody(groundShape);