Just Getting Started: Only Getting a White Screen

Below is my source code and all I am getting is a white screen. I downloaded a free gltf file that will display in online viewers but not in my HTML file when opened in the browser. Would this be a problem loading the gltf file from the source folder.

<!DOCTYPE html>
    <meta charset=UTF-8 />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script src="three.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="OrbitControls.js"></script>
      let scene, camera, renderer;
      function init() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xdddddd);
        camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
        camera.rotation.y = 45/180*Math.PI;
        camera.position.x = 800;
        camera.position.y = 100;
        camera.position.z = 1000;
        controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);
        hlight = new THREE.AmbientLight (0x404040,100);
        directionalLight = new THREE.DirectionalLight(0xffffff,100);
        directionalLight.castShadow = true;
        light = new THREE.PointLight(0xc4c4c4,10);
        light2 = new THREE.PointLight(0xc4c4c4,10);
        light3 = new THREE.PointLight(0xc4c4c4,10);
        light4 = new THREE.PointLight(0xc4c4c4,10);
        renderer = new THREE.WebGLRenderer({antialias:true});
        let loader = new THREE.GLTFLoader();
        loader.load('scene.gltf', function(gltf){
          car = gltf.scene.children[0];
      function animate() {

I’ve ported parts of your code to this live example: https://jsfiddle.net/efygahd6/

One problem is that you create lights with a too high intensity. Values like 100 will not produce proper visual output. Besides, for a basic lighting setup you normally do not need four point lights. Instead, start with an ambient or hemisphere light and a single directional or point light. Also use intensity values around 1.

Great thanks so much! I will give that a shot and see what my results are!

In my source folder I just need the .gltf and .bin file correct? I extracted those from the downloaded folder into the same folder my index file is located.

Normally, yes. According to the asset there might also be some texture files or just a single glb.

I have tried using HTML myself as well as the code you assisted me with and still getting the same results on 2 different computers. I’m pretty confident I have the correct HTML. Are there any issues you can see with how the files in my source folder are arranged? Maybe it is not access the .js files…? THANKS

Are you hosting your assets on a local webserver? This is actually necessary to avoid security issues in browsers. Read the following guide for more information about that topic:


I am simply saving all of the files on my hard drive and opening the HTML file through my browser just to see my results. I will read through that though as well. Thanks again.

Turns out I am failing to load: three.js, GLTFLoader.js and the OrbitControls.js files. Only three errors I am receiving. Once I solve this I think it will work. Hopefully what you sent works out!


see wont recognize js files in directory

Sorry, but it’s not possible to help you with your provided information. It’s probably best if you share your entire repository at github so it’s easier to understand the project setup.

I hope this helps.

It seems your are not including three.js in your HTML file?!? Besides, defining scene, camera and renderer once is sufficient…

This line looks also wrong:

You also including js/main.js but there is no js directory.

1 Like

sorry that was the wrong index file i have updated it…i am not using a main.js file.

Are you using three.js on your page? Three.js needs to be loaded in order to work. But this is not specific to three.js all javascript libraries work like this.

I am using three.js. I thought I just need it in the same folder as the index file is located?

It’s tricky to think about this in terms of folders since you’re basically making a web page. The internet (http://www.foo.bar) is different than the file system on your computer (c:\folder).

My advice is to study what HTML pages are, then look into how to make them interactive with JS and finally look into managing large JS files by breaking them up.


Delete below lines

 controls = new THREE.OrbitControls(camera);
        controls.addEventListener('change', renderer);

and run with atom live server