選取gltf格式時,出現模型為黑色,模型出不來
原因:
我們設計部可能是用maya或者3dmax去做;在模型導出時,沒有gltf格式;如果maya或者3dmax導出obj然后導進blender,再導出gltf格式,就容易再格式轉換的過程中出現數據丟失。(這時候你會發現你展示出來的模型為黑色,在你代碼沒有問題的情況下,你會發現后台也不報錯,別的模型也可以展示出來)
解決辦法:
我們把設計部做出來的模型導出來,放進這個網站進行格式轉換 www.sketchfab.com 模型網站(gltf,fbx); https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount;同時設計部還需要根據設計搞,在網站上進行進一步的微調;這個網站上展示的效果,就是導出后,我們webgl這邊可以正常展示的效果。
如果代碼沒有問題,那么試着給它放大縮小;我在做項目的時候就有遇到過,給模型放大了10000倍,模型才出來那么一丟丟。
格式轉換與代碼測試相關鏈接:
3D技術路線系統介紹:disigner -> viewer 3D引擎
https://www.khronos.org/gltf/
3D查模型器: 文件直接拖進去 https://gltf-viewer.donmccurdy.com/
http://39.106.15.17:3000/#model=/models/hole-table/scene.gltf 3D模型查看器
3D展示網站:
www.sketchfab.com 模型網站(gltf,fbx)
https://sketchfab.com/3d-models?date=week&features=downloadable&sort_by=-likeCount
sketchfab developer
web使用方式:https://help.sketchfab.com/hc/en-us/articles/203509907-Embedding-your-models?utm_source=website&utm_campaign=embedpopup#embed-options
總結:三種方式
1.直接獲取 https://sketchfab.com/models/442c548d94744641ba279ae94b5f45ec?autospin=0.5
2.iframe方式 <iframe src="https://sketchfab.com/models/442c548d94744641ba279ae94b5f45ec/embed?autostart=1&autospin=0.5"></iframe>
3.js API方式:https://static.sketchfab.com/api/sketchfab-viewer-1.5.1.js
API調用 https://sketchfab.com/developers/viewer
iframe嵌入式:<iframe src="https://sketchfab.com/models/442c548d94744641ba279ae94b5f45ec/embed?autostart=1&autospin=0.5"></iframe>
view API模式:https://sketchfab.com/developers/viewer
demo網站:
https://demos.littleworkshop.fr/infinitown
編碼測試網站:www.codepen.io
Cannon.js技術路線
glTF viewer:播放glTF動畫, .glTF(描述文件JSON) .bin 動畫文件(animation data) texture文件夾:材質,圖片.jpg,png
js源碼代碼:https://github.com/donmccurdy/three-gltf-viewer
在線播放器(將三個文件(夾)拖入網頁中,記住拖進去 open方式不行):https://gltf.insimo.com/
desktop:桌面版本:https://github.com/donmccurdy/three-gltf-viewer/releases
D:\ProgramFile\gltf-viewer-win32-ia32
three.js example:three.js樣例
three.js loader:
示例: https://github.com/mrdoob/three.js/tree/master/examples/js/loaders
glTF示例:https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js
three.js vs Cannon.js 文章
https://www.codercto.com/a/33760.html
sketchfab模型破解下載:
https://imjad.cn/archives/lab/ripping-sketchfab-models
http://m.3dhoo.com/news/guowai/39935.html
https://blog.csdn.net/weixin_43081805/article/details/88891200
https://www.ddd.online/mall/search?keyWords=%E5%A4%AA%E7%A9%BA