Vue3.0 + TypeScript + Three.js 打造炫酷 3D 效果

2024-01-21 13:41:56

前言

在当今快速发展的技术领域，3D 图形已成为塑造数字体验的关键因素，从引人入胜的视频游戏到沉浸式虚拟现实。随着 Web 技术的不断进步，WebGL（一种用于在 Web 浏览器中渲染交互式 2D 和 3D 图形的 API）已成为构建 3D 体验的强大工具。

在本文中，我们将深入探讨如何使用 Vue3.0、TypeScript 和 Three.js 来构建一个简单的 3D 演示。Vue3.0 是一个流行的 JavaScript 框架，以其响应性和代码可维护性而闻名。TypeScript 是 JavaScript 的超集，它提供了类型检查和代码重构等高级功能。Three.js 是一个用于创建和操作 3D 场景的 JavaScript 库。

使用 Vue3.0、TypeScript 和 Three.js 构建 3D 演示

项目设置

首先，让我们设置我们的项目。创建一个新的 Vue3.0 项目，并安装 TypeScript 和 Three.js。

# 使用 Vue CLI 创建一个新的 Vue3.0 项目
vue create my-3d-project

# 安装 TypeScript
npm install typescript -D

# 安装 Three.js
npm install three

创建场景

在我们的 Vue 组件中，我们将创建一个场景，这是 Three.js 中 3D 对象的容器。

import * as THREE from 'three';

export default {
  created() {
    // 创建一个场景
    this.scene = new THREE.Scene();
  }
};

添加相机

接下来，我们需要添加一个相机，它将决定场景中对象的视角。

import * as THREE from 'three';

export default {
  created() {
    // 创建一个透视相机
    this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  }
};

添加渲染器

渲染器负责将场景中的对象渲染到屏幕上。

import * as THREE from 'three';

export default {
  created() {
    // 创建一个 WebGL 渲染器
    this.renderer = new THREE.WebGLRenderer();
  }
};

添加立方体

现在，让我们向场景中添加一个立方体。

import * as THREE from 'three';

export default {
  created() {
    // 创建一个立方体几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);

    // 创建一个材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

    // 创建一个网格对象
    this.cube = new THREE.Mesh(geometry, material);

    // 将网格添加到场景中
    this.scene.add(this.cube);
  }
};

动画

为了让立方体动起来，我们需要在每个帧上更新场景。

export default {
  mounted() {
    this.animate();
  },

  methods: {
    animate() {
      // 旋转立方体
      this.cube.rotation.x += 0.01;
      this.cube.rotation.y += 0.01;

      // 渲染场景
      this.renderer.render(this.scene, this.camera);

      // 下一帧继续动画
      requestAnimationFrame(this.animate);
    }
  }
};