To load 3D model which is compressed by draco and it has .gltf extension

i have already draco compressed 3D model file. it is in .gltf extension. i want to render the draco compressed 3dmodel but it is giving error like —>

:3000/draco_wasm_wrapper.js:1 Uncaught SyntaxError: Unexpected token ‘<’
14DRACOLoader.js:454 Uncaught (in promise) ReferenceError: DracoDecoderModule is not defined
at DRACOLoader.js:454
at new Promise ()
at DRACOLoader.js:445


CODE:

import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader.js';
import { DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

var loader = new GLTFLoader();
var dracoLoader = new DRACOLoader();
dracoLoader.setPath( '/examples/js/libs/draco/gltf' );
loader.setDRACOLoader( dracoLoader );
loader.setDDSLoader( new DDSLoader() );
loader.load('draco.gltf', gltf => {
	gltf.scene.scale.x=5;
	gltf.scene.scale.y=5;
	gltf.scene.scale.z=5; 
	gltf.scene.position.set(-10, -40, -10);
	this.scene.add(gltf.scene); 
});
1 Like

This error (Unexpected token ‘<’) usually means that a file is not being found where your application is looking for it. If you open the developer tools in your browser and open the Network tab, you should be able to see any requests that are failing and narrow it down.

In this case I think it is the Draco decoder path that’s missing. You’ll want a trailing slash on that URL probably, and to be sure that all the files from three/examples/js/libs/draco/gltf/* have been copied over into the directory your web server is hosting.

1 Like

Working :

import { DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader';

var loader = new GLTFLoader();
var dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/draco/gltf/");//copypasted draco/gltf/all files in public folder
loader.setDRACOLoader( dracoLoader );
loader.load("/draco.gltf", gltf => {

});
1 Like