关于three.js在vue项目中引入GLTF文件

点击前往，关于three的基础使用，这里只写关于GLTFLoader在vue的使用，其他类型的3D模型可使用其他loader，three.js中文文档
点击这里有免费的gltf文件下载
注意！！！！！！
项目中如使用mock.js，引入gltf文件会失效，因为mock会拦截XhrHttpRequest并重写，导致加载不了

首先，引入GLTFLoader

	import * as THREE from "three";
	import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
	import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

下载的gltf文件放在public文件下，例如我的引入为static/gltf/ford/scene.gltf，最后add到场景scene中即可。
如果不使用vue，直接相对路径即可，需要服务才能正常显示，例如vsCode：右键点击html文件选择open in live server

	this.scene = new THREE.Scene();
	const gltfLoader = new GLTFLoader();
	gltfLoader.load("static/gltf/ford/scene.gltf", (gltf) => {
      let model = gltf.scene;
      model.scale.set(80, 80, 80); //缩放
      model.position.copy(new THREE.Vector3(0, -350, 0)); //基于原点的位置，没有需求改为0即可
      model.rotation.copy(new THREE.Euler(0, Math.PI + 0.6, 0)); //旋转，没有需求改为0即可
      this.scene.add(model);
    });

加载gltf文件请求如此即代表成功

可能会出现3D模型太小，或者模型为黑色在背景中看不到的情况，可添加辅助线定位，并添加环境光源或者纹理

  var axesHelper = new THREE.AxesHelper(100);
  this.scene.add(axesHelper);

效果图，如果需要源码，请留言联系我

文末福利

戳一戳去查看： 我的省钱攻略