Hi,
I’m trying to load a 3D model as a .glb file into Three.js, but I always get a black screen. I’m very new to Three.js. This is what I want to display:
I tried to load that file with gltf-viewer and it works fine so the problem will be probably in my code.
Thank you.
What error do you get exactly? Did you check the console? You might consider adding lighting to the scene?
Try it like so
from
Collection of examples from discourse.threejs.org
(see link at the top)
code slightly modified 
<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/how-to-rotate-a-gltf-model-in-a-specific-direction/2881/18 -->
<head>
<title> LoadGLTFmove </title>
<meta charset="utf-8" />
<style>
body {
overflow: hidden;
margin: 0;
}
</style>
</head>
<body> </body>
<script src="../js/three.min.115.js"></script>
<script src="../js/OrbitControls.115.js"></script>
<script src="../js/GLTFLoader.115.js"></script>
<script>
'use strict'
// @author hofk
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.001, 100000 );
camera.position.set( -100, 400, 1000 );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.setClearColor( 0xaaaaaa, 1 );
const controls = new THREE.OrbitControls( camera, renderer.domElement );
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
const lightA = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( lightA );
const lightP = new THREE.PointLight( 0xddff00, 1 );
lightP.position.set( -1, 3, 500 );
scene.add( lightP );
// --- data input ---
let yRotation = 0;
let xPosition = -1.2;
let zPosition = 3.5;
// ----- -----
const loader = new THREE.GLTFLoader( );
// konta johanna remix (CC-BY) people (license)
// https://poly.google.com/view/7PNIMdmMSPD
//loader.load( 'girl/google poly.gltf', process );
loader.load( 'https://holesa.github.io/polymodel.github.io/mountains.glb', process );
let model = new THREE.Object3D( );
let c, size; // model center and size
let t = 0;
let x0 = xPosition;
let dx;
model.scale.set(0.1,0.1,0.1);
animate();
function animate( ) {
requestAnimationFrame( animate );
yRotation += 0.005;
t += 0.001;
dx = Math.sin( t )
xPosition = x0 + dx;
model.rotation.y = yRotation;
model.position.x = xPosition;
model.position.z = zPosition;
renderer.render( scene, camera );
}
function process( gltf ) {
const box = new THREE.Box3( ).setFromObject( gltf.scene );
const boxHelper = new THREE.Box3Helper( box, 0xffff00 );
scene.add( boxHelper );
c = box.getCenter( new THREE.Vector3( ) );
size = box.getSize( new THREE.Vector3( ) );
gltf.scene.position.set( -c.x, size.y / 2 - c.y, -c.z );
model.add( gltf.scene );
scene.add( model );
}
</script>
</html>Thanks. I tried it and it works perfectly, but at this moment I need just a static model without animation. There is probably a problem with lightning or camera in my code.
I added lightning and the object is now visible partially. Maybe I need to edit the camera.
Look at the changes in the codebox
const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.001, 100000 );
camera.position.set( -100, 400, 1000 );
// konta johanna remix (CC-BY) people (license)
// https://poly.google.com/view/7PNIMdmMSPD
//loader.load( 'girl/google poly.gltf', process );
loader.load( 'https://holesa.github.io/polymodel.github.io/mountains.glb', process );
model.scale.set(0.1,0.1,0.1);
You need specific values!
The code runs for me.
I tried to change the camera based on your code but it doesn’t work. What values do I need to set specific? I don’t know how to edit your code, because it’s too complex. Could you tell me how to change my current code?
const loader = new THREE.GLTFLoader();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
0.001,
100000
);
camera.position.set(-100, 400, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
loader.load(
"https://holesa.github.io/polymodel.github.io/mountains.glb",
function (glb) {
scene.add(glb.scene);
},
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
function (error) {
console.log("An error happened");
}
);
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
const animate = function () {
requestAnimationFrame(animate);
renderer.render(scene, camera);
};
animate();
The model is large. You need scaling. See above
model.scale.set(0.1,0.1,0.1); or less
in your pen:
camera.position.z = 100;
loader.load( “https://holesa.github.io/polymodel.github.io/mountains.glb”,
function (glb) {
glb.scene.scale.set(0.01,0.01,0.01)
scene.add(glb.scene);
},
Great, thanks. I have at least something. But do you know why it is so blurry?
Good morning.
When I woke up tonight, everything was so blurry too. Only the night light on the hallway was shining.
But in the morning everything was clear again. It was well lit.
You have to adjust the light, for example the position. See the full code example (code slightly modified - from the collection example with the girl) at the very top.
You can copy it and customize the three.js sources.
Perfect, now it looks good! Thank you for your patience 
