VUE项目引入Threejs加载模型文件

资源引入

npm i three-js

组件内使用

引入：

import * as THREE from "three"; //引入Threejs
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

首先，创建初始化方法：

init() {
	this.scene = new THREE.Scene();
	this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
	this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
	this.light.position.set(50, 200, 100);
	this.light.position.multiplyScalar(0.3);
	this.scene.add(this.light);
	/**
	* 相机设置
    */
    let container = document.getElementById("threeContainer");//显示3D模型的容器
    this.camera = new THREE.PerspectiveCamera(
    	70,
        container.clientWidth / container.clientHeight,
        0.01,
        10
      );
    this.camera.position.z = 1;
    /**
       * 创建渲染器对象
       */
    this.renderer = new THREE.WebGLRenderer({ alpha: true });
    this.renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(this.renderer.domElement);
    //创建控件对象
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    
}

外部模型加载函数：

loadGltf() {
	let self = this;
	let loader = new GLTFLoader();
	//load一个测试模型路径：public/model/zhuozi2.gltf
	loader.load("/model/zhuozi2.gltf", function(gltf) {
		self.isLoading = false;//关闭载入中效果
		self.mesh = gltf.scene;
		self.mesh.scale.set(0.4, 0.4, 0.4);//设置大小比例
		self.mesh.position.set(0, 0, 0);//设置位置
		self.scene.add(self.mesh); // 将模型引入three、
		self.animate();
		});
	}

动画效果：

animate() {
   if (this.mesh) {
     requestAnimationFrame(this.animate);

     // this.mesh.rotation.x += 0.01;
     this.mesh.rotation.y += 0.004;
     this.renderer.render(this.scene, this.camera);
   }
 }