一、引言
本文将介绍如何在Vue3项目中集成ThreeJS，并加载外部gltf格式的3D模型，以打造更具视觉冲击力和立体感的数据大屏展示。
二、实践步骤
- 项目初始化
首先，在Vue3项目中安装ThreeJS。使用npm或yarn进行安装：
bash
代码解读
复制代码
npm install three
同时，由于我们需要加载gltf格式的3D模型，还需要安装相关的加载器：
bash
代码解读
复制代码
npm install three/examples
- 准备gltf模型文件
GLTF（GL Transmission Format）是一种基于JSON的3D模型格式，用于描述3D模型的几何形状、纹理、材质和动画等信息。由于其跨平台性，GLTF模型可以在任何支持JSON的平台上使用，包括Web浏览器、移动设备、桌面应用程序等。
将gltf模型文件及其相关资源（如纹理图片）放置在Vue项目的public/model目录下。
- 创建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);
}
- 编写加载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);
});
}
- 添加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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
