How do I use text/javascript scripts with the module?

Questions
, ,
1 
	<script type="module">
	import * as THREE from './build/three.module.js';
</script>

<script type="text/javascript" src="main.js" defer></script>

I have many <script type"text/javascript"> files that reference THREE , but when trying to migrate to using the module of THREE, it can’t reference THREE anymore… How can I reference it from my javascript files???

2

Try like this…

In your html declare the main.js module

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

And in main.js use import on first few lines like…

import * as THREE from './build/three.module.js';

3

I try doing that and it says I can’t extend the THREE object…

I get these errors, for example:

Uncaught TypeError: Cannot add property CombinedCamera, object is not extensible

at line:

THREE.CombinedCamera = function ( width, height, fov, near, far, orthoNear, orthoFar ) {

How can I extend the THREE object?

4

I don’t know about combinedCamera but it looks like it’s depricated now maybe?

@prisoner849 any advice on this?

5

I found that this:

<script type="module">
	import * as THREE from './build/three.module.js';
	import {OBJLoader} from './examples/jsm/loaders/OBJLoader.js';
	import {MTLLoader} from './examples/jsm/loaders/MTLLoader.js';
	import {FBXLoader} from './examples/jsm/loaders/FBXLoader.js';
	import {GLTFLoader} from './examples/jsm/loaders/GLTFLoader.js';
	import {GLTFExporter} from './examples/jsm/exporters/GLTFExporter.js';
	import {SceneUtils} from './examples/jsm/utils/SceneUtils.js';
	
	window.THREE = THREE;
	window.OBJLoader = OBJLoader;
	window.MTLLoader = MTLLoader;
	window.FBXLoader = FBXLoader;
	window.GLTFLoader = GLTFLoader;
	window.GLTFExporter = GLTFExporter;
	window.SceneUtils = SceneUtils;
</script>

…will make them accessible in my text/javascript files , but I have to remove the “THREE.” from the THREE.MTLLoader, etc… in the text/javascript files…

Is that okay to do it this way?
I also realized I don’t use the CominedCamera.js, so I removed that… but I do use an OrbitControls.js, which has a bunch of custom modifications… Maybe I can bring those into the newer orbit controls that is a module…

6

Okay, I got my project running without errors now on version 124 (I need to migrate to buffergeometry before progressing to 125)…
I just need to figure out the orbit controls now…

7

You would typically declare your environmental variables like so…

Import {x} from x.js
Import {y} from y.js

var loader, controls;

Init() 
function init() {

loader = new GLTFLoader();
Const orbit controls = new OrbitControls( camera, renderer.domElement );

Etc... 

}
8

That would define them locally to the module though, or am I missing something?

9

it would yeah, not sure what setup you’re trying to acheive but you could export the variables as the are and import them to the files you need

also variables declared in one js file will be accessible from a second js file if html markup is in the correct order…

<script type="module" src="main.js"></script> //variables in this
<script type="module" src="jsFileOne.js"></script> // should be accesible in this...