Home › Forums › Programming › Puzzles/Logic won’t show
Tagged: angular, Logic not showing, Puzzle not showing
- This topic has 13 replies, 2 voices, and was last updated 4 years ago by ninojoevelz(old).
-
AuthorPosts
-
2020-11-09 at 8:30 am #35143ninojoevelz(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 #35153Yuri KovelenovStaffHi,
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
2020-11-10 at 2:27 am #35171ninojoevelz(old)CustomerOh, 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 #35175Yuri KovelenovStaff2020-11-11 at 6:18 am #35215ninojoevelz(old)CustomerHi 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 #35225Yuri KovelenovStaffHi,
you can trigger puzzles from JavaScript as shown here:
https://www.soft8soft.com/docs/manual/en/introduction/Using-JavaScript.html
2020-11-12 at 9:14 am #35255ninojoevelz(old)CustomerHi,
I tried this one already but it doesn’t work. I load the 3d application using
iframe
2020-11-12 at 11:31 am #35276Yuri KovelenovStaff2020-11-13 at 3:10 am #35295ninojoevelz(old)CustomerThis 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 anIframe
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 #35299Yuri KovelenovStaff2020-11-13 at 9:37 am #35306ninojoevelz(old)CustomerIt says
undefined
2020-11-13 at 9:50 am #35308ninojoevelz(old)CustomerAnyway, 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 #35312Yuri KovelenovStaff2020-11-13 at 10:43 am #35313ninojoevelz(old)CustomerI see. This might work. Thanks
-
AuthorPosts
- You must be logged in to reply to this topic.