如何在 Vue.js 中集成 Three.js —— 创建一个旋转的 3D 立方体

在这篇文章中,我将向大家展示如何将 Three.js 与 Vue.js 结合,创建一个简单的 3D 场景,并展示一个旋转的立方体。通过这个简单的示例,你将学习到如何在 Vue 项目中集成 Three.js,以及如何创建动态的 3D 内容。

1. 安装 Three.js

首先,我们需要在项目中安装 Three.js。你可以使用 npm 或 yarn 来安装它。打开终端,进入你的 Vue 项目目录,运行以下命令:

javascript 复制代码
npm i three
2. 创建 Vue 组件

接下来,我们创建一个 Vue 组件来渲染 3D 立方体。在这个组件中,我们将通过 Three.js 来创建场景、相机、渲染器,以及一个旋转的立方体。

javascript 复制代码
<template>
  <div ref="threeCanvas" style="width: 100%; height: 100%"></div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as THREE from 'three';

export default {
  name: 'ThreeExample',
  setup() {
    const threeCanvas = ref(null);

    onMounted(() => {
      // 创建一个 Three.js 场景
      const scene = new THREE.Scene();

      // 创建透视相机
      const camera = new THREE.PerspectiveCamera(
        75, // 视野角度
        window.innerWidth / window.innerHeight, // 宽高比
        0.1, // 最近可视距离
        1000 // 最远可视距离
      );

      // 创建 WebGL 渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器大小
      threeCanvas.value.appendChild(renderer.domElement); // 将渲染器添加到 DOM

      // 创建一个绿色的立方体
      const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建立方体几何体
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 创建材质
      const cube = new THREE.Mesh(geometry, material); // 创建网格对象(立方体)
      scene.add(cube); // 将立方体添加到场景中

      // 设置相机的位置
      camera.position.z = 5;

      // 动画渲染函数
      const animate = function () {
        requestAnimationFrame(animate); // 请求下一帧动画

        // 旋转立方体
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

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

      animate(); // 启动动画

      // 处理窗口尺寸变化
      const handleResize = () => {
        const width = window.innerWidth;
        const height = window.innerHeight;

        // 更新渲染器大小
        renderer.setSize(width, height);

        // 更新相机的纵横比
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
      };

      // 监听窗口大小变化
      window.addEventListener('resize', handleResize);

      // 清理资源
      onBeforeUnmount(() => {
        window.removeEventListener('resize', handleResize);
        renderer.dispose();
      });
    });

    return {
      threeCanvas
    };
  }
};
</script>

<style scoped>
/* 可以根据需要添加一些样式 */
</style>
3. 代码解析
3.1 创建 Three.js 场景和相机
  • scene:我们首先创建了一个 Three.js 的场景,它是所有 3D 对象的容器。

  • camera:然后我们创建了一个透视相机,设置了视野角度、纵横比、最近可视距离和最远可视距离。相机的位置会影响我们看到的场景。

3.2 创建渲染器

我们使用了 THREE.WebGLRenderer 创建了一个 WebGL 渲染器,并通过 setSize 方法设置了渲染器的宽度和高度,使得渲染器能够适应浏览器窗口的尺寸。

3.3 创建 3D 立方体

接着,我们创建了一个 THREE.BoxGeometry 立方体几何体,并为它指定了一个绿色的材质 THREE.MeshBasicMaterial。最后,通过 THREE.Mesh 将几何体和材质组合成一个 3D 物体,并将其添加到场景中。

3.4 动画效果

为了让立方体旋转,我们创建了一个 animate 函数,并通过 requestAnimationFrame 来使动画保持连续运行。在每一帧中,立方体会顺时针旋转,效果非常流畅。

3.5 处理窗口尺寸变化

为了响应窗口尺寸变化,我们监听了 resize 事件。当窗口大小发生变化时,我们会调整渲染器的尺寸,并重新计算相机的纵横比,以确保画面不会变形。

3.6 组件销毁时的清理工作

当组件销毁时,我们会移除 resize 事件监听器,并释放渲染器的资源,以避免内存泄漏。

4. 结果展示

当你在页面中加载这个 Vue 组件时,你会看到一个绿色的立方体,它会随着页面加载而旋转。并且当你调整浏览器窗口大小时,立方体的显示效果会自动调整。

相关推荐
paopaokaka_luck1 小时前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9492 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_2 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔5 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang5 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔5 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js