Three.js just drawing a white screen

Question

I am trying to follow the tutorial on here: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene and my browser just shows me a white window. I tried to seperate the files into both js and html file.

What I already tried:

adding / deleting the nomodule parameter in the script tag
running a local live server

Here is my code:

My index.html file

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script nomodule src="js/main.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

My js file called main.js in the folder 'js'. I installed Three.js via npm.

import * as THREE from 'three'
//import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth, window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color:0x00ff00});
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

camera.position.z = 5;

const animate = function () {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
};

animate();

The example code on the contrary:

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            const animate = function () {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

Does this answer your question? [What’s the purpose of the HTML “nomodule” attribute for script elements if the default is text/javascript?](https://stackoverflow.com/questions/45943494/what-s-the-purpose-of-the-html-nomodule-attribute-for-script-elements-if-the-d) Your script is being ignored because you added `nomodule` — M -, Dec 30 '20 at 21:48
No, unfortunately it doesn't. If I delete `nomodule`, I get an error in the console: `Uncaught SyntaxError: import declarations may only appear at top level of a module` I saw that the nomodule parameter would let this error disappear but it seems that there's a different problem with this — paddy.exe, Dec 30 '20 at 21:55
What happens when you add `type=“module”` to your script tag instead of nomodule? — M -, Dec 30 '20 at 22:00
In that case, Firefox shows me an error message saying the 'Same-origin-rule' is prohibiting the reading of external ressources out of files. `TypeError: Cross-origin script load denied by Cross-Origin Resource Sharing policy.` — paddy.exe, Dec 30 '20 at 22:06
Have you read: [How to run things locally](https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally)? — 2pha, Dec 30 '20 at 22:53
@2pha I now did but even though I am running it on a local server, it is still showing only the white screen. `Uncaught TypeError: Error resolving module specifier “three”. Relative module specifiers must start with “./”, “../” or “/”.` is my error code now — paddy.exe, Dec 31 '20 at 11:21
what if you import like: `import * as THREE from 'https://unpkg.com/three/build/three.module.js';` — gaitat, Dec 31 '20 at 21:46
The error says it all. `Error resolving module specifier “three”`. It can't find the file. If you were bundling the JS it would usually be taken care of, but since you are not bundling, you have to specify the full path to the file. Try what gaitat mentioned above or put the full relative path to your local version of three.module.js — 2pha, Jan 01 '21 at 00:47
Okay, so I changed it now, both to the full relative path version `import * as THREE from '../node_modules/three/build/three.module.js';` and @gaitat's version and it is now showing a full black screen and no error concerning the three module. Now there's an error with the missing favicon. Do I have to specify one? `GEThttp://127.0.0.1:5500/favicon.ico [HTTP/1.1 404 Not Found 0ms]` I mean it should show a spinning cube — paddy.exe, Jan 01 '21 at 11:20
the favicon has nothing to do with it. Using your last code black along with the import ... I see a green cube. ` — gaitat, Jan 01 '21 at 15:10
@gaitat Could you show your exact code here? Because now it's giving me a referenceError again — paddy.exe, Jan 01 '21 at 21:07

score 0 · Accepted Answer · answered Jan 02 '21 at 00:56

This renders a green rotating cube:

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script type="module">
            import * as THREE from 'https://unpkg.com/three/build/three.module.js';

            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            const animate = function () {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

Now it works. Thank you very much. Though, I am quite confused why it didn't work with my separate JavaScript file. — paddy.exe, Jan 02 '21 at 16:45

score 0 · Answer 2 · answered Nov 19 '21 at 05:47

You need to include "three.js" in the js/ folder.

"Before we start" Section: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene

"Save the following HTML to a file on your computer, along with a copy of three.js in the js/ directory, and open it in your browser."

score 0 · Answer 3 · answered Mar 12 '23 at 16:59

0

Adding browsersList to package.json worked for me.

"browserslist": [
   "last 1 Chrome version"
]

Source: https://dev.to/hulyakarakaya/how-to-fix-regeneratorruntime-is-not-defined-doj

answered Mar 12 '23 at 16:59

Jakub Słowikowski

1,063
1
8
13

Three.js just drawing a white screen

3 Answers3