Problem displaying custom 3D .glb model

Questions
1

Hello,
I am starting my first adventure with three.js. I downloaded the files, followed the instructions. Nevertheless, my page does not display my model. I want to open my own 3D model on the page. I searched for a long time for a solution, unfortunately nothing could be changed. Please help me what I can do wrong.

    <script src="three/src/Three.js"></script>
		<script>
			import * as THREE from 'three';
			import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('main_site').appendChild(renderer.domElement);

var loader = new THREE.GLTFLoader();
loader.load('models/model.glb', function (gltf) {

    scene.add(gltf.scene);
}, undefined, function (error) {

    console.error(error);
});
</script>
2

There are a lot of beginner issues in your code:

  • For simplicity please import the library files like so for now:
import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';

  • Also remove <script src="three/src/Three.js"></script>. It does not make sense to import three.js twice.

  • The camera as well as your glTF model is at the origin (0,0,0). I suggest you add camera.position.set( 0, 0, 100 ). Depending on the scale of your model, you have to move the camera closer or further away.

  • Create your loader via var loader = new GLTFLoader();. Meaning remove the THREE namespace.

  • You have no animation loop or render call. I suggest you add the following line after scene.add( gltf.scene );

renderer.render( scene, camera );
  • When asking a question about asset loading, please always share the asset (in your case model.glb) in the topic. I also suggest you invest a bit more time in studying three.js tutorials or the official examples.
3

I will try to make changes. I need to create a local web server to view files from disk? Do you know a good tutorial on how to create one properly? I am a beginner and do not know where to start. Thank you for your help.
model.glb (2.6 MB)

4

Yes. More information here: three.js docs

Check out the Resources section at the homepage: https://threejs.org/

Thanks for sharing the model. It actually loads fine:

image
image3748×880 80.8 KB

Just ensure to position your camera at (0,0,300) since it is a pretty big model. Also add at least an ambient and directional light to your scene.