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

Questions
, , ,
1

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
2

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
3

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
4

This also happens with Unexpected token ‘:’ when the file exists, but isn’t the right file, as described below.

I thought I had downloaded copies of draco_decoder.wasm and draco_wasm_wrapper.js from github, but used the wrong url and ended up with two small text files with the correct filenames, but each containing “404: Not Found”. My javascript console in Firefox’s web developer tools kept telling me it found the files, but still didn’t work. After getting the correct files in place, problem solved.