Vue集成three.js，加载glb、gltf类型的3d模型

安装基本依赖

// 注意OrbitControls要加{}，注意路径是jsm
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’;
// import { dat } from ‘three/examples/jsm/controls/dat.gui.js’;
// dat gui这个插件，是另外自己下载的，threejs的安装包里没有这个
// dat gui组件能够方便地改变某些值，并快速预览这些值的改变所产生的变化
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

创建一个模版容器

<template><div><!-- 本案例演示导入模型 --><div id="container" /></div></template>

初始化相机、场景

init() {
const container = document.getElementById(‘container’);
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 特别注意，相机的位置要大于几何体的尺寸
this.camera.position.z = -10;
this.scene = new THREE.Scene();
this.renderer = new THREE.WebGLRenderer({
// 抗锯齿性
antialias: true
});
// 设置背景色
this.renderer.setClearColor(‘#428bca’, 1.0);
this.renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(this.renderer.domElement);

// 环境光不能用来投射阴影，因为它没有方向。
var ambienLight = new THREE.AmbientLight(0xcccccc);
this.scene.add(ambienLight);
// 初始化轨道控制器
// 还需要配合animate，不断循环渲染，达到用鼠标旋转物体的作用。
this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
// 窗口大小自适应
window.addEventListener(‘resize’, this.onWindowResize, false);
},

加载glb文件

  loadModel() {var loader = new GLTFLoader();// 路径要特别注意，默认是从public读取的，模型文件必须放在public下，并且路径前的public要省略loader.load('/glb/glb-3.glb', gltf => {// 设置模型尺寸this.model = gltf.scene;this.model.scale.set(5, 5, 5);this.model.position.y = -5;this.scene.add(this.model);}, undefined, error => {console.error(error);});}

glb文件链接https://sketchfab.com/tags/glb

完整代码

<template><div><!-- 本案例演示导入模型 --><div id="container" /></div></template><script>
import * as THREE from 'three';
// 注意OrbitControls要加{}，注意路径是jsm
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// import { dat } from 'three/examples/jsm/controls/dat.gui.js';
// dat gui这个插件，是另外自己下载的，threejs的安装包里没有这个
// dat gui组件能够方便地改变某些值，并快速预览这些值的改变所产生的变化
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';export default {name: 'Example',data() {return {scene: null,renderer: null,camera: null,orbitControls: null,model: null};},mounted() {this.init();this.loadModel();this.animate();},// 后续还要在beforeDestory中进行销毁beforeDestroy() {this.scene = null;this.renderer = null;this.camera = null;this.orbitControls = null;this.model = null;},methods: {init() {const container = document.getElementById('container');this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);// 特别注意，相机的位置要大于几何体的尺寸this.camera.position.z = -10;this.scene = new THREE.Scene();this.renderer = new THREE.WebGLRenderer({// 抗锯齿性antialias: true});// 设置背景色this.renderer.setClearColor('#428bca', 1.0);this.renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(this.renderer.domElement);// 环境光不能用来投射阴影，因为它没有方向。var ambienLight = new THREE.AmbientLight(0xcccccc);this.scene.add(ambienLight);// 初始化轨道控制器// 还需要配合animate，不断循环渲染，达到用鼠标旋转物体的作用。this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);// 窗口大小自适应window.addEventListener('resize', this.onWindowResize, false);},animate() {setTimeout(() => {this.model.rotation.x += 0.01;this.model.rotation.y += 0.01;this.model.rotation.z += 0.01;}, 500);requestAnimationFrame(this.animate);this.renderer.render(this.scene, this.camera);},onWindowResize() {this.camera.aspect = window.innerWidth / window.innerHeight;this.camera.updateProjectionMatrix();this.renderer.setSize(window.innerWidth, window.innerHeight);},loadModel() {var loader = new GLTFLoader();// 路径要特别注意，默认是从public读取的，模型文件必须放在public下，并且路径前的public要省略loader.load('/glb/glb-3.glb', gltf => {// 设置模型尺寸this.model = gltf.scene;this.model.scale.set(5, 5, 5);this.model.position.y = -5;this.scene.add(this.model);}, undefined, error => {console.error(error);});}}
};
</script><style scoped>#container {height: 100%;}</style>