一、引言

本文将介绍如何在Vue3项目中集成ThreeJS，并加载外部gltf格式的3D模型，以打造更具视觉冲击力和立体感的数据大屏展示。
可以去glbxz.com官方下载模型glb和gltf格式模型文件 http://glbxz.com
二、实践步骤

1. 项目初始化

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

bash
代码解读
复制代码
npm install three

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

bash
代码解读
复制代码
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的场景、相机、渲染器等对象。

javascript
代码解读
复制代码
// 省略了部分代码…

// 创建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模型。

javascript
代码解读
复制代码
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以实现模型的旋转、缩放和平移操作。

javascript
代码解读
复制代码
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元素作为渲染器的容器：

html
代码解读
复制代码

三、结论

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

作者：沈麽鬼
链接：https://juejin.cn/post/7427025640766226470
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。