无法使用 Three.js 导入 OrbitControls.js

Question

我正在查看 three.js，并找到了这个示例。 https://threejsfundamentals.org/threejs/lessons/threejs-load-gltf.html不幸的是，当我使用 Z9784E91C7B2657917926BC8 在本地运行所有三个导入时，我不断收到此错误

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';

Uncaught SyntaxError: Cannot use import statement outside a module

我一直在寻找解决方案的高低，但找不到任何解决方案。

我还尝试使用脚本标签运行三个导入。

<script src="{{url_for('static',filename='js/three/build/three.js')}}"></script>
<script type="module" src="{{url_for('static',filename='js/three/examples/jsm/controls/OrbitControls.js')}}"></script>
<script type="module" src="{{url_for('static',filename='js/three/examples/jsm/loaders/GLTFLoader.js')}}"></script>

这可行，但是当我尝试下面的代码时，我得到： Uncaught ReferenceError: OrbitControls is not defined

const controls = new OrbitControls(camera, canvas);
controls.target.set(0, 5, 0);
controls.update();

此外，如果我尝试使用 GLTFLoader，我会收到错误消息。

const loader = new THREE.GLTFLoader();

或者

const loader = new GLTFLoader();

任何想法我如何解决这个问题将不胜感激。

Answer 1

你需要说你的 script 标签是module类型的。 所以你需要的是这样的：

<html>
  <body>
    <script type="module">
      import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
      import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
      import {GLTFLoader} from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/GLTFLoader.js';
    </script>
  </body>
</html>

无法使用 Three.js 导入 OrbitControls.js

问题描述

1 个解决方案

解决方案1
4 已采纳 2021-01-23 21:57:05

无法使用 Three.js 导入 OrbitControls.js

问题描述

1 个解决方案

解决方案1 4 已采纳 2021-01-23 21:57:05

解决方案1
4 已采纳 2021-01-23 21:57:05