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

news2025/11/1 2:21:20

安装基本依赖

// 注意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>