npm install three

npm install three@<版本號(hào)>

npm install three-obj-mtl-loader --save

//-- html部分 -- 開始 --
<div class="three_box" id="container">
</div>
//-- html部分 -- 結(jié)束 --

import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 控制器-控制相機(jī)運(yùn)行軌道
import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader' //項(xiàng)目中使用到.obj文件和.mtl文件,故引入

mounted() {
	let width = 1053	// dom寬度
	let height = 473	// dom高度
	
	this.scene = new THREE.Scene()// 運(yùn)行創(chuàng)建場(chǎng)景函數(shù)
	let mtlLoader = new MTLLoader() //創(chuàng)建MTLLoader實(shí)例
	let objLoader = new OBJLoader() //創(chuàng)建OBJLoader實(shí)例
	let k = width / height	// 寬高比
	let camera = new THREE.PerspectiveCamera( 60, k, 1, 2000) //創(chuàng)建相機(jī),這個(gè)相機(jī)模擬人眼所看到的景象,近大遠(yuǎn)小沒參數(shù)分別為:
	//fov — 攝像機(jī)視錐體垂直視野角度
	//aspect — 攝像機(jī)視錐體長(zhǎng)寬比
	//near — 攝像機(jī)視錐體近端面
	//far — 攝像機(jī)視錐體遠(yuǎn)端面
	camera.position.set( -500, 300, 300 )//設(shè)置相機(jī)位置
	this.initDoor()//調(diào)用引入3D模型方法
	this.initcao() //調(diào)用幾何圖形方法
	//點(diǎn)光源
	let point = new THREE.PointLight(0xffffff)
	point.position.set(800, 800, 2000); //光源位置
	this.scene.add(point);  //光源添加進(jìn)場(chǎng)景
	
	//環(huán)境光
	let ambient = new THREE.AmbientLight(0xffffff); //設(shè)置環(huán)境光
	this.scene.add(ambient)  //講環(huán)境光加入場(chǎng)景
	this.renderer = new THREE.WebGL1Renderer(); // 實(shí)例渲染器
	this.renderer.setSize( width, height) //渲染器寬高
	this.renderer.setClearColor(new THREE.Color('#07224e'), 1) //設(shè)置背景顏色
	setTimeout(() => {
	  document.getElementById('container').appendChild(this.renderer.domElement)//將渲染器添加進(jìn)dom
	}, 500)
	this.animate()//調(diào)用動(dòng)畫效果
	this.controls = new OrbitControls(this.camera, this.renderer.domElement) //添加相機(jī)和渲染器到控制器,實(shí)現(xiàn)滑動(dòng)
},
methods: {
	initcao() {
		let geometry = new THREE.BoxGeometry(3200, 1600, 8); //矩形平面
		let material = new THREE.MeshLambertMaterial({  // 配置樣式,包括顏色 透明度等
			  color: new THREE.Color('#bcbfc6'),
			  transparent: true,
			  opacity: 0.3,
			  side: THREE.DoubleSide
		});
		let mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對(duì)象Mesh
		mesh.rotateX(-Math.PI / 2);
		this.scene.add(mesh); //網(wǎng)格模型添加到場(chǎng)景中
	},
	initDoor() {
		let that = this //后面回調(diào)會(huì)影響this指向
		let mtlLoader = new MTLLoader()
		let objLoader = new OBJLoader();
		mtlLoader.load('static/door.mtl', function( material) { //引入模型.mtl文件,是3D模型的貼圖,如果不需要貼圖可以不使用,模型會(huì)只有一個(gè)框架
		  material.preload();
		  objLoader.setMaterials(material)
		  objLoader.load('static/door.obj', //引入模型.obj文件
		      function( obj) {
		          obj.position.z = -188  //調(diào)整模型位置
		          obj.position.x = -265 //調(diào)整模型位置
		          obj.position.y = 10 //調(diào)整模型位置
		          obj.rotateY(Math.PI / 2) //調(diào)整模型角度
		          obj.scale.set( 20, 20, 20 ) //調(diào)整模型放大縮小倍數(shù)
		          that.scene.add(obj) //模型添加進(jìn)場(chǎng)景
		      },
		  )
		})
	},
	animate() {
		//這里自己寫點(diǎn)要對(duì)模型進(jìn)行的操作
       this.renderer.render(this.scene, this.camera);
       requestAnimationFrame(this.animate) //這里按幀更新畫面,大概一秒60次左右
         
     }, 
}

.three_box {
      width: 1053px;
       height: 473px;
       >>> canvas:focus-visible {
           outline: 0px
       }
   }