Puzzles/Logic won't show

Tagged: angular, Logic not showing, Puzzle not showing

This topic has 13 replies, 2 voices, and was last updated 3 years, 11 months ago by ninojoevelz(old).

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
2020-11-09 at 8:30 am #35143
ninojoevelz(old)
Customer
Hi,

I’m trying to load gLTF file created in Verge3d Max with Puzzles. I followed this documentation but the Logics/Interactions didn’t show
```
// loaded GLTF 2.0 asset
var url = 'template.gltf';

// construct a new application with simple rotating preloader
var app = new v3d.App('v3d-container', null, new v3d.SimplePreloader({ container: 'v3d-container' }));

// load main scene
app.loadScene(url, function() {
    app.enableControls();
    app.run();
    runCode();
});

function runCode() {
    // place your own code here
}
```
And this is my code
```
const sceneUrl = 'https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:251e362e5c/applications/scooter/scooter.gltf';
    const app = new v3d.App('v3d-container', null, new v3d.SimplePreloader({ container: 'v3d-container' }));

    app.loadScene(sceneUrl, () => {
      app.enableControls();
      app.run();
    });
```
The expected output should be the same as in Image1. My output is in Image2.

Am I missing something? I also tried loading the Puzzle with PuzzleLoader and then load the scene but still the same. Please help

Also, I’m using Angular, I was able to load without problems before when I have Verge3d Max 3.0 but when I update Verge3d to the latest version (3.3.1) I now encounter issues.

Attachments:
You must be logged in to view attached files.
2020-11-09 at 10:20 am #35153

Yuri Kovelenov
Staff

Hi,

This particular example consists of 2 .html files. The nav bars are contained in index.html, while the annotations are made as 3D billbords.

Here is more info: https://www.soft8soft.com/docs/manual/en/introduction/HTML-based-user-interfaces.html

Chief 3D Verger | LinkedIn | Twitter

2020-11-10 at 2:27 am #35171

ninojoevelz(old)
Customer

Oh, I see. I thought that just by using the loadScene and passing the gLTF it will automatically load the whole app. Thank you for this

2020-11-10 at 6:43 am #35175

Yuri Kovelenov
Staff

Chief 3D Verger | LinkedIn | Twitter

2020-11-11 at 6:18 am #35215

ninojoevelz(old)
Customer

Hi Yuri,

I now understand the connection between the generated files from Verge3d and the external HTML file used for extra interactive UI. Thanks for the documentation you sent. I know now also that in order for me to load those I need to use an iframe tag. But I have another problem now.

My goal is these:
– I will create a Verge3d loader using Angular
– I need to open a communication between the Angular and the 3d Application.

The first goal has no problem as I was able to load the necessary scripts and the 3d application itself.

The second goal is my problem now. Based on the documentation the Puzzle supports calling an external JS function and it also supports that the created JS functions in the Puzzle can be called outside (Paren Doc). So I took this advantage. Now from my first report where I load the gLTF using app.loadScene() I was able to create a communication between the Angular and the Puzzle but I saw that I missed something which is the other Html file where it has the extra UI interactions. So in order for me to load the full 3d application, I need to use an iframe (correct me if I’m wrong)

However, it seems that I can no longer communicate an external JS function to the Puzzles and vice-versa using this method. Is there another way on doing this?

2020-11-11 at 12:48 pm #35225

Yuri Kovelenov
Staff

Hi,

you can trigger puzzles from JavaScript as shown here:

https://www.soft8soft.com/docs/manual/en/introduction/Using-JavaScript.html

Chief 3D Verger | LinkedIn | Twitter

2020-11-12 at 9:14 am #35255

ninojoevelz(old)
Customer

Hi,

I tried this one already but it doesn’t work. I load the 3d application using iframe

2020-11-12 at 11:31 am #35276

Yuri Kovelenov
Staff

Can you show your code or puzzles?

Chief 3D Verger | LinkedIn | Twitter

2020-11-13 at 3:10 am #35295
ninojoevelz(old)
Customer
This is the code in Angular
```
<iframe
  src="http://localhost:8668/applications/heartinteractive2/index.html"
  height="100%"
  width="100%"
  (load)="onThree3dLoad()"
  #vergeContainer>
</iframe>
```
and to communicate execute an external script inside Puzzles is to have this right?
```
function prepareExternalInterface(app) {
    app.ExternalInterface.myJSFunction = function(numericArg, textArg) {
        alert('Got some params from Puzzles: ' + numericArg + ' and ' + textArg);
    }
}
```
but I cannot do that anymore because I don’t have the App(). I didn’t use this method to load the application because I’m using an Iframe

var app = new v3d.App('v3d-container', null, new v3d.SimplePreloader({ container: 'v3d-container' }));

However, I still try by adding this one but still doesn’t work. I was wondering if there are other ways of loading the whole application by using like app.loadIframe() something.
2020-11-13 at 7:29 am #35299

Yuri Kovelenov
Staff

you can access the app instance via global namespace: v3d.apps[0]

Chief 3D Verger | LinkedIn | Twitter

2020-11-13 at 9:37 am #35306

ninojoevelz(old)
Customer

It says undefined

2020-11-13 at 9:50 am #35308

ninojoevelz(old)
Customer

Anyway, I found a workaround with this and it is already working. However, I have another problem hope you can help me.

In the Puzzle Events, is there a way to destroy an active event listener? Because what happened is that I have 2 main event listeners for the HTML element and inside of it have other event listeners for the objects (See Image3 and Image4). If the first HTML event listener gets triggered (clicked) I want to make the inner event listeners start listening when the objects get clicked and only those inner event listeners should be active. If the second HTML event listener gets triggered (click) the inner event listeners should be enabled and the other inner event listeners from the other HTML element should be disabled.

So currently when I clicked the “box1” inner events activated (Correct) but when I click the “box2” inner events activated and other events still active (Wrong)

Attachments:
You must be logged in to view attached files.

2020-11-13 at 10:36 am #35312

Yuri Kovelenov
Staff

Unfortunately there is no way to deactivate an event listener at the moment. You might work around this problem by not nesting event and when clicked puzzles, but rather use variables to track the state.

Chief 3D Verger | LinkedIn | Twitter

2020-11-13 at 10:43 am #35313

ninojoevelz(old)
Customer

I see. This might work. Thanks
Author

Posts