Question

我正在学习three.js，并正在建立我的第一个项目。我基本上是从three.js网站运行示例代码。从以下文件夹中运行three.js时，效果很好：

js /目录

，但是将其作为模块导入时无法运行。我使用以下方法安装模块：

npm i three

并通过安装将其作为本地服务器运行

npm install http-server -g

，然后在端口8000上运行我的文件test.html

http-server . -p 8000

http://localhost:8000/test.html

这是我体内的完整代码：

<body>
    <script>
        import * as THREE from 'three';

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

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

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

        camera.position.z = 5;

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

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

            renderer.render(scene, camera);
        };

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

为什么我不能导入模块？我在浏览器中收到此错误消息：

未捕获的SyntaxError：无法在模块外部使用import语句

Answer 1

可以尝试

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

代替导入语句。参考：https://threejs.org

导入Three.js作为模块时出现问题-出现未捕获的SyntaxError：

1 个答案: