Threejs 在加載模型和材質(zhì)遇到的坑

今天在使用 Vue 和 Threejs 結(jié)合的項(xiàng)目里遇到了一些坑，記錄下來。

模型加載

Threejs 在加載 obj 和對應(yīng)的 mtl 文件及 mtl 中的貼圖的時(shí)候需要注意幾點(diǎn)：

  1. obj 和 mtl 及其貼圖所在的目錄需要開啟服務(wù)，可以使用 http-server 在 src 所在目錄用
cd src
http-server --cors

開啟服務(wù)，默認(rèn)在 8080 端口，vue 項(xiàng)目需要改到其他端口避免沖突。


src目錄
  1. mtlLoader 設(shè)置材質(zhì)文件的路徑和材質(zhì)文件（我這里是貼圖）開啟跨域
   this.mtlLoader.setCrossOrigin("Anonymous")
  this.mtlLoader.setTexturePath(texturePath)
  this.mtlLoader.load(mtlPath, (materials) => {
    materials.preload()
      this.objLoader.setMaterials(materials)
        this.objLoader.load(objPath, (object) => {
          this.scene.add(object)
        })
   }, mtlLoaderOnProgress, mtlLoaderOnError)

以上代碼里， texturePath 是設(shè)置跨域訪問目錄的材質(zhì)路徑，一把 mtl 文件里已經(jīng)有 ’map/xxx.png'的前綴，所以我這里設(shè)置到 "http://localhost:8080/assets/models/opera_house/" 就可以了。

至于為什么， setTexturePath api 很容易在源碼里找到對應(yīng)的說明：


setTexturePath

setCrossOrigin("Anonymous") 我猜測是材質(zhì)是通過 image 標(biāo)簽導(dǎo)入到 canvas 里使用，所以需要設(shè)置 "Anonymous" 來進(jìn)一步讓瀏覽器跨域訪問。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容