Why three.js file not included in another js file?

Questions
1

I want to includew three.js in a javascript file.
I used the code but it seems not work -

var imported = document.createElement('script');
imported.src = 'three.js';
document.head.appendChild(imported);

I used same code for Reflector.js and it works.
But for three.js It not works.
Any idea to include three.js in javascript file.??.

2

It is already in a javascript file.
The thing you try to do is adding a script tag to the head of a document.
From the given code, it is not clear where and when this code is executed.

3

Actually I used this code for reflector.js to include in the html from js file.

But when I do the same for three.js it caughts error .
I include OrbitControls.js also which can cause error.
But when I certainly refreshh page many times it includes.and functionality works but sometimes not.
I put this code in the global not in any function.

4

@nav the problem is, you haven’t shown enough of what you’re doing for us to reproduce the problem. The three lines of code you show are fine on their own, but you haven’t shown your folder structure, when that code is run, whether there are any errors in the JS console or network tab, and so on.

Could you (ideally) create a live demo using something like https://glitch.com/ or https://neocities.org/, or post a .ZIP of your project?

5

The code is –

var imported = document.createElement('script');
imported.src = 'three.js';
document.head.appendChild(imported); 

file = document.createElement('script');
file.src = 'OrbitControls.js'; 
document.head.appendChild(file); 

file1 = document.createElement('script');
file1.src = 'Reflector.js';
document.head.appendChild(file1);

Screenshot of error -
image

When I had both three files in the code from html It works fine.
The code where it shows error –

cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.target.set( 0, 40, 0);
cameraControls.maxDistance = 400;
cameraControls.minDistance = 10; 
cameraControls.update();

Again my problem I want to load all three files in js file only not from html.
I put the file code global and whenever I refresh page sometimes it works properly, sometimes show Three.OrbitControls is not constructor or sometimes it Shows Three.Reflector is not a constructor.
I couldn’t understand where problem is occur.Please resolve it.

6

Possibly, it’s because you try to add script tags at the wrong time and in the wrong place in your code :slight_smile: So, the problem is not related specifically to Three.js.
You have to applend script tags with linked source js files before you call any objects from them.

7

I highly advise against loading your scripts in this way (read this for more information https://stackoverflow.com/q/3248384). Instead, specify your required scripts via <script> tags or use a more advanced module based approach in combination with tools like Rollup, webpack, browserify or something similar.

2 Likes
8

Actually The problem was I want to upload that animation to IIT Bombay Summer Internship Software Contest in which no. of animations to develop are provided using three.js.
My animation works properly from html file.
But when I upload this animation to IIT bombay server, It just copy only the experiment.js file into their folder and their three,js version is old and again reflector not work there.
So I want the solution such that fille can be loaded from the experiment.js itself and not error occurs.
Experiment.zip (29.5 KB)
If you want to solve please do This is the folder.
The PIE library contains all js files and Experiment folder contains index.html
You have to edit experiment.js If you want to do it.