vue2.x引入threejs _生活百科

@
目錄

vue2x引入threejs" rel="external nofollow noreferrer">vue2.x引入threejs
- npm安裝
- 使用指定版本:
  - 其他插件
- 實例
- 強調

vue2.x引入threejsnpm安裝npm install three
使用指定版本:npm install three@<版本號>
其他插件因為本次開發需要引入3D模型,所以需要使用 MTLLoader, OBJLoader兩種加載器,因為開發需求和版本問題, 最新版本自帶的加載器不能實現需求,所以需要額外引入three-obj-mtl-loader插件,并且threejs版本需要退到122版本;
npm安裝three-obj-mtl-loader
npm install three-obj-mtl-loader --save
實例

//-- html部分 -- 開始 --<div class="three_box" id="container"></div>//-- html部分 -- 結束 --import * as THREE from 'three';import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 控制器-控制相機運行軌道import { MTLLoader, OBJLoader } from 'three-obj-mtl-loader' //項目中使用到.obj文件和.mtl文件,故引入mounted() {	let width = 1053	// dom寬度	let height = 473	// dom高度	this.scene = new THREE.Scene()// 運行創建場景函數	let mtlLoader = new MTLLoader() //創建MTLLoader實例	let objLoader = new OBJLoader() //創建OBJLoader實例	let k = width / height	// 寬高比	let camera = new THREE.PerspectiveCamera( 60, k, 1, 2000) //創建相機,這個相機模擬人眼所看到的景象,近大遠小沒參數分別為:	//fov — 攝像機視錐體垂直視野角度	//aspect — 攝像機視錐體長寬比	//near — 攝像機視錐體近端面	//far — 攝像機視錐體遠端面	camera.position.set( -500, 300, 300 )//設置相機位置	this.initDoor()//調用引入3D模型方法	this.initcao() //調用幾何圖形方法	//點光源	let point = new THREE.PointLight(0xffffff)	point.position.set(800, 800, 2000); //光源位置	this.scene.add(point);//光源添加進場景	//環境光	let ambient = new THREE.AmbientLight(0xffffff); //設置環境光	this.scene.add(ambient)//講環境光加入場景	this.renderer = new THREE.WebGL1Renderer(); // 實例渲染器	this.renderer.setSize( width, height) //渲染器寬高	this.renderer.setClearColor(new THREE.Color('#07224e'), 1) //設置背景顏色	setTimeout(() => {document.getElementById('container').appendChild(this.renderer.domElement)//將渲染器添加進dom	}, 500)	this.animate()//調用動畫效果	this.controls = new OrbitControls(this.camera, this.renderer.domElement) //添加相機和渲染器到控制器,實現滑動},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); //網格模型對象Meshmesh.rotateX(-Math.PI / 2);this.scene.add(mesh); //網格模型添加到場景中	},	initDoor() {let that = this //后面回調會影響this指向let mtlLoader = new MTLLoader()let objLoader = new OBJLoader();mtlLoader.load('static/door.mtl', function( material) { //引入模型.mtl文件,是3D模型的貼圖,如果不需要貼圖可以不使用,模型會只有一個框架material.preload();objLoader.setMaterials(material)objLoader.load('static/door.obj', //引入模型.obj文件function( obj) {obj.position.z = -188//調整模型位置obj.position.x = -265 //調整模型位置obj.position.y = 10 //調整模型位置obj.rotateY(Math.PI / 2) //調整模型角度obj.scale.set( 20, 20, 20 ) //調整模型放大縮小倍數that.scene.add(obj) //模型添加進場景},)})	},	animate() {//這里自己寫點要對模型進行的操作this.renderer.render(this.scene, this.camera);requestAnimationFrame(this.animate) //這里按幀更新畫面,大概一秒60次左右},}

強調如果在開發中需要引入3D模型,模型文件應放在與src文件同級的static下,引入方式應該是 'static/door.mtl'
如果在開發過程中出現threejs生成的canvas出現外邊框,只需要用css樣式修改,代碼如下:
.three_box {width: 1053px;height: 473px;>>> canvas:focus-visible {outline: 0px}}threejs官方文檔
【vue2.x引入threejs】