Failure to load GLB file with DRACO compression

Questions
,
1

I want to load a GLB file with DRACO compression.
The following error message appears and it seems that buffer.bin cannot be found, but buffer.bin is indeed in the same folder as the GLB file.

image
image784×71 4.04 KB

2

I have made progress in my investigation and now have the error in the image below.

image
image893×94 5.93 KB

3

Can you please make sure that the loader files (GLTFLoader and DRACOLoader) as well as the DRACO dependencies (the actual decoder from jsm/libs/draco/gltf/) are from the same release?

4

I downloaded three.js-r149 and imported it as follows.

<script src='./js/three.js-r149/build/three.min.js'></script>
<script src='./js/three.js-r149/examples/jsm/controls/OrbitControls.js'></script>
<script src='./js/three.js-r149/examples/jsm/loaders/GLTFLoader.js'></script>
<script src='./js/three.js-r149/examples/jsm/loaders/DRACOLoader.js'></script>
<script src='./js/three.js-r149/examples/jsm/utils/BufferGeometryUtils.js'></script>

However, the error is as shown in the image.
HTML/CSS and JavaScript are very complicated for me…

image

5

Is there a way to reference “jsm/libs/draco/gltf/” in the CDN?

6

I’m afraid this is no correct JavaScript (your are mixing UMD with ESM). The imports have to look like so:

<script type="importmap">
	{
		"imports": {
			"three": "./js/three.js-r149/build/three.module.js",
			"three/addons/": "./js/three.js-r149/examples/jsm"
		}
	}
</script>

<script type="module">

	import * as THREE from 'three';

	import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
	import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
	import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
	import { BufferGeometryUtils } from 'three/addons/utils/BufferGeometryUtils.js';

	// your code goes here

</script>
1 Like