I've been trying to get a GLTF model into my scene for 4 hours now, can someone please take a look? :)

I printed the error message that the loader’s method returns on the console:
debugconsole|689x205

The one method of the GLTF loader specifies 100% on the console and then the error method is called.

This is my script.js source code:

import './style.css'
import * as THREE from 'three'
import * as dat from 'dat.gui'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';



// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Objects
const geometry = new THREE.TorusGeometry( .7, .2, 16, 100 )
const plane = new THREE.PlaneGeometry(5, 5, 32)

// Materials

const material = new THREE.MeshStandardMaterial()
material.metallness = 0.7
material.roughness = 0.2
material.color = new THREE.Color(0x292929)

const materialplane = new THREE.MeshBasicMaterial()
material.colorplane = new THREE.Color({color: 0x292929, metallness: 1, roughness: 0, side: THREE.DoubleSide})



// Mesh
const sphere = new THREE.Mesh(geometry,material)
//scene.add(sphere)

const planeobj = new THREE.Mesh(plane, materialplane)
//scene.add(planeobj)


// Lights

const pointLight = new THREE.PointLight(0xffffff, 1)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)

/**
 * Sizes
 */
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}

/* Responsive updating */
window.addEventListener('resize', () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight

// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()

// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
camera.position.x = 0
camera.position.y = 0
camera.position.z = 2
scene.add(camera)

// Controls
//const controls = new OrbitControls(camera, canvas)
//controls.enableDamping = true

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))


//Create GLTFLoader
const objloader = new GLTFLoader();
console.log( 'Loader initiated' );

// Load a glTF resource
objloader.load(
	// resource URL
	'../static/models/dreisechs.gltf',
	// called when the resource is loaded
	function ( gltf ) {
    
		scene.add( gltf.scene );
		
                 gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene; // THREE.Group
		gltf.scenes; // Array<THREE.Group>
		gltf.cameras; // Array<THREE.Camera>
		gltf.asset; // Object

    console.log( 'Loaded' );

	},
	// called while loading is progressing
	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);
    
	}
);

/**
 * Animate
 */

const clock = new THREE.Clock()

const tick = () =>
{

const elapsedTime = clock.getElapsedTime()

// Update objects
sphere.rotation.y = .5 * elapsedTime

// Update Orbital Controls
// controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)
}

tick()

I would be very happy about help.
Greetings, Deniz

Your code looks OK to me. Can you see any more about the error by opening the “Network” tab of your browser’s developer tools? There should be more information about the error somewhere; the most common cause is a 404 because the URL to the file is not quite right.

Also a good idea to try opening the model in an existing viewer like https://gltf-viewer.donmccurdy.com/ first.

maybe you can use the glb file in official example test your code. And use that code test you glb file.

'../static/models/dreisechs.gltf'

imo that is not a valid url. you can’t use relative paths.

either import the model, url-loader will create a hashed url in that case

import modelUrl from './assets/models/dreisechs.gltf'

/assets has to be within your /src folder in that case. or use absolute paths:

/models/dreisechs.gltf

in that case there has to be a models folder present in your /public or /static folder.

Thanks for the reply. I managed to find the problem by myself. It was the GLTF-File, that got displayed right in other software but the Loader failed. I exported the model as .obj and now its working. Greetings, Deniz