静态导入三.js 入门报错

Question

我希望为测试网站静态导入 three.js。我对 html/js 有点生疏，所以我在这里做错了。

尝试从 https://threejs.org/docs/#manual/en/introduction/Installation 跟踪静态导入

以下代码（全部在一个 html 文件中）：

<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/three@0.119.1/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>

我得到以下信息：

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

接下来我可以尝试什么？

Answer 1

您应该使用普通的脚本标签而不是类型模块。这将解决您的问题。没有理由这样做。

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