當前位置:編程學習大全網 - 網站源碼 - vite+vue3+threejs實現壹個3D模型的展示案例

vite+vue3+threejs實現壹個3D模型的展示案例

1.檢查npm -v版本和使用對應的vite安裝vue3項目

需要安裝依賴:npm install

運行:npm run dev

目錄結構:

2.threejs官網:

3.安裝threejs

4.準備3D模型素材(我這裏使用glb格式)和HDR圖片,素材網上可以找有免費的。

5.在App.vue中綁定id,掛載,實例化使用

6.在項目中的src目錄下創建utils目錄,在utils目錄下創建Base3d.js腳本

效果展示:手機模型已經加載至場景中,背景是hdr圖。

功能展示:用戶可以滑動滾輪將模型進行放大縮小,場景360度無死角旋轉。

  • 上一篇:java java.lang.Class對象不能用於RPC傳輸嗎
  • 下一篇:成本性態分析:有關散布圖法
  • copyright 2024編程學習大全網