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=".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();
...
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./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();
...
1 Answer
Reset to default 9You 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/npm/[email protected]/build/three.module.js';
import { DRACOLoader } from 'https://cdn.jsdelivr/npm/[email protected]/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'https://cdn.jsdelivr/npm/[email protected]/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.