Ecmascript 6 浏览器控制台[错误]：未捕获语法错误：意外标记'；出口'；来自WebGL.js_Ecmascript 6_Three.js

Ecmascript 6 浏览器控制台[错误]：未捕获语法错误：意外标记'；出口'；来自WebGL.js

ecmascript-6 three.js

Ecmascript 6 浏览器控制台[错误]：未捕获语法错误：意外标记'；出口'；来自WebGL.js,ecmascript-6,three.js,Ecmascript 6,Three.js,我遵循three.js文档创建场景以显示旋转框。显示了一个绿色旋转框，没有出现以下问题。但当我尝试包含时，代码如下所示： <html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% }

我遵循three.js文档创建场景以显示旋转框。显示了一个绿色旋转框，没有出现以下问题。但当我尝试包含时，代码如下所示：

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script src="js/WebGL.js"></script>

        <script>

            var 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 );
            };

            if ( WEBGL.isWebGLAvailable() ) {

            // Initiate function or other initializations here
            animate();

            } else {

            var warning = WEBGL.getWebGLErrorMessage();
            document.getElementById( 'container' ).appendChild( warning );

            }


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


我的前三个.js应用程序
正文{页边距：0；}
画布{宽度：100%；高度：100%}
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:0x00ff00}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
摄像机位置z=5；
var animate=函数（）{
请求动画帧（动画）；
立方体旋转.x+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
if（WEBGL.isWebGLAvailable（））{
//在此处启动函数或其他初始化
制作动画（）；
}否则{
var warning=WEBGL.getWebGLErrorMessage（）；
document.getElementById（'container'）.appendChild（警告）；
}

，浏览器控制台显示错误：未捕获语法错误：意外的令牌“导出”自

在three.js Github中没有任何关于它的问题。我想知道会是什么问题？请帮助错误状态

错误：未捕获的语法错误：意外的标记“导出”

，这意味着JavaScript解析器失败。这不是一个3.js错误

根据您的链接，您导入的代码是JavaScript ES模块。看一看。此行使用用于导出模块的

export

关键字。因此，您在这里处理的是一个模块，而不是一个经典的JS脚本

如果要包含模块而不是简单脚本，则需要使用：

<script src="js/three.js"></script>
<script type="module">
  import { WebGL } from 'js/WebGL.js';
  if ( WEBGL.isWebGLAvailable() ) {
    // ...
  }
</script>

我建议您阅读JS脚本和模块之间的区别。例如。

谢谢您的建议和解释，错误已经消失了。目前，我正在通过在reactjs本地服务器中包含js代码来解决CORS错误。您应该将您的问题标记为已解决？

if ( THREE.WEBGL.isWebGLAvailable() ) {

  // WebGL is available

} else {

  // WebGL isn't available :(

}