Dracoloader + Blender Compression DataCloneError

[jadamus-block]

Description

I'm getting the following error using the default setup of the Dracoloader and cube modal out of Blender with the compression turned on. The cube is a plain cube and exported as a .glb.

DataCloneError: Failed to execute 'postMessage' on 'Worker': #<Object> could not be cloned. at three_examples_jsm_loaders_DRACOLoader__js.js?v=3c21d5ba:224:17

Reproduction steps

1. Setup the default Draco loader
2. Import basic model with Draco compression
3. The model fully gets fetch but fails with it needs to get cloned in the worker

Code

// Instantiate a loader
const loader = new GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' );
loader.setDRACOLoader( dracoLoader );

// Load a glTF resource
loader.load(
	// resource URL
	'models/gltf/duck/duck.gltf',
	// called when the resource is loaded
	function ( gltf ) {

	},
	// called while loading is progressing
	function ( xhr ) {

		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

	},
	// called when loading has errors
	function ( error ) {
                 console.log('error: ', error)
		console.log( 'An error happened' );

	}
);

Live example

—

Screenshots

No response

Version

0.1777

Device

No response

Browser

No response

OS

No response

[Mugen87]

Do you mind sharing the problematic glb in this issue?

[jadamus-block]

I can't share glbs so I compressed it in a zip
github-example-box.glb.zip

[Mugen87]

I'm not able to reproduce the issue. All I did was moving the asset into the examples/models/gltf directory and importing it in webgl_loader_gltf_avif. The entire code looks like so:

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';

let camera, scene, renderer;

init();
render();

function init() {

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 100 );
	camera.position.set( 1.5, 4, 9 );

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xf6eedc );

	//

	const dracoLoader = new DRACOLoader();
	dracoLoader.setDecoderPath( 'jsm/libs/draco/gltf/' );

	const loader = new GLTFLoader();
	loader.setDRACOLoader( dracoLoader );
	loader.setPath( 'models/gltf/' );
	loader.load( 'github-example-box.glb', function ( gltf ) {

		scene.add( gltf.scene );

		render();

	} );

	//

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	const controls = new OrbitControls( camera, renderer.domElement );
	controls.addEventListener( 'change', render );
	controls.target.set( 0, 2, 0 );
	controls.update();

	window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

	render();

}

//

function render() {

	renderer.render( scene, camera );

}

The cube loads without runtime errors.

[Mugen87]

I suggest you use the forum or stackoverflow for more help. If it turns out to be a bug in the loaders, we can reopen the issue.