Using dynamic data from a http request inside a 3D application

Questions
1

I want to use BabylonJS for a project in which I want to display data fetched from an API within a 3D environment. This data will simply be strings, along with some image URLs which I want to display using the 3D GUI system that comes with BJS.

Since I don’t have much back-end experience – for a theoretical standard 2D DOM implementation of this project – I would use Node.JS along with Express and EJS (templating language) to serve a serverside rendered HTML page, since this is the method I’m most familiar with.

I’d love to know if it’s possible to do something similar with BabylonJS. Using any of the previously mentioned systems would be preferred since it’s the only back-end libraries I have experience with, but any other implementation is also very welcome.

For clarity’s sake, this is essentially what I want my website to do:

  1. Fetch data from an API upon loading the webpage
  2. Display this data using the 3D GUI system in BJS
  3. Filter this data using buttons within the 3D GUI system

I’ve been looking online to try and find how to do this myself, but couldn’t find much of anything to help me.
Any help would be appreciated, even if it’s just a nudge in the right direction :slight_smile:

EDIT: Through ChatGPT I’ve found that it’s possible to serve an HTML file which has inline javascript, and using an HTML templating language within that inline JS. However, I’d like to be able to have my JS in a seperate file, so that I can use ES6 and tree shaking.

Is there any way to accomplish this?

The main thing I don’t understand is how to get the data from my Node.JS index.js file to my javascript file to actually display the data. The data is passed to the HTML page when a get request is received by the Node server, but I don’t understand how to then pass this data on further to a javascript file which contains my BabylonJS code.

3

Hmm, just to confirm my understanding, basically you want to do server-side rendering of a page and add a Babylon canvas to it?

4

it seems you have some aquired some knowledge of web development tools but lack the basic understanding of web development.

you can make requests to any api endpoints you want from javascript. Whether those requests will work or not are based on things like Authentication , correct request format or parameters , CORS policies for cross domain etc.

the end point of the said API is just software that knows to receive those requests and what to do with them, for example to perhaps return an array of image urls. For the most part the return format is JSON , but it doesnt have to be, again the API code decides what it returns.

Outside of using modern build tools , Such a little snippit of javascript code can be placed in the html file in script tags or in a separate .js file that is loaded into the dom manually

If you use modern build tools with systems of using es6 and tree shaking etc, Just remember, In the end after tree shaking and all that stuff… the final build code is still just javascript code that is still just going to be inline in the html page somewhere or loaded into the dom at some point.

So the build tool just changed the authoring of it all , not the workings of it.

A request still has to be made via javascript , using the http request functionality exposed by the dom engine. Many frameworks and 3rd party tools have abstractions to the vanilla requests object , newer javascript even has it own simple fetch function now to do requests , read about that here :

learn to play with code doing these things using sites like codepen or jsfiddle or whichever you prefer, they are all pretty powerful now. Babylon also has it own playground tool for testing code snippets online :

A good tool to test requests is “postman” :

https://www.postman.com/

For API’s to play with just google some , there are many dev ones available for testing getting JSON with possible expected structures like lists of names or images with certan sizes even.

hth

3 Likes