Three.js + Vue 处理glb文件过大问题(DRACOLoader加载压缩glb)
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
export default {
name: 'ModelViewer',
props: {
modelPath: String,
},
mounted() {
const container = document.getElementById('container');
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 5;
const controls = new THREE.OrbitControls(camera, renderer.domElement);
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('path/to/draco/gltf/decoder/');
dracoLoader.setDecoderConfig({ type: 'js' });
dracoLoader.preload();
const gltfLoader = new GLTFLoader();
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.load(this.modelPath, (gltf) => {
scene.add(gltf.scene);
gltf.scene.position.set(0, -2, 0);
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
controls.update();
}
animate();
}, undefined, (error) => {
console.error(error);
});
}
}
</script>
<style>
#container {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>
在这个代码实例中,我们首先导入了必要的Three.js组件,并在mounted
生命周期钩子中初始化了场景、摄像机、渲染器和控件。然后,我们创建了一个DRACOLoader
实例,并通过其setDecoderPath
方法设置了Decoder的路径。通过gltfLoader.load
方法加载glTF模型,并在加载成功后将其添加到场景中。如果加载过程中出现错误,会通过回调函数打印错误信息。最后,我们启动了渲染循环,并在组件销毁时处理相关清理工作。这个例子展示了如何在Vue中处理和加载glb文件,并处理由于文件过大导致的加载问题。
评论已关闭