javascript 如何用THREE.js加载原始gltf文件

iyr7buue 于 2022-10-30 发布在 Java

关注(0)|答案(1)|浏览(229)

我有一个像这样的原始gltf文件我怎么能在三个加载这个？我不能通过文件路径加载它，由于环境。

const rawGltf = '{
    "asset" : {
        "generator" : "Khronos glTF Blender I/O v3.2.43",
        "version" : "2.0"
    },
    "scene" : 0,
    "scenes" : [
...
'

我想在原始文件的文档中做一些类似于loader.load的事情。https://threejs.org/docs/#api/en/loaders/managers/LoadingManager
当我喜欢

const dataURL =
    "data:model/gltf+json;base64," + Buffer.from(rawGltf, "base64").toString("base64");
  const gltf = useLoader(GLTFLoader, dataURL);

发生错误

index.js?49e6:21 Uncaught Could not load data:model/gltf+json;base64,assetgeneratorKhronosglTFBlenderI/Ov3243version20scene0scenesnameScenenodes0nodesmesh0nameCubematerialsdoubleSidedtruenameMaterialpbrMetallicRoughnessbaseColorFactor0800000011920929080000001192092908000000119209291metallicFactor0roughnessFactor04000000059604645meshesnameCubeprimitivesattributesPOSITION0NORMAL1TEXCOORD/02indices3material0accessorsbufferView0componentType5126count24max111min+1+1+1typeVEC3bufferView1componentType5126count24typeVEC3bufferView2componentType5126count24typeVEC2bufferView3componentType5123count36typeSCALARbufferViewsbuffer0byteLength288byteOffset0buffer0byteLength288byteOffset288buffer0byteLength192byteOffset576buffer0byteLength72byteOffset768buffersbyteLength840uridataapplication/octet+streambase64AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgD8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgL8AAIC/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgD8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAPwAAgL8AAIA/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgD8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgL8AAIC/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgD8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AACAvwAAgL8AAIA/AAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAPwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAPwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AACAPwAAAAAAAACAAACAvwAAAAAAAACAAAAAAAAAAAAAAIC/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIC/AACAvwAAAAAAAACAAAAAAAAAAAAAAIA/AAAAAAAAgD8AAACAAACAvwAAAAAAAACAAAAAAAAAgL8AAACAAAAAAAAAAAAAAIA/AAAgPwAAAD8AACA/AAAAPwAAID8AAAA/AADAPgAAAD8AAMAAAAAPwAAwD4AAAA/AAAgPwAAgD4AACA/AACAPgAAID8AAIAAADAPgAAgD4AAMAAACAPgAAwD4AAIAAAAgPwAAQD8AACA/AABAPwAAYD8AAAA/AADAPgAAQD8AAAAAAAAPwAAwD4AAEA/AAAgPwAAgD8AACA/AAAAAAAAYD8AAIAAADAPgAAgD8AAAAAACAPgAAwD4AAAAAAQAOABQAAQAUAAcACgAGABMACgATABcAFQASAAwAFQAMAA8AEAADAAkAEAAJABYABQACAAgABQAIAAsAEQANAAAAEQAAAAQA=: Unexpected token 'j', "j���z���"... is not valid JSON

当我做的时候

const dataURL =
    "data:model/gltf+json;base64," + rawGltf);
  const gltf = useLoader(GLTFLoader, dataURL);

发生错误

Uncaught Could not load data:model/gltf+json;base64,{"asset":{"generator":"Khronos glTF Blender I/O 
......
ABYABQACAAgABQAIAAsAEQANAAAAEQAAAAQA"}]}: Failed to fetch

JavaScript

来源：https://stackoverflow.com/questions/74193512/how-to-load-raw-gltf-file-with-three-js

1条答案

按热度按时间

wgxvkvu91#

您仍然可以使用加载器。将您的GLTF代码转换为DataURL，然后将该URL传递到加载器。

const rawGltf = '...'
const b64 = btoa( rawGltf )
const dataURL = 'data:model/gltf+json;base64,' + b64

const loader = new GLTFLoader()
loader.load( dataURL, data => {
  // handle the GLTF data
} )

赞(0）回复(0）举报 2022-10-30

我来回答

javascript 如何用THREE.js加载原始gltf文件

1条答案

相关问题

热门标签

最新问答