三.js/OrbitControls 未定义 [英] three.js / OrbitControls is not defined
本文介绍了三.js/OrbitControls 未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我尝试导入 OrbitControls.js 时:
我收到不能在模块外使用导入语句错误
所以，我使用:
我建议您也将自定义 geometry_helper.js 转换为 ES6 模块.
When i try to import OrbitControls.js the following:
I get the Cannot use import statement outside a module error
So, I use :
<script type="module" src="OrbitControls.js"></script>
but this time I get:
ReferenceError: OrbitControls is not defined
HTML body:
<body>
<div id="page-wrapper">
<h1>Open Spaceport Container (.drc):</h1>
<div>
<input type="file" id="fileInput">
</div>
</div>
<div>
<pre id="decoderType"><pre>
</div>
<div>
<pre id="fileDisplayArea"><pre>
</div>
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="DRACOLoader.js"></script>
<script src="geometry_helper.js"></script>
<script type="module" src="OrbitControls.js"></script>
<script>
"use strict"
// Configure decoder and create loader.
var textureLoader = new THREE.TextureLoader();
const loadManager = new THREE.LoadingManager();
...
解决方案
You are mixing ES6 module with non-module code which is not valid. Do it like so:
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.121.1/build/three.module.js';
import { DRACOLoader } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.121.1/examples/jsm/controls/OrbitControls.js';
// your actual app code
// Configure decoder and create loader.
const manager = new THREE.LoadingManager();
const textureLoader = new THREE.TextureLoader(manager);
</script>
I suggest you convert your custom geometry_helper.js to a ES6 module, too.
这篇关于三.js/OrbitControls 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
