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)
scene.add(light)
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();
ktx2Loader.setTranscoderPath('/basis/');
loader.setDRACOLoader( dracoLoader );
loader.setKTX2Loader(ktx2Loader.detectSupport(renderer))
loader.setMeshoptDecoder(MeshoptDecoder);
loader.setCrossOrigin('anonymous');
loader.load(
//"https://gist.githubusercontent.com/epaulson/f927f49c71d3af9be14cbeebf7db849a/raw/316935c4323d312b045783db66bb8b63244e028c/monkey.glb",
"https://gist.githubusercontent.com/epaulson/f927f49c71d3af9be14cbeebf7db849a/raw/316935c4323d312b045783db66bb8b63244e028c/iss.glb",
function (gltf) {
iss = gltf.scene;
scene.add(gltf.scene);
},
function ( xhr ) {
//console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
console.log(error);
}
);
// animation
function animation( time ) {
renderer.render( scene, camera );
}