欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.x引入threejs的實例代碼

 更新時間:2022年09月28日 09:54:31   作者:白黑besos  
這篇文章主要介紹了vue2.x引入threejs,如果在開發(fā)過程中出現(xiàn)threejs生成的canvas出現(xiàn)外邊框,只需要用css樣式修改,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

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
       }
   }

threejs官方文檔

到此這篇關(guān)于vue2.x引入threejs的文章就介紹到這了,更多相關(guān)vue2.x引入threejs內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue項目中最新用到的一些實用小技巧

    Vue項目中最新用到的一些實用小技巧

    這篇文章主要給大家介紹了關(guān)于Vue項目中最新用到的一些實用小技巧,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-11-11
  • Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝

    Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝

    這篇文章主要為大家介紹了Electron?store及shareObject進程間數(shù)據(jù)交互存儲功能封裝示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • 使用vue cli4.x搭建vue項目的過程詳解

    使用vue cli4.x搭建vue項目的過程詳解

    這篇文章主要介紹了使用vue cli4.x搭建vue項目的過程,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-05-05
  • 利用vscode編寫vue的簡單配置詳解

    利用vscode編寫vue的簡單配置詳解

    這篇文章主要給大家介紹了利用vscode編寫vue簡單配置的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。
    2017-06-06
  • 基于Vue結(jié)合ElementUI的換膚解決方案

    基于Vue結(jié)合ElementUI的換膚解決方案

    本文將介紹幾種基于Vue、Element-UI的換膚實現(xiàn)方案,力爭通俗易懂,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue3響應(yīng)式Object代理對象的讀取示例詳解

    vue3響應(yīng)式Object代理對象的讀取示例詳解

    這篇文章主要為大家介紹了vue3響應(yīng)式Object代理對象的讀取示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • vue-cli 自定義指令directive 添加驗證滑塊示例

    vue-cli 自定義指令directive 添加驗證滑塊示例

    本篇文章主要介紹了vue-cli 自定義指令directive 添加驗證滑塊示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • 一篇Vue、React重點詳解大全

    一篇Vue、React重點詳解大全

    這篇文章主要介紹了一篇Vue、React重點詳解大全,文章內(nèi)容詳細,通過案例可以更好的理解其相關(guān)知識,需要的朋友可以參考下
    2023-01-01
  • 一文讀懂vue動態(tài)屬性數(shù)據(jù)綁定(v-bind指令)

    一文讀懂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)

    前端實現(xiàn)pdf預(yù)覽功能的全過程(基于vue)

    這篇文章主要給大家介紹了關(guān)于前端實現(xiàn)pdf預(yù)覽功能的相關(guān)資料,前端實現(xiàn)預(yù)覽最好的效果還是PDF,不會出現(xiàn)一些文字錯亂和亂碼的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-09-09

最新評論