Loading script from external file and activating it on click

Questions
1

Hello Everyone,

Forgive me for all of these questions, but I’m excited to learn this system and every time I do something new questions arises.

The first is
Is it possible to load the three.js script from an external file? I mean, creating a js file containing all the objects AND all the links to the base files?
I ask this as I’d like to embed a 3D version of my models on my website, but seen the website was created using wordpress I’d like to make this process light. Maybe loading the script into the page instead of loading a full html page as an iFrame could work better {I can create a different script for each model}.

The second question is… how can I activate the orbit controls on click? Mainly I loaded the page as an iFrame into my website. This looks like a vignette that allows you to rotate the model and zoom in, out using the mouse wheel… but if you are scrolling the problem is that when the mouse enters the iFrame it stops scrolling and instead zooms out the model.

What I am thinking is to create a kind of 3D model viewer that activates just when you click on the space and deactivate if you click outside.

Has someone had the same problem?
Did you manage to sort it out?

Many thanks guys!

2

I’m not sure I understand the question, sry^^. Can you please elaborate in more detail?

You can enable/disable OrbitControls by changing the .enabled property.

3

Question 1:
I have done something similar for a couple of projects. I will try to explain briefly what I did.

  1. Have a ‘master’ application running a threejs scene.
  2. Define an interface for any external script I intend to load such that it plays well with the master application.
  3. Write the external script and make it publicly accessible.
  4. Fetch the external script as needed and load it into your master application (example below).

Master application

async function loadExtApp(sourceUrl) {
    // get the file
    let objResource = await fetch(sourceUrl);
    // get the source code
    let objText = await objResource.text();
    // inject it into the environment
    eval(objText);
    // this is an "interface method" which returns "the type" of the object in OOP terms
    let objClass = await getObj();
    // create an instance
    let objInstance = new objClass();
    // use it
    objInstance.foo();
    objInstance.bar();
}

loadExtApp("./js/externalapp.js");

Things to care about:

  1. Using eval. It is fine if you don’t have any sensitive information in your application, but if you do you have been warned.
  2. Eval hits performance if that’s a concern.
  3. You can trust the source code from the external application.
  4. If the external application is hosted on a different server, you may run into CORS issues. This may help with that.

This architecture has nothing to do with three.js, but I have used it in a couple of projects with threejs and it works well.
Demo if you’d like to try.
The master application processes audio and makes it available to the external applications for visualization.
Relevant parts are around line 350 in app.js and you can check out the equalizers for the ‘interface’.

EDIT:
If you just need to load the 3D models from an external source you don’t really need the above technique, storing them as objs or something and using OBJLoader might be sufficient.
The above technique lets you load procedural threejs geometry from an external source.

1 Like
4

Do you still have the coee for this? i would like to see it but the ‘Demo’ link doesnt seem to work