CODEWITHSUNDEEP
javascriptimportmodulethree.js
Stephan Häberle
Stephan Häberle

Reputation: 390

Issues with importing THREE.js modules

I'm trying to import the custom geometry "OutlinesGeometry.js" from https://plnkr.co/edit/uEYo6L3pgbIaYXXzVzXd?preview

I'm trying to import following way:

<script type="module" src="./three/build/three.module.js"></script>
<script type="module" src="./three/examples/jsm/controls/OrbitControls.js"></script>
<script type="module" src="./three/examples/jsm/libs/dat.gui.min.js"></script>

<script type="module" src="./OutlinesGeometry.js"></script>

This gives me following errors: enter image description here

First I did not import three, OrbitControls and dat.gui as modules, as everything worked fine (see imports below). But as soon I'm importing the OutlinesGeometry I received following error: Uncaught TypeError: class constructors must be invoked with 'new'. Because of that I'm importing the modules.

<script src="./three/build/three.js"></script>
<script src="./three/examples/js/controls/OrbitControls.js"></script>
<script src="./three/examples/js/libs/dat.gui.min.js"></script>

<script src="./OutlinesGeometry.js"></script>

How should the imports be done correctly?

Upvotes: 1

Views: 1249

Answers (1)

Mugen87
Mugen87

Reputation: 31026

The runtime error happens because you are deriving from a ES6 class via ES5 syntax.

In newer releases BufferGeometry is a ES6 class. When creating a custom geometry generator, the following code is invalid:

THREE.BufferGeometry.call( this );

You can only solve this issue by migrating OutlinesGeometry to an ES6 class as well.

BTW: When working with modules, you just have a single <script type="module"></script> tag and use inside of the tag ES6 import syntax. Meaning:

<script type="module">

    import * as THREE from './three/build/three.module.js';
    import OrbitControls from './three/examples/jsm/controls/OrbitControls.js';

I suggest you study the official three.js example for more details.

Upvotes: 1

Related Questions