Uncaught ReferenceError: THREE is not defined

Questions
1

Hi, I’m brand new to three.js and javascript and I can’t figure out why I’m getting errors.

Uncaught ReferenceError: THREE is not defined

file: …/index.html:19

[index.html:19:25](file:…/index.html)

Loading failed for the module with source “file:…/build/three.module.js”.

What is the correct way to include convexgeometry.js and three.js?
Thanks :slight_smile:

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>
            Robut
        </title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script type="module" src="src/three.js"></script>
        <script type="module" src="jsm/geometries/ConvexGeometry.js"></script>
        <script>

            var scene = new THREE.Scene();

            var webGLRenderer = new THREE.WebGLRenderer();
            webGLRenderer.setClearColor(0xdddddd, 1.0);
            webGLRenderer.setSize(window.innerWidth, window.innerHeight);
            webGLRenderer.shadowMapEnabled = true;

            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            webGLRenderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(webGLRenderer.domElement);

            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = -90;

            camera.lookAt(new THREE.Vector3(0, 0, 0));

            var ambientLight = new THREE.AmbientLight(0xffffff);
            scene.add(ambientLight);

            var robot = new THREE.Object3D();

            var cubeVertices = [];

            cubeVertices.push(new THREE.Vector3(-10, -10, -10));
            cubeVertices.push(new THREE.Vector3(10, -10, -10));
            cubeVertices.push(new THREE.Vector3(-10, -10, 10));
            cubeVertices.push(new THREE.Vector3(10, -10, 10));

            var cubeGeo = new ConvexGeometry(cubeVertices);

            var cubeMesh = new THREE.Mesh(cubeGeo, new THREE.MeshBasicMaterial({color: 0x0000ff}));
            scene.add(cubeMesh);
            function render() {

                 requestAnimationFrame(render);
                 webGLRenderer.render(scene, camera);
            }
            render();

        </script>
    </body>
</html>
2

You are mixing ES6 module code with global script usage. Try it like so:

<script src="src/three.js"></script>
<script src="js/geometries/ConvexGeometry.js"></script>

Notice that ConvexGeometry is included from js not jsm.

3

These changes result in
Uncaught SyntaxError: import declarations may only appear at top level of a module [three.js:1](file:/src/three.js)

Uncaught SyntaxError: import declarations may only appear at top level of a module [ConvexGeometry.js:1](file:/jsm/geometries/ConvexGeometry.js)

Uncaught ReferenceError: THREE is not defined

file:index.html:19

[index.html:19:25](file:index.html)

file:index.html:19

Which is why I added module to both as it seemed to get rid of the error.

Also, the files have convexgeometry in jsm
My folder looks like this (I don’t know what I’m doing I’m just trying to make a basic robot)
I got the files from here Releases · mrdoob/three.js · GitHub

4

In this case, the beginner example may be helpful.

See BeginnerExample at * discourse.threejs.hofk.de

2021-03-16 17.05.23

from the Collection of examples from discourse.threejs.org

5

This is helpful, and I was looking for something like this, however I don’t see any ConvexGeometry examples, and I don’t see how my include of ConvexGeometry is any different than the includes in some of this code (after removing module). The main difference seems to be in the structure, as they didn’t put the script in the body. Surely it can’t be this complicated?
Thanks.

6

:question:

https://threejs.org/examples/#webgl_geometry_convex

2 Likes
7

Sorry, I missed that. Using the code example I was able to get it to work! Thanks for the quick help! It’s greatly appreciated!

8

You are welcome. :beers:

2 Likes