vue2.x引入threejs的實例代碼
vue2.x引入threejs
npm安裝
npm install three
使用指定版本:
npm install three@<版本號>
其他插件
因為本次開發(fā)需要引入3D模型,所以需要使用 MTLLoader
, OBJLoader
兩種加載器,因為開發(fā)需求和
版本問題, 最新版本自帶的加載器不能實現(xiàn)需求,所以需要額外引入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部分 -- 結(jié)束 -- 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()// 運行創(chuàng)建場景函數(shù) let mtlLoader = new MTLLoader() //創(chuàng)建MTLLoader實例 let objLoader = new OBJLoader() //創(chuàng)建OBJLoader實例 let k = width / height // 寬高比 let camera = new THREE.PerspectiveCamera( 60, k, 1, 2000) //創(chuàng)建相機,這個相機模擬人眼所看到的景象,近大遠小沒參數(shù)分別為: //fov — 攝像機視錐體垂直視野角度 //aspect — 攝像機視錐體長寬比 //near — 攝像機視錐體近端面 //far — 攝像機視錐體遠端面 camera.position.set( -500, 300, 300 )//設(shè)置相機位置 this.initDoor()//調(diào)用引入3D模型方法 this.initcao() //調(diào)用幾何圖形方法 //點光源 let point = new THREE.PointLight(0xffffff) point.position.set(800, 800, 2000); //光源位置 this.scene.add(point); //光源添加進場景 //環(huán)境光 let ambient = new THREE.AmbientLight(0xffffff); //設(shè)置環(huán)境光 this.scene.add(ambient) //講環(huán)境光加入場景 this.renderer = new THREE.WebGL1Renderer(); // 實例渲染器 this.renderer.setSize( width, height) //渲染器寬高 this.renderer.setClearColor(new THREE.Color('#07224e'), 1) //設(shè)置背景顏色 setTimeout(() => { document.getElementById('container').appendChild(this.renderer.domElement)//將渲染器添加進dom }, 500) this.animate()//調(diào)用動畫效果 this.controls = new OrbitControls(this.camera, this.renderer.domElement) //添加相機和渲染器到控制器,實現(xiàn)滑動 }, 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)格模型對象Mesh mesh.rotateX(-Math.PI / 2); this.scene.add(mesh); //網(wǎng)格模型添加到場景中 }, initDoor() { let that = this //后面回調(diào)會影響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 //調(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) //模型添加進場景 }, ) }) }, animate() { //這里自己寫點要對模型進行的操作 this.renderer.render(this.scene, this.camera); requestAnimationFrame(this.animate) //這里按幀更新畫面,大概一秒60次左右 }, }
強調(diào)
如果在開發(fā)中需要引入3D模型,模型文件應(yīng)放在與src
文件同級的static
下,引入方式應(yīng)該是 'static/door.mtl'
如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改,代碼如下:
.three_box { width: 1053px; height: 473px; >>> canvas:focus-visible { outline: 0px } }
到此這篇關(guān)于vue2.x引入threejs的文章就介紹到這了,更多相關(guān)vue2.x引入threejs內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝
這篇文章主要為大家介紹了Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09vue3響應(yīng)式Object代理對象的讀取示例詳解
這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對象的讀取示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08vue-cli 自定義指令directive 添加驗證滑塊示例
本篇文章主要介紹了vue-cli 自定義指令directive 添加驗證滑塊示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10一文讀懂vue動態(tài)屬性數(shù)據(jù)綁定(v-bind指令)
這篇文章主要介紹了vue動態(tài)屬性數(shù)據(jù)綁定(v-bind指令)的相關(guān)資料,文中講解非常細致,代碼幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07前端實現(xiàn)pdf預(yù)覽功能的全過程(基于vue)
這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)pdf預(yù)覽功能的相關(guān)資料,前端實現(xiàn)預(yù)覽最好的效果還是PDF,不會出現(xiàn)一些文字錯亂和亂碼的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09