How to use import function with ES6 modules

Questions
1

Hey this may sound stupid but I can’t find as good explanation of how to import files into my THREE.js project. For the few modules I’ve used from the THREE.js library it’s been pretty simple.

Based on moz this is the format

import { name, draw, reportArea, reportPerimeter } from './modules/square.js';

What I don’t get is where do I find these parameters in a file? I am specifically trying to load these two files to build some terrain:

import { simplexnoise } from "https://jeromeetienne.github.io/threex.terrain/examples/vendor/three.js/examples/js/SimplexNoise.js";
import { terrain } from "https://jeromeetienne.github.io/threex.terrain/threex.terrain.js";

I have tried many different ways to include all caps, camelcase, mix etc. Where do I find the name? If I am doing it correctly then Something else may be wrong with my file preventing it from loading.

Thank you

2

(1) Both files you shared are non-module files - all they may do is influence the global scope, if loaded via <script> tag.

To act like an ES6 module, file needs to export something. For example (from the OrbitControls module you import):

Screenshot 2020-10-20 at 20.06.29

(2) You seem to import these files in both ways - <script> and import. The second can be removed. Instead of that, after loading these scripts with <script> tag, you can access them using the global scope (so just use the names used in the files):

// First file declares a global SimplexNoise variable - so you can use it as SimplexNoise
console.info({ SimplexNoise });

// Second file declares Terrain, but within a THREEx scope - so you can use it as THREEx.Terrain
console.info({ THREEx });

Will result in:

Screenshot 2020-10-20 at 20.10.03
Screenshot 2020-10-20 at 20.10.03840×148 18.5 KB

1 Like
3

Oops not sure why they were both still in there. I had tried it both ways and thought I had commented one or the other out. So to clarify those scripts are not modules but just files used to extended the functionality of js and prevent me from writing all of that code myself?

So now I have them as <script> tags but I’m still not getting anything to render. Prior to this when I was just using a PlaneGeomtrey everything worked so it has something to do with my code in regards to this terrain I’m trying to create.

Any idea what I am missing that would not allow this to work?

EDIT: Here’s a great example of it. Unfortunately something in my code s causing me problems.https://codepen.io/marctannous/pen/RNGjmz?editors=0010