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