Solved (wrong version) - Gltf loading (maybe draco) blows up with TypeError: decoder.DecodeArrayToPointCloud is not a function

I’ve been fighting with trying to load a GLTF - I can get a basic example working, but with a (large) space station model I snagged from Google/NASA the load process calls the error handler and gives up.

The file loads in Don McCurdy’s glTF viewer site, and I’ve been trying to add in bits of his code, like KTX2 textures and MeshoptDecoder, but no go. I get a javascript console full of these errors:

2a3ca55a-2554-4614-b634-d586609cbc30:148 TypeError: decoder.DecodeArrayToPointCloud is not a function
at decodeGeometry (2a3ca55a-2554-4614-b634-d586609cbc30:168:32)
at 2a3ca55a-2554-4614-b634-d586609cbc30:142:30

I’m serving these up with the vite dev server, and I tarred up ./node_modules/three-addons/node_modules/three/examples/js/libs/draco and untarred it into public as /draco/ and I copied out the basis/ files for KTX2 texture

Below is my code - the monkey example file works, the iss file doesn’t. I’m on Chrome 120.0.6099.234 on macos 14.3 and threejs 0.160.1
(The monkey model is from GLTF Model Loader - Three.js Tutorials )

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

const width = window.innerWidth, height = window.innerHeight;

// init

const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 100 );
camera.position.z = 5 ;
camera.position.y = 1;

const scene = new THREE.Scene();
const light = new THREE.SpotLight(0xffffff, Math.PI * 20)
light.position.set(5, 5, 5)

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

var iss;

const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/draco/gltf/' );
const ktx2Loader = new KTX2Loader();
loader.setDRACOLoader( dracoLoader );
          function (gltf) {
            iss = gltf.scene;
          function ( xhr ) {

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

        // called when loading has errors
        function ( error ) {

                console.log( 'An error happened' );


// animation
function animation( time ) {

        renderer.render( scene, camera );


I have figured it out, and it is my fault.

I have previously been trying to do this without build tools and doing it all with loading esmodules, but there were some packages that couldn’t be loaded direct with an import and so I switched to trying things out with using npm to install packages and building with vite.

To set things up, I just went ahead and typed ‘npm install three’ and ‘npm install three-addons’, and that’s where I went wrong. The ‘three-addons’ package in NPM is ancient, and so the draco decoder is ancient - the three.js docs say ‘you don’t need to install the add-ons separately’ but I missed that. So when I copied the wasm out of my node_modules and put it into my public/ directory to serve it up, I was copying from node_modules/three-addons/node_modules/three/examples/js/libs/draco and not node_modules/three/examples/jsm/libs/draco

Using the proper version of the draco decoder fixed things. Sorry for the false alarm.