vue3使用Three.js加載外部模型文件

1.安裝Three.js

yarn add three
npm install three

2.新建一個(gè)renderModel.js 用于處理Three.js相關(guān)邏輯

import * as THREE from 'three' //導(dǎo)入整個(gè) three.js核心庫
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader' 
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'
// 定義一個(gè) class類
class renderModel {
    	constructor(selector) {
    	    this.container = document.querySelector(selector)
		    // 相機(jī)
	    	this.camera
		    // 場景
		    this.scene
		    //渲染器
		    this.renderer
		    // 控制器
		    this.controls
		    // 模型
		    this.model    
		     //文件加載器類型
		    this.fileLoaderMap = {
			'glb': new GLTFLoader(),
			'fbx': new FBXLoader(),
			'gltf': new GLTFLoader(),
			'obj': new OBJLoader(),
		}
         }
         // 初始化加載模型方法
        init(){
         	return new Promise(async (reslove, reject) => {
			//初始化場景
			this.initScene()
			//初始化相機(jī)
			this.initCamera()
			//初始化渲染器
			this.initRender()
			// 添加物體模型 TODO：初始化時(shí)需要默認(rèn)一個(gè)  filePath:'threeFile/glb/glb-3.glb' 放在 vue項(xiàng)目中的public/threeFile文件下
			const load = await this.setModel({ filePath: 'threeFile/glb/glb-3.glb', fileType: 'glb',scale:0.5})
			//監(jiān)聽場景大小改變，跳轉(zhuǎn)渲染尺寸
			window.addEventListener("resize", this.onWindowResize.bind(this))
			//場景渲染
			this.sceneAnimation()
			reslove(load)
	   	  })
        }
        //創(chuàng)建場景
	initScene() {
        this.scene = new THREE.Scene()
		const texture = new THREE.TextureLoader().load(require('@/assets/image/view-4.png'))
		texture.mapping = THREE.EquirectangularReflectionMapping
		// texture.colorSpace = THREE.SRGBColorSpace
		this.scene.background = texture
		this.scene.environment = texture

	}
		// 創(chuàng)建相機(jī)
	initCamera() {
		const { clientHeight, clientWidth } = this.container
		this.camera = new THREE.PerspectiveCamera(45, clientWidth / clientHeight, 0.25, 100)
	}
	 // 創(chuàng)建渲染器
	initRender() {
		this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) //設(shè)置抗鋸齒
		//設(shè)置屏幕像素比
		this.renderer.setPixelRatio(window.devicePixelRatio)
		//渲染的尺寸大小
		const { clientHeight, clientWidth } = this.container
		this.renderer.setSize(clientWidth, clientHeight)
		//色調(diào)映射
		this.renderer.toneMapping = THREE.ACESFilmicToneMapping
		//曝光
		this.renderer.toneMappingExposure = 3
		this.renderer.shadowMap.enabled = true
		this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
		this.container.appendChild(this.renderer.domElement)
	}
	// 使用動(dòng)畫器不斷更新場景
	 sceneAnimation() {
		this.renderer.setAnimationLoop(this.render.bind(this))
	 }
     //渲染場景
	render(){
	  this.renderer.render(this.scene, this.camera)
	}
	//加載模型
	setModel({ filePath, fileType, scale,  position }) {
		return new Promise((resolve, reject) => {
			const loader = this.fileLoaderMap[fileType]
			loader.load(filePath, (result) => {
			  //加載不同類型的文件
				switch (fileType) {
					case 'glb':
						this.model = result.scene		
						break;
					case 'fbx':
						this.model = result
						break;
					case 'gltf':
						this.model = result.scene
						break;
					case 'obj':
						this.model = result
						break;
					default:
						break;
				}
				// 設(shè)置模型大小
				if (scale) {
					this.model.scale.set(scale, scale, scale);
				}
				// 設(shè)置模型位置 
				if (position) {
					const { x, y, z } = position
					this.model.position.set(x, y, z)
				}
				// 設(shè)置相機(jī)位置
				this.camera.position.set(0, 2, 6)
				// 設(shè)置相機(jī)坐標(biāo)系
				this.camera.lookAt(0, 0, 0)
	             // 將模型添加到場景中去   
				this.scene.add(this.model)
				resolve(true)
			}, () => {

			}, (err) => {
				console.log(err)
				reject()
			})
		})
	}
	
}

3.modelPage.vue 中使用頁面

<template>
     <div id="model" ref="model"></div>
</template>
<script setup>
import { onMounted} from "vue";
import renderModel from "./renderModel";
onMounted(async () => {
 const modelApi = new renderModel("#model");
 const load = await  modelApi.init();
 // load =true 表示加載完成
});
</script>

完整的代碼可參考:https://gitee.com/ZHANG_6666/Three.js3D

6.效果圖:
文章來源地址http://www.zghlxwxcb.cn/news/detail-550955.html

到了這里，關(guān)于Three.js加載外部glb,fbx,gltf,obj 模型文件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！