這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
本文說明
本文主要簡單介紹了，在Vue3.x專案中如何簡單的使用Three.js，匯入PCD三維模型檔案，
模型顯示
專案實作
第一步
首先創建一個vue3.x，的專案，然后需要先有一個 .pcd三維模型檔案，如果有的話，將三維點云檔案放在如下圖的檔案夾里，如果沒有的話，百度云盤（鏈接：pan.baidu.com/s/1TM2gKCep… ）
第二步
在安裝Three.js前，需要安裝Babel，來編譯ES6語法，
參考：
vue安裝babel-polyfill插件，解決低版本瀏覽器不支持ES6新語法的問題
www.cnblogs.com/chenyingyin…
vuecli3 如何使用babel
www.csdn.net/tags/MtTaMg…
好像也可以在創建專案的時候，安裝Babel
vue create vue3-test
第三步
需要在vue3.x專案中安裝Three.js
npm install [email protected] npm install three-orbit-controls npm i --save three-css2drender
依次安裝，也可以一起安裝
npm install --save [email protected] three-orbit-controls three-css2drender
第四步
在專案中使用，以下是整個完整代碼
<template>
<div style="height: 100%; width: 100%">
<div id="three" style="height: 100%; width: 100%"></div>
</div>
</template>
<script>
// 引入Three.js
import * as THREE from "three";
// 引入PCD加載器
import { PCDLoader } from "three/examples/jsm/loaders/PCDLoader.js"; // 注意是examples/jsm
// 引入模型控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js"; // 放大縮小旋轉等控制操作
// 創建一個時鐘物件Clock
var clock = new THREE.Clock();
// 設定渲染頻率為30FBS，也就是每秒呼叫渲染器render方法大約30次
var FPS = 30;
var renderT = 1 / FPS; //單位秒 間隔多長時間渲染渲染一次
// 宣告一個變數表示render()函式被多次呼叫累積時間
// 如果執行一次renderer.render，timeS重新置0
var timeS = 0;
export default {
components: {},
data() {
return {
animationId: null,
elem: null,
scene: null,
// mesh: null, //網格模型物件
camera: null, //相機物件
renderer: null, //渲染器物件
loader: null,
controls: null,
publicPath: process.env.BASE_URL // public
};
},
beforeDestroy() {
this.destroyModel();
},
created() {},
mounted() {
// 初始化模型
this.initModel(`${this.publicPath}static/models/pcd/Zaghetto.pcd`, "three")
},
methods: {
initModel(pcdPath, domName) {
console.log("開始初始化模型檔案");
this.elem = document.getElementById(domName);
// 相機CanvasRenderer
this.camera = new THREE.PerspectiveCamera(
30, // 視野
this.elem.clientWidth / this.elem.clientHeight, // 縱橫比
0.1, // 近平面
1000 // 遠平面
);
// 渲染器
this.renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
this.renderer.setClearColor(new THREE.Color(0x303030)); // 背景色
this.renderer.setSize(this.elem.clientWidth, this.elem.clientHeight);
this.elem.appendChild(this.renderer.domElement);
this.scene = new THREE.Scene(); // 場景
this.loader = new PCDLoader(); //PCD加載器
const THIS = this;
//第一層 捕捉報錯
try {
//加載PCD檔案
THIS.loader.load(
pcdPath,
function(points) {
// console.log(points);
// 模型點位大小
// points.material.size = 0.02;
points.material.color = new THREE.Color(0x00ffff); // 模型顏色
THIS.scene.add(points);
// 構造盒子
var middle = new THREE.Vector3();
points.geometry.computeBoundingBox();
points.geometry.boundingBox.getCenter(middle);
points.applyMatrix4(
new THREE.Matrix4().makeTranslation(
-middle.x,
-middle.y,
-middle.z
)
);
// 比例
var largestDimension = Math.max(
points.geometry.boundingBox.max.x,
points.geometry.boundingBox.max.y,
points.geometry.boundingBox.max.z
);
THIS.camera.position.y = largestDimension * 1;
THIS.animate();
THIS.controls = new OrbitControls(
THIS.camera,
THIS.renderer.domElement
);
THIS.controls.addEventListener("change", THIS.animate); // 監聽滑鼠、鍵盤事件 放大縮小等
},
function(xhr) {
// console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
//第二層 捕捉報錯
function(error) {
THIS.$Message.error("模型地址不對，請稍候再試！");
}
);
} catch (error) {
THIS.$Message.error("模型地址不對，請稍候再試！");
}
},
// 監聽滑鼠、鍵盤事件 放大縮小等
animate() {
this.animationId = requestAnimationFrame(this.animate);
//.getDelta()方法獲得兩幀的時間間隔
var T = clock.getDelta();
timeS = timeS + T;
// requestAnimationFrame默認呼叫render函式60次，通過時間判斷，降低renderer.render執行頻率
if (timeS > renderT) {
// 控制臺查看渲染器渲染方法的呼叫周期，也就是間隔時間是多少
// console.log(`呼叫.render時間間隔`, timeS * 1000 + "毫秒");
this.renderer.render(this.scene, this.camera); //執行渲染操作
//renderer.render每執行一次，timeS置0
timeS = 0;
}
},
// 銷毀模型
destroyModel() {
console.log("銷毀模型");
clearTimeout();
try {
this.scene.clear();
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer.content = null;
cancelAnimationFrame(this.animationId); // 去除animationFrame
const gl = this.renderer.domElement.getContext("webgl");
gl && gl.getExtension("WEBGL_lose_context").loseContext();
console.log("銷毀成功");
} catch (e) {
console.log(e);
console.log("銷毀失敗");
}
}
}
};
</script>
<style scoped>
</style>
參考
Three.js中文網 www.webgl3d.cn/
GitHub上的Three.js github.com/mrdoob/thre…
3D模型檔案下載，既有免費的也有收費的，加載較慢 free3d.com/
本文轉載于:
https://juejin.cn/post/7126461520417914887
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502873.html
標籤：其他
上一篇：Docsify使用指南，使用Typora+Docsify打造最強、最輕量級的個人&團隊檔案，及免費和開源且低成本檔案工具