Question

我正在遵循three.js文档来创建场景以显示旋转框。 here之后显示了绿色的旋转框，没有问题。但是，当我尝试包含WebGL compatibility check时，代码如下所示：

<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>

，浏览器控制台显示错误：未捕获的语法错误：来自WebGL.js的意外令牌'export'。

Three.js Github中没有关于此的任何问题线程。我想知道可能是什么问题？请帮助

Answer 1

错误状态为error: Uncaught SyntaxError: Unexpected token 'export'，表示JavaScript解析器失败。这不是Three.js错误。

根据链接WebGL compatibility check，您导入的代码是JavaScript ES模块。看一下this line。该行使用export关键字，该关键字用于导出模块。因此，您在这里处理的是模块，而不是经典的JS脚本。

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

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

如果更方便，您也可以直接使用WebGL脚本文件而不是JS模块。您可以找到它here。然后，您应该能够像这样访问WEBGL名称空间：

if ( THREE.WEBGL.isWebGLAvailable() ) {

  // WebGL is available

} else {

  // WebGL isn't available :(

}

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

浏览器控制台[错误]：未捕获的语法错误：WebGL.js中的意外令牌“导出”

1 个答案: