Index.html:23 Uncaught ReferenceError: THREE is not defined

Questions
, ,
1

I’m not necessarily trying to focus on learning the entirety of three.js and solely want to create a rotating 3D model I created a while back to put on my portfolio. While I do have some coding knowledge, I have not done anything on the web development side of things and have no idea how to properly deal with this error. I followed a few guides and did try to resolve the error myself, checking older posts, but found myself being faced with different errors. At this point I’ve just followed a video from start to finish having an almost identical code to his, while changing camera position values and color codes.

<head>
	<meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<title>Radeon Casing</title>
    <style>
        body{
            margin:0;
        }
        canvas{
            display:block;
        }
    </style>
</head>
<body>
    <script src="three.js"></script>
	<script type="module" src="GLTFLoader.js"></script>
    <script type="module">
        
        import { GLTFLoader } from "./GLTFLoader.js";

        var scene = new THREE.Scene();

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

        var loader = new GLTFLoader();

        var obj;
        loader.load("scene.gltf", function (gltf) {
            obj = gltf.scene;
            scene.add(gltf.scene);
        });
        scene.background = new THREE.Color(0x000000)
        var light = new THREE.HemisphereLight(0xffffff, 0x000000, 0);
        scene.add(light);
        camera.position.set(0, 0, 0);
        function animate(){
            requestAnimationFrame(animate);
            renderer.render(scene,camera);
        }
        animate();
    </script>
</body>

Anything helps, thank you.

2

try import as following

  <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.163.0/build/three.module.js",
                "three/examples/jsm/loaders/GLTFLoader": "https://unpkg.com/three@0.163.0/examples/jsm/loaders/GLTFLoader.js"
            }
        }
    </script>

  <script type="module">
        import * as THREE from 'three';
        import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

     //rest of the code here
1 Like
3

Thank you that worked perfectly. I am no longer receiving any issues.

1 Like