国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

WEB 3D技術 three.js draco解壓器 解決 壓縮后的gltf/glb報錯 Error: THREE.GLTFLoader: No DRACOLoader instance pravid

這篇具有很好參考價值的文章主要介紹了WEB 3D技術 three.js draco解壓器 解決 壓縮后的gltf/glb報錯 Error: THREE.GLTFLoader: No DRACOLoader instance pravid。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

通常 我們 glb/gltf里面都是非常大的場景
有些工具 它會因為過大做了壓縮 導致 我們開始是用不了的
three.gltfloader: no dracoloader instance provided.,前端,3d,javascript
我們可以官網(wǎng)搜索 draco
如下圖選擇
three.gltfloader: no dracoloader instance provided.,前端,3d,javascript
這是個解壓工具 用在我們各種的3D建模軟件中
大部分是通用的

我們先在代碼中導入工具

//導入draco解碼察
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

我們在項目根目錄中 找到 node_modules下的 three
然后在 其中打開 examples 下面有一個 jsm
three.gltfloader: no dracoloader instance provided.,前端,3d,javascript
在下面找到 libs
下面的 draco 就是我們要的東西
three.gltfloader: no dracoloader instance provided.,前端,3d,javascript
將這個包 復制到我們自己的靜態(tài)資源目錄下
three.gltfloader: no dracoloader instance provided.,前端,3d,javascript
然后 我們編寫代碼如下

// 實例化加載器g1tf
const gltfLoader = new GLTFLoader();
// 實例化加較器draco
const dracoloader = new DRACOLoader();
dracoloader.setDecoderPath("/draco/");
gltfLoader.setDRACOLoader(dracoloader);
gltfLoader.load(
    "gltf/glb路徑",
    (gltf) =>{
        gltf.scene.traverse((child) => {
            if (child.isMesh) {
                child.frustumCulled = false;
                child.castShadow = true;
                child.material.emissive = child.material.color;
                child.material.emissiveMap = child.material.map;
            }
        });
        scene.add(gltf.scene);
    }
)

主要就是 DRACOLoader 創(chuàng)建一個解壓器
然后 setDecoderPath 指明draco解壓工具的路徑

然后 GLTFLoader 構建的對象 我們這里叫 gltfLoader 用setDRACOLoader 指定解壓方式 dracoloader
這樣 資源就可以加載出來了文章來源地址http://www.zghlxwxcb.cn/news/detail-853084.html

到了這里,關于WEB 3D技術 three.js draco解壓器 解決 壓縮后的gltf/glb報錯 Error: THREE.GLTFLoader: No DRACOLoader instance pravid的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如若轉載,請注明出處: 如若內容造成侵權/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領支付寶紅包贊助服務器費用

相關文章

  • WEB 3D技術 three.js 3D賀卡(3) 點光源燈光動畫效果

    WEB 3D技術 three.js 3D賀卡(3) 點光源燈光動畫效果

    經(jīng)過 上文 WEB 3D技術 three.js 3D賀卡(2) 加入天空與水面效果 我們將水面 和 天空的效果搭建了一下 那么 我們將四周 點光源的效果做一下 首先 我們將 renderer.toneMappingExposure 的值 改為 0.1 讓效果看著明顯一點 這樣 整個界面就會暗下來 然后 我們在任意位置 加入代碼 創(chuàng)建一個點

    2024年01月19日
    瀏覽(105)
  • WEB 3D技術 three.js 3D賀卡(2) 加入天空與水面效果

    WEB 3D技術 three.js 3D賀卡(2) 加入天空與水面效果

    上文 WEB 3D技術 three.js 3D賀卡(1) 搭建基本項目環(huán)境 我們簡單搭了一個賀卡雛形 然后 我們要引入一個hdr的一個天空的效果 所以 我們需要在代碼中導入 RGBELoader 這里 大家可以選擇下載我的hdr資源 WEB 3D技術 three.js 3D賀卡 天空 hdr資源 下載好之后呢 我們在外面套一個 xhdr 文件夾

    2024年01月18日
    瀏覽(94)
  • web上構建3d效果 基于three.js的實例

    web上構建3d效果 基于three.js的實例

    web頁面上提供3D效果,可以為頁面提供不少色彩,H5之后canvas 為webgl提供了基礎,使得在web頁面使用JS也能寫出3D的效果,其中three.js作為封裝了圖形函數(shù) 的框架,為入門提供了方便,效果圖如下。 ? 以上是官方例子中其中的三個,沒接觸過的朋友肯定會覺得很神奇,事實上

    2024年02月05日
    瀏覽(88)
  • 如何用Three.js + Blender打造一個web 3D展覽館

    如何用Three.js + Blender打造一個web 3D展覽館

    作者:vivo 互聯(lián)網(wǎng)前端團隊- Wei Xing? 運營活動新玩法層出不窮,web 3D炙手可熱,本文將一步步帶大家了解如何利用Three.js和Blender來打造一個沉浸式web 3D展覽館。 3D展覽館是什么,先來預覽下效果: 看起來像個3D冒險類手游,用戶可以操縱屏幕中央的虛擬搖桿,以第一人稱視角

    2024年02月16日
    瀏覽(94)
  • Web3D開發(fā)經(jīng)驗分享:基于Three.js的Web3D建模案例

    Web3D開發(fā)經(jīng)驗分享:基于Three.js的Web3D建模案例

    個人主頁:?左本W(wǎng)eb3D,更多案例預覽請點擊==》?在線案例 個人簡介:專注Web3D使用ThreeJS實現(xiàn)3D效果技巧和學習案例 ?? ??積跬步以至千里,致敬每個愛學習的你。喜歡的話請三連,有問題請私信或者加微信 ????????隨著互聯(lián)網(wǎng)的快速發(fā)展,Web3D技術也越來越成熟,越來越

    2024年02月13日
    瀏覽(19)
  • 壓縮gltf/glb模型踩坑與解決 three.js DRACOLoader

    壓縮gltf/glb模型踩坑與解決 three.js DRACOLoader

    使用前端three.js加載3d模型過程中,往往會出現(xiàn)模型大小過大導致前端加載時間過長,降低用戶體驗。 本文所記錄的是筆者在使用gltf-pipeline壓縮3d模型中踩坑DRACOLoader與解決的一個過程。 所采用的three庫版本為 ^0.138.2 通過gltf-pipeline可以大幅度壓縮gltf/glb模型文件。 并且有如下

    2023年04月08日
    瀏覽(22)
  • web3d-three.js場景設計器-天空包圍盒-TWEEN.js

    web3d-three.js場景設計器-天空包圍盒-TWEEN.js

    THREE.JS 實現(xiàn)場景天空包圍盒,為了讓場景背景更具體,而不是呆板的純色,可以給廠家添加圍繞的包圍盒。 這里使用球體來實現(xiàn),球體中央則是場景 給球體添加天空的漸變色 加入場景 代碼如下 function createSky(?hemiLight) { ? const vertexShader = `varying vec3 vWorldPosition; ? ? void main

    2024年01月23日
    瀏覽(21)
  • Three.js--》前端開發(fā)者掌握3d技術不再是夢,初識threejs

    Three.js--》前端開發(fā)者掌握3d技術不再是夢,初識threejs

    ????????這十年來 web 得到了快速的發(fā)展,隨著 webgl 的普及,網(wǎng)頁的表現(xiàn)能力越來越強大,網(wǎng)頁上已經(jīng)開始可以做出很多復雜的動畫和精美的效果,還可以通過 webgl 在網(wǎng)頁中繪制高性能的3d圖形,別的不說,凡是入門程序員都離不開github這個網(wǎng)站,細心的人都會發(fā)現(xiàn),gi

    2024年02月01日
    瀏覽(98)
  • web3d-three.js場景設計器-sprite廣告牌

    web3d-three.js場景設計器-sprite廣告牌

    three.js使用Sprite精靈實現(xiàn)文字或者圖片廣告牌 1.將文字繪制到Canvas,調整對應寬高。 2.作為Cavans材質綁定到Sprite 3.加載到場景調整適當?shù)膕cale function createLabel({ text, fontSize, textColor, color, imageUrl }) { ? ? return new Promise((resolve, reject) = { ? ? ? ? let canvas = document.createElement(\\\'canvas\\\')

    2024年02月02日
    瀏覽(59)
  • web 3d場景構建+three.js+室內圍墻,倉庫,樓梯,貨架模型等,第一人稱進入場景案例

    web 3d場景構建+three.js+室內圍墻,倉庫,樓梯,貨架模型等,第一人稱進入場景案例

    ? 翻到了之前的一個案例,基于three.js做的倉庫布局模擬,地圖元素除了大模型外,其他都是通過JSON數(shù)據(jù)解析動態(tài)生成的,例如墻體,柱子門口,地標等,集成了第一人稱的插件可以第一人稱進入場景有需要的可以下載看看,對想入門的朋友應該有一些參考價值。 /** ? ?*創(chuàng)

    2024年02月10日
    瀏覽(21)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領取紅包,優(yōu)惠每天領

二維碼1

領取紅包

二維碼2

領紅包