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度無死角旋轉。