GLTFLoader, Cant load model i download from the web

Questions
1

Hey everyone, Im still new to threejs and have been having some trouble loading in a model i download from Sketchfab ,but it always show the white screen , I don’t know what went wrong.
Here is my code :

<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
    body {
        margin: 0;
    }
    canvas {
        display: block;
    }
</style>
</head>
<body>
<script src='three.js'></script>
<script type="module">
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xdddddd);
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
    const hlight = new THREE.AmbientLight (0xffffff,0.86);
    scene.add(hlight);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

    import { GLTFLoader } from '../three.js-dev/three.js-dev/examples/jsm/loaders/GLTFLoader.js';

    const loader = new GLTFLoader().setPath('../iron_man_mark_85/');

    loader.load('../iron_man_mark_85/scene.gltf', function (gltf) {

        gltf.scene.position.set(0,-5,0);

        console.log(gltf)

        scene.add(gltf.scene);
    }, undefined, function (error) {
        console.error(error);
    });
    renderer.render( scene, camera );
   </script>
   </body>
    </html>
2

Your imports are currently not correct. I suggest you import three.js and GLTFLoader like so for now.

<script type="module">

    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.127/build/three.module.js';
    import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.127/examples/jsm/loaders/GLTFLoader.js';

Besides, you should move the camera a bit away from the origin. Try it with:

camera.position.set( 0, 0, 10 );
4

thansk for the reply , i tried your suggestion, but it is still white screen … I followed the three.js document and used a node service to access the page ，otherwise there will be cross-domain issues (loading the model i download)， could it be caused by this ?

5

Yes. In this case, you should see an error message/warning in the browser console. Something like:

Access to image at ‘URL’ from origin ‘https://fiddle.jshell.net’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

7

it would appear this error if i accese the page without my node service(directly open the page on my desktop) . but even if i used my node service its still cant work. just show the white screen. and i don’t know how to deal with it .

8

http://localhost:8000/three/threeddemo.html (the url i visited) and show the message below.

微信图片_20210415085426
微信图片_202104150854261366×571 33 KB 

<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
	body {
		margin: 0;
	}

	canvas {
		display: block;
	}
</style>
</head>

<body>
<!-- <script src='three.js'></script>
<script src='../three.js-dev/three.js-dev/examples/jsm/loaders/GLTFLoader.js' -->
<script type="module">
	import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.127/build/three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.127/examples/jsm/loaders/GLTFLoader.js';
	const scene = new THREE.Scene();
	scene.background = new THREE.Color(0xdddddd);
	const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
	camera.position.set( 0, 0, 10 );
	const hlight = new THREE.AmbientLight (0xffffff,0.86);
	scene.add(hlight);
	const renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	// import { GLTFLoader } from '../three.js-dev/three.js-dev/examples/jsm/loaders/GLTFLoader.js';
	const loader = new GLTFLoader().setPath('../iron_man_mark_85/');

	loader.load('../iron_man_mark_85/scene.gltf', function (gltf) {
		gltf.scene.position.set(0,-5,0);
		console.log(gltf)
		scene.add(gltf.scene);
		
	}, undefined, function (error) {

		console.error(error);

	});
	renderer.render( scene, camera );
</script>
</body>

</html>
9

Do you mind sharing the glTF asset in this thread?

10

You set the loaders path using setPath. Shoulnd’t
loader.load('scene.gltf')
be enough?

Also: did you try another model?

11


here is my gltf.
thanks for all.

12

yeah. i tried another model , but the same problem. :cold_sweat:

13

If you are using a node server and a bundler, try putting your model in the static folder and set the path from there. It worked for me I hope it does work for you.

15

the model defo loads (check network tab) i have no idea where it is or how big it is so you’ll have to play around with either the camera position or model position or its scale

16

I threw the model into this on codepen and can confirm there is nothing wrong with the model itself: https://codepen.io/uiunicorn/full/PopzVqw

you’ll need to wait for the load as the model is absolutely huge