Vue3数据大屏 ThreeJS 3D模型加载与展示实践

一、引言

本文将介绍如何在Vue3项目中集成ThreeJS，并加载外部gltf格式的3D模型，以打造更具视觉冲击力和立体感的数据大屏展示。

二、实践步骤

1. 项目初始化

首先，在Vue3项目中安装ThreeJS。使用npm或yarn进行安装：

npm install three

同时，由于我们需要加载gltf格式的3D模型，还需要安装相关的加载器：

npm install three/examples

2. 准备gltf模型文件

GLTF（GL Transmission Format）是一种基于JSON的3D模型格式，用于描述3D模型的几何形状、纹理、材质和动画等信息。由于其跨平台性，GLTF模型可以在任何支持JSON的平台上使用，包括Web浏览器、移动设备、桌面应用程序等。

将gltf模型文件及其相关资源（如纹理图片）放置在Vue项目的public/model目录下。

3. 创建ThreeJS场景

在Vue3组件中，创建一个新的ThreeJS场景。在组件的mounted钩子函数中，初始化ThreeJS的场景、相机、渲染器等对象。

// 省略了部分代码...  
  
// 创建ThreeJS场景  
const scene = new THREE.Scene();  
  
// 设置相机  
const camera = new THREE.PerspectiveCamera(4, window.innerWidth / window.innerHeight, 1, 1000);  
camera.position.set(0, 0, 100);  
  
// 设置渲染器  
const renderer = new THREE.WebGLRenderer({ antialias: true });  
renderer.setSize(window.innerWidth, window.innerHeight);  
renderer.outputEncoding = THREE.sRGBEncoding;  
  
// 添加窗口调整大小事件监听器  
window.addEventListener('resize', onWindowResize, false);  
  
// 省略了部分代码...  
  
function onWindowResize() {  
    camera.aspect = window.innerWidth / window.innerHeight;  
    camera.updateProjectionMatrix();  
    renderer.setSize(window.innerWidth, window.innerHeight);  
}

4. 编写加载3D模型的方法

使用GLTFLoader加载gltf格式的3D模型。

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';  
  
async function loadScene(url) {  
    const loader = new GLTFLoader();  
    loader.load(url, (gltf) => {  
        scene.add(gltf.scene);  
        gltf.scene.position.set(0, -10, 0);  
        gltf.scene.scale.set(0.5, 0.5, 0.5);  
  
        // 添加光源  
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);  
        scene.add(ambientLight);  
  
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);  
        directionalLight.position.set(10, 10, 10);  
        scene.add(directionalLight);  
    });  
}

5. 添加3D模型对象并渲染场景

在mounted钩子函数中调用loadScene方法，将3D模型加载到场景中，并设置OrbitControls以实现模型的旋转、缩放和平移操作。

import { onMounted, ref } from 'vue';  
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';  
  
// 省略了部分代码...  
  
onMounted(async () => {  
    const canvas = ref(null);  
      
    // 将渲染器的DOM元素添加到Vue组件的模板中  
    if (canvas.value) {  
        canvas.value.appendChild(renderer.domElement);  
    }  
  
    // 加载3D模型  
    loadScene('/model/factory/scene.gltf');  
  
    // 设置OrbitControls  
    const controls = new OrbitControls(camera, renderer.domElement);  
    controls.enableDamping = true; // 阻尼效果  
    controls.dampingFactor = 0.25;  
    controls.screenSpacePanning = false;  
    controls.maxPolarAngle = Math.PI / 2;  
  
    // 渲染循环  
    function animate() {  
        requestAnimationFrame(animate);  
        controls.update();  
        renderer.render(scene, camera);  
    }  
    animate();  
});

在Vue组件的模板中，添加一个div元素作为渲染器的容器：

<template>  
  <div ref="canvas" class="three-canvas"></div>  
</template>  
  
<style scoped>  
.three-canvas {  
  width: 100%;  
  height: 100vh;  
  overflow: hidden;  
}  
</style>

三、结论

通过本文的实践步骤，我们成功地在Vue3项目中集成了ThreeJS，并加载了gltf格式的3D模型。结合Vue3的响应式机制和ThreeJS的强大3D渲染能力，我们可以创建出具有生动、立体展示效果的数据大屏。这不仅提升了数据的可读性，还增强了用户的交互体验。