Vue实现前端3D展示及node环境搭建
目錄
1.前端Vue的環(huán)境配置
1.1 通過(guò)cdn方式直接在js代碼中引入Vue和Vue-3d-model（新手推薦使用）
1.2 整體的前端代碼
1.3 效果
?2. 學(xué)習(xí)中遇到的bug
2.1? Failed to load resource: net::ERR_FAILED
2.2 解決辦法：基于nodejs的http-server，以http的形式加載文件
?3. Vue及Vue-3d-model官方教程及下載：
最近參加的大創(chuàng)項(xiàng)目涉及到前端的3D模型展示，借此機(jī)會(huì)學(xué)習(xí)了Vue以及Vue-3d-model。記錄下遇到的一些bug。
1.前端Vue的環(huán)境配置
1.1 通過(guò)cdn方式直接在js代碼中引入Vue和Vue-3d-model（新手推薦使用）
<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>??????? 在HTML文件中引入這兩行代碼后便可以使用。
1.2 整體的前端代碼
這里為了方便就直接將模型文件與HTML文件放在了同一文件夾中。
<!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body><div id="app"><model-obj src="LeePerrySmith.obj"></model-obj></div> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script> <script>new Vue({ el: '#app' }); </script> </body>1.3 效果
?2. 學(xué)習(xí)中遇到的bug
由于第一次接觸前端，所以在一些環(huán)境配置問(wèn)題中遇到了一些不熟悉的bug和小麻煩。
2.1? Failed to load resource: net::ERR_FAILED
這時(shí)直接打開(kāi)HTML文件瀏覽器一片空白。調(diào)出開(kāi)發(fā)者工具發(fā)現(xiàn)有報(bào)錯(cuò)：
???????? 這時(shí)由于瀏覽器跨域加載本地文件報(bào)錯(cuò)，有報(bào)錯(cuò)信息可以看出跨域請(qǐng)求只支持：http, data, chrome-extension, edge, https, chrome-untrusted。不支持文件形式。
2.2 解決辦法：基于nodejs的http-server，以http的形式加載文件
1.安裝node.js，直接去官網(wǎng)下載node中文網(wǎng)
2.使用npm/cnpm安裝http-server；運(yùn)行 npm install http-server -g
3.開(kāi)始使用：cd到啟動(dòng)的靜態(tài)項(xiàng)目目錄，這里我的HTML以及模型文件在E盤(pán)。
4. 執(zhí)行http-server/hs啟動(dòng)，結(jié)果顯示如下
5. 此時(shí)在瀏覽器中訪(fǎng)問(wèn)http://127.0.0.1:8081 或 http://10.1.1.232:8081啟動(dòng)即可查看你想運(yùn)行的代碼。此時(shí)3d文件成功顯示出來(lái)。
?3. Vue及Vue-3d-model官方教程及下載：
Vue：Vue官方教程
?
Vue-3d-model：Vue-3d-model下載
?
總結(jié)
以上是生活随笔為你收集整理的Vue实现前端3D展示及node环境搭建的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Macbook M1 安装node（亲测
- 下一篇： vue 仿网易云音乐项目