未捕获的语法错误：无法在模块外部使用 import 语句
mas*_*ash 1 javascript three.js
https://www.youtube.com/watch?v=1TeMXIWRrqE
<!DOCTYPE html>
<html>
<head>
<title>Three.js</title>
<style type="text/css">
html, body {margin: 0; padding: 0; overflow: hidden}
</style>
</head>
<body>
<div id="webgl"></div>
<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script>
let scene,camera,renderer;
function init(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
hlight = new THREE.AmbientLight(0x404040,100);
scene.add(hlight);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
let loader = new THREE.GLTFLoader(); //THE ERROR WITH THIS, I TRIED WITHOUT THREE. ONLY GLTLOADER() BUT DID NOT WORK
loader.load('scene.gltf', function(gltf){
scene.add(gltf.scene);
renderer.render(scene,camera);
});
}
init();
</script>
</body>
</html>GLTFLoader.js：9 未捕获的语法错误
（索引）：29 未捕获的类型错误
简短版本是 Three.js 更改为更喜欢使用 es6 模块，因此而不是
\n\n<script src="three.js"></script>\n<script src="GLTFLoader.js"></script>\n<script>\n\nlet scene,camera,renderer;\nfunction init(){\n ...\n THREE.GLTFLoader.load(...\n你会这样做
\n\n<script type="module">\nimport * as THREE from \'./build/three.module.js\';\nimport {GLTFLoader} from \'./examples/jsm/loaders/GLTFLoader.js\';\n\nlet scene,camera,renderer;\nfunction init(){\n ...\n GLTFLoader.load(...\n但要像这样使用它，需要将三个.js 文件复制到相同的文件夹结构中。
\n\nsomeFolder\n |\n \xe2\x94\x9c-build\n | |\n | +-three.module.js\n |\n +-examples\n |\n +-jsm\n |\n +-controls\n | |\n | +-OrbitControls.js\n | +-TrackballControls.js\n | +-...\n |\n +-loaders\n | |\n | +-GLTFLoader.js\n | +-...\n |\n ...\n如果您想使用旧方法<script>标记样式，那么您需要确保使用文件夹中js的文件，而不是文件jsm夹中的文件
注意：您必须使用此文件夹结构，因为 Examples/jsm 文件夹中的文件通过相对但硬编码的路径GLTFLoader.js引用各种其他文件three.module.js。例如，在GLTFLoader.js中，有一行有效
import {stuff} from "../../../build/three.module.js";\n新风格的几个优点是
\n\n- \n
各种模块可以引入它们需要的其他部分。
\n\n过去，要使用一个额外的部分，您可能需要添加 1 到 10 个其他
<script>标签。现在您只需要 1 个导入，该部分就可以自行引入其他 1 到 10 个部分 \n如果您使用网络构建器构建页面，它可以删除您不使用的部分。
\n
<script>有传言称，有计划在未来某个时候完全废除该方法。
\n\n
只是为了弄清楚为什么 ES6 模块更好以及为什么需要保持相同的结构。
\n\n在 r105 之前使用 EffectComposer 你会这样做
\n\n<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>\n你运行，你会得到一个错误
\n\nTHREE.EffectComposer relies on THREE.CopyShader\n因此，您需要四处寻找才能找到它，它与 EffectsComposer.js 不在同一文件夹中。当你最终找到它时，你添加它
\n\n<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>\n<script src="threejs/examples/js/shaders/CopyShader.js"></script>\n再次运行并收到另一个错误THREE.EffectComposer relies on THREE.ShaderPass，因此再次挖掘您添加的内容
<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>\n<script src="threejs/examples/js/shaders/CopyShader.js"></script>\n<script src="threejs/examples/js/postprocessing/ShaderPass.js"></script>\n太糟糕了。
\n\n现在从 r105 使用 es6 模块开始，你可以这样做
\n\nimport {EffectComposer} from \'./threejs/examples/jsm/postprocessing/EffectComposer.js\';\n这可以说要好得多。您不会收到其他错误，因为 ES6 模块版本EffectComposer.js可以引用它所需的文件、其依赖项本身。EffectComposer.js 的顶部是对其依赖项的引用。
import {\n Clock,\n LinearFilter,\n Mesh,\n OrthographicCamera,\n PlaneBufferGeometry,\n RGBAFormat,\n Vector2,\n WebGLRenderTarget\n} from "../../../build/three.module.js";\nimport { CopyShader } from "../shaders/CopyShader.js";\nimport { ShaderPass } from "../postprocessing/ShaderPass.js";\nimport { MaskPass } from "../postprocessing/MaskPass.js";\nimport { ClearMaskPass } from "../postprocessing/MaskPass.js";\n但是，正如您在上面所看到的，EffectsComposer.js预计它three.module.js位于一个名为build3 个子文件夹的文件夹中。它期望CopyShader.js位于shaders一个名为下一个文件夹的文件夹中。ETC...
换句话说，它需要相同的文件夹结构。
\n