ThreeJS模型展示為黑色,模型出不來


 

選取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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM