ThreeJS Editor - importing dependencies?

Questions
1

Hello,

I really love using the ThreeJS editor; it feels clean, simple and there’s something uniquely “zen” about creating projects with it.

The only problem I have is importing modules, such as OrbitControls.js, Canon/Ammo.js etc to add extra functionality. I’ve found it nearly impossible to do so, and after some cursory Googling have found other people are struggling with the same.

Does anyone know of an easy way of importing external scripts into the editor?

It would be great to be able to declare/import the modules directly with a dependencies section, and really broaden its usefulness.

Thanks!

2 Likes
2

IMO, the recommended way for doing this is to fork the project and add the dependencies in the module files.

I’ve mentioned this already at GitHub but for the record I do it here again: three.js is moving to a ES6 module only codebase and thus global script imports will disappear over time. Hence, it’s not a proper solution to include scripts via the script tag. Add adding a solution that automatically imports/install npm package seems to be overkill for the current editor.

Can you please share these requests here?

BTW: Are you the author from this PR?

3

Thanks for your quick response. I suppose one of the things that stands out about the editor is it’s incredibly accessible.

As someone who’s slightly more geared towards the visual arts side of development this is really helpful in terms of overcoming technical barriers. It’s a pleasure to use, and explore.

A way to add things like physics and post-processing from within the editor would be really appealing, and almost make it a fully-fledged development suite. Having to fork and edit the source might be a little intense, and puts that technical barrier back up again (for me at least).

Here’s a couple of links from similar questions:

Link

Link

Link

Also, that’s not my pull request :slight_smile:

Thanks again

4

I found recently a solution: with a browser recently updated and supporting dynamic ES modules imports you can write a script into the editor (by example onto the scene object) :

window.THREEx = window.THREEx || {}
THREEx.import = url=> eval(`import(url)`)
						.then( mod=> Object.keys(mod).map( k=> THREEx[k] = mod[k] ) )

THREEx.import('/examples/jsm/controls/OrbitControls.js')
THREEx.import('/examples/jsm/utils/BufferGeometryUtils.js')
THREEx.import('/examples/jsm/libs/dat.gui.module.js')

This method use browser’s cache so several launches with [Play] button will load the source only once.

eval is here because the code editor (esprima) forbit to use import() directly as it’s a reserved word.

And I created a THREEx global object because the newly ES modules structure of the main three.js lib creates a THREE object that is sealed (not extendable) so you can’t add properties to it…

Don’t forget to add the x in code samples you get from documentation and examples:

new THREEx.OrbitControls( ... )
1 Like
5

I’m late to the party, but I just found https://www.nunustudio.org/ which seems to be an even more feature-rich editor built on three.js.

6

I faced the same problem and now trying to follow your advice, but still have no success, because can’t find right place to insert import directive:

import { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';

to access GLTFExporter.js in the object’s script. I’ve tryed many possible places: app.js, app\index.html, editor\index.html, … without success.

Placing this directive right inside the script leads to the error.

Any suggestions, please …
Thanks in advance.