未捕获的SyntaxError:无法在模块外部使用import语句 [英] Uncaught SyntaxError: Cannot use import statement outside a module
问题描述
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>
https://sketchfab.com/3D模型/1972年Datsun-240k-gt-non-commercial-only-only-b2303a552b444e5b8637fdf5169b41cb // https://www.youtube.com/watch?v=1TeMXIWRrqE 这是GLTFLOADER的教程，我也导入了相同的3d文件并编写了相同的代码，但是当我在本地服务器上打开文件时，在控制台中出现2个错误: 1)"GLTFLoader.js:9未捕获的SyntaxError:无法在模块外部使用import语句" 2)(index):29 Uncaught TypeError:THREE.GLTFLoader不是构造函数." 尽管在youtube视频中，它会立即与他一起打开！ :( 如果有人可以帮助我，我将不胜感激.非常感谢
https://sketchfab.com/3d-models/1972-datsun-240k-gt-non-commercial-use-only-b2303a552b444e5b8637fdf5169b41cb //https://www.youtube.com/watch?v=1TeMXIWRrqE This is tutorial for GLTFLOADER , i imported same 3d file as well and written same code, but when i open the file on local server, i get 2 errors in console: 1) "GLTFLoader.js:9 Uncaught SyntaxError: Cannot use import statement outside a module" 2) "(index):29 Uncaught TypeError: THREE.GLTFLoader is not a constructor." Although in youtube video it opens with him immediatly!! :( I would be greatful if anybody can hep me out with this. THANK YOU SO MUCH
GLTFLoader.js:9未捕获的SyntaxError
GLTFLoader.js:9 Uncaught SyntaxError
(索引):29未捕获的TypeError
(index):29 Uncaught TypeError
推荐答案
Here's a newer tutorial. The bottom of this article explains what changed.
简短的版本是three.js，改为使用es6模块，而不是
The short version is three.js changed to prefer using es6 modules so instead of
<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script>
let scene,camera,renderer;
function init(){
...
THREE.GLTFLoader.load(...
您会这样做
<script type="module">
import * as THREE from './build/three.module.js';
import {GLTFLoader} from './examples/jsm/loaders/GLTFLoader.js';
let scene,camera,renderer;
function init(){
...
GLTFLoader.load(...
但是要像这样使用它，需要将three.js文件复制到相同的文件夹结构中.
But to use it like that requires you copy the three.js files to the same folder structure.
someFolder
|
├-build
| |
| +-three.module.js
|
+-examples
|
+-jsm
|
+-controls
| |
| +-OrbitControls.js
| +-TrackballControls.js
| +-...
|
+-loaders
| |
| +-GLTFLoader.js
| +-...
|
...
如果要使用旧方法<script>标记样式，则需要确保使用 jsm文件夹
If you want to use the old method <script> tag style then you need to make sure you use the files from the js folder, not the jsm folder
注意:您必须使用此文件夹结构，因为examples/jsm文件夹中的文件(例如GLTFLoader.js)通过相对但硬编码的路径引用了其他文件(例如three.module.js).例如在 GLTFLoader.js 有一条线很有效
Note: You must use this folder structure because the files in the examples/jsm folder like GLTFLoader.js refer to various other files like three.module.js via relative but hard coded paths. For example in GLTFLoader.js there is a line which is effectively
import {stuff} from "../../../build/three.module.js";
新样式的一些优点是
-
各种模块可以插入所需的其他部件.
the various modules can pull in the other parts they need.
过去，要使用一个额外的部分，您可能需要在1个其他的<script>标签中添加1个.现在您只需要导入1个，该部分就可以自己提取其他1到10个部分
In the past to use one extra part you might need to add 1 to 10 other <script> tags. Now you just need 1 import and that part can pull in the other 1 to 10 parts on it's own
如果您使用网络构建器来构建页面，则可以删除您不使用的部分.
If you build your page with a web builder it can strip out the parts you are not using.
有传言说，将来有计划完全摆脱<script>方法.
Rumor is there are plans to get rid of the <script> method completely at some point in the future.
只是试图弄清楚为什么ES6模块更好，为什么需要保持相同的结构.
Just to try to make it clear both why ES6 modules are better and why you need to keep the same structure.
在r105之前的版本中，您可以使用EffectComposer
In pre r105 to use the EffectComposer you'd do this
<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>
您奔跑会出现错误
THREE.EffectComposer relies on THREE.CopyShader
因此，您需要四处寻找它，它与EffectsComposer.js不在同一个文件夹中.最终找到它时，将其添加
So you'd dig around to find it, it's not in the same folder as EffectsComposer.js. When you finally find it you add it
<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>
<script src="threejs/examples/js/shaders/CopyShader.js"></script>
再次运行并得到另一个错误THREE.EffectComposer relies on THREE.ShaderPass，因此再次挖掘周围添加该内容
Run again and get another error THREE.EffectComposer relies on THREE.ShaderPass so again digging around you add that
<script src="threejs/examples/js/postprocessing/EffectComposer.js"></script>
<script src="threejs/examples/js/shaders/CopyShader.js"></script>
<script src="threejs/examples/js/postprocessing/ShaderPass.js"></script>
那太糟了.
现在从r105开始，使用es6模块就可以了
Now as of r105 using es6 modules you can just do
import {EffectComposer} from './threejs/examples/jsm/postprocessing/EffectComposer.js';
可以说哪个更好.您不会遇到其他错误，因为ES6模块版本EffectComposer.js可以引用其所需的文件，其依赖项和自身.在 EffectComposer.js的顶部是对其依赖项的引用.
Which is arguably much nicer. You won't get the other errors because the ES6 module version EffectComposer.js can reference the files it needs, its dependencies, itself. At the top of EffectComposer.js are the references to its dependencies.
import {
Clock,
LinearFilter,
Mesh,
OrthographicCamera,
PlaneBufferGeometry,
RGBAFormat,
Vector2,
WebGLRenderTarget
} from "../../../build/three.module.js";
import { CopyShader } from "../shaders/CopyShader.js";
import { ShaderPass } from "../postprocessing/ShaderPass.js";
import { MaskPass } from "../postprocessing/MaskPass.js";
import { ClearMaskPass } from "../postprocessing/MaskPass.js";
但是，正如您在上面看到的，EffectsComposer.js期望three.module.js位于一个名为build的文件夹中，该文件夹位于其自身下方3个子文件夹中.它期望CopyShader.js位于一个名为shaders的文件夹中，而该文件夹离其自身只有一个文件夹.等等...
But, as you can see above, EffectsComposer.js expects that three.module.js is in a folder called build 3 subfolders down from itself. It expects CopyShader.js is in a folder called shaders one folder down from itself. Etc...
换句话说，它需要相同的文件夹结构.
这篇关于未捕获的SyntaxError:无法在模块外部使用import语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
