Error in static import three.js getting started

Question

I am looking to import three.js statically for a test website. I'm a bit rusty with html/js so I am doing something wrong here.

Trying to follow static import from https://threejs.org/docs/#manual/en/introduction/Installation

Code below (all in one html file):

<script type="module">

          // Find the latest version by visiting https://unpkg.com/three. The URL will
          // redirect to the newest stable release.
          // import * as THREE from 'https://unpkg.com/three@<VERSION>/build/three.module.js'; 
          
          import * as THREE from 'https://unpkg.com/[email protected]/build/three.js';

          const scene = new THREE.Scene();

        </script>

    <script>

        //if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

        var camera, scene, renderer;

        init();

        function init() {

            
            
            scene = new THREE.Scene();
            scene.add( new THREE.AmbientLight( 0x999999 ) );

            camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 500 );

            // Z is up for objects intended to be 3D printed.

            camera.up.set( 0, 0, 1 );
            camera.position.set( 0, -9, 6 );

            camera.add( new THREE.PointLight( 0xffffff, 0.8 ) );

            scene.add( camera );

            var grid = new THREE.GridHelper( 25, 1.0, 0xffffff, 0x555555 );
            grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
            scene.add( grid );

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setClearColor( 0x999999 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            var loader = new THREE.AMFLoader();
            loader.load( './models/amf/rook.amf', function ( amfobject ) {

                scene.add( amfobject );
                render();

            } );

            var controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.addEventListener( 'change', render );
            controls.target.set( 0, 1.2, 2 );
            controls.update();

            window.addEventListener( 'resize', onWindowResize, false );

        }

        function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

            render();

        }

        function render() {

            renderer.render( scene, camera );

        }

    </script>

I get the following:

v1.html:78 Uncaught ReferenceError: THREE is not defined
    at init (v1.html:78)
    at v1.html:72
init @ v1.html:78
(anonymous) @ v1.html:72
v1.html:62 Uncaught TypeError: THREE.Scene is not a constructor
    at v1.html:62
(anonymous) @ v1.html:62

What can I try next?

You're getting this error because your second <script> tag doesn't have type='module' on it, and you're not importing THREE like you did in your first <script> tag. Only the first script tag has the required steps for your code to understand what scene = new THREE.Scene(); means. — M -
– M -, Commented Jul 31, 2020 at 1:32

mmason33 · Accepted Answer · 2020-07-31 00:03:43Z

1

You should use a normal script tag not type module. That will fix your issue. There's no reason to do it this way.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js" integrity="sha512-E1+SnTWyHYoY5MN8wpL0SI4TYbpWN12sHXyEViwbzzEyq6GHxQrPFDzEeUDab4emXcf3Yj41Tht2JZnpo3kjwA==" crossorigin="anonymous"></script>

answered Jul 31, 2020 at 0:03

mmason33

9881 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JDS Over a year ago

Nice that works! Real quick follow-up while you're here: how can I include for things like THREE.AMFLoader? Above in my sample html code it has <script src="js/loaders/AMFLoader.js"></script> but I don't have that file and I don't know where to find them statically

mmason33 Over a year ago

stackoverflow.com/questions/50289524/… There's a ton of resources on that after a quick search. I believe in you you got this.

JDS Over a year ago

Good stuff bro I got it. I found everything I need easy to browse and include at https://unpkg.com/browse/[email protected]/examples/js/loaders/ for anyone else who might need help with this.

Collectives™ on Stack Overflow

Error in static import three.js getting started

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related