Loading files into viewer by clicking on link in popup

Hi I am currently using a script that uses Unity Model Viewer with React. The script was created by someone else. Not being a seasoned coder I have managed to customise the script for myself but would like to replace the viewer with Babylon. This is what I would like to do:

  1. select a link from the side navbar list.
  2. the link opens a popup that displays thumbnail of model/s in a specified folder.
  3. click on one of the thumbnails and add it to the viewer closing the popup.
    The script I am using does this by reading the content of a catalog.json file that is read into the pop up depending on which side link (i.e. the left menu) is chosen. The catalog.json references the folder in which that particular model and thumbnail is stored and then sends it to the main viewer.
    If anyone can help me with this it would really help my learning of Babylon and js in general. Is this a relatively straight forward thing to do? Thank You:)

You can do that in different ways:

The simplest (and worse) way would be to simply have different viewer copies, and each link open one copy.

A still simple way but slightly better would be to link to the same viewer but passing the name of the model in the url, like: https://yoursite.com/viewer.html?model=xyz.glb .

And finally, the best one would be to have javascript code on the sidebar which would call a load function on the viewer, passing the model as parameter. This one is possible but slightly more involved to do.

Thanks for this. I believe that the last option is how the script i have works. I am a newbie so if you could point me in the direction of an example that would be great. Thanks again.

I got in touch with the guy who wrote the original script and his reply was as follows:
“Babylonjs is a complete different 3D engine. So you can use the same skeleton but you need to develop the loader.
Today, the 3D model loading is embedded in the Unity build and it is not possible to extract it. Indeed, the loader is developed in C and C#. Everything is compiled in wasm by IL2CPP and then Emscripten.
The library behind the loader is ASSIMP. You can see if there are people who have implemented ASSIMP for Babylon.”
So, my next move is to work out how to do this. Any suggestions would be much appreciated!

Thank you.

The script that I would like to replicate using Babylonjs is here on Github - GitHub - Rufus31415/react-webgl-3d-viewer-demo: A 45+ 3D file format viewer built with React and WebGL. The demo loads several different file types, however, I only need .gltf, .glb , obj and stl . It uses Unity and I would like to change this to use the Babylonjs viewer. The main aspect that I want to reproduce is the way in which the script works - reading a catalog.json file that holds info about models which this script does very well. As I mentioned before I am a newbie and I am learning fast but do need help. If anyone can advise so that I can learn that would be great.
here is the demo link - A WebGL multiple file 3D viewer
Thanks again.

It seems to me that, in addition to Babylon.js, you also need to better understand Html5 and Javascript, as some of the features you are looking after are not specific to Babylon.js.

You need to learn, for example, how to create a html5 menu, how to load and parse a json file and how to call a function from the menu.

Although not exactly complex, it takes some time to write that code.

I am overwhelmed by my own tasks, but who knows, maybe someone jumps in and helps you further.

Thanks for this and yes you are correct. Thank you very much for your advice.

Well, after several weeks of learning about Babylon and React I have managed to identify that I need to change the viewer.js page. I have posted the original code here to see if anyone can help me change the unity viewer to the babylon viewer - that is what I am trying to achieve. I don’t have enough experience to do this myself at this stage, however, I have tried… hundreds of times!!
If anyone can help this would be absolutely fantastic. The viewer.js code is below in its original state. I understand that I have to declare babylon etc.


import React, { useEffect, useState } from 'react'

import Unity, { UnityContent } from "react-unity-webgl"; // specific to Unity

import { makeStyles } from '@material-ui/core/styles';

const unityContent = new UnityContent(

    "Build/build.json",                                 // loading Unity viewer

    "Build/UnityLoader.js",                             //  loading unity viewer etc

    {                                                   // I essentially need to change this page to display the Babylon Viewer

        adjustOnWindowResize: true

    }

);

const useStyles = makeStyles((theme) => ({

    root: {

        width: "100%",

        height: "100%"

    },

    unityContent: {

        background: "white",

        width: "100%",

        height: "100%",

    },

    paper: {

        padding: theme.spacing(2),

        textAlign: 'center',

        color: theme.palette.text.secondary,

    },

}));

export default function Viewer(props) {

    const classes = useStyles();

    const [ready, setReady] = useState(false);

    const [fileName, setFileName] = useState(null);

    unityContent.on("Ready", () => {

        setReady(true)

        loadFile();

        if (typeof props.onReady == "function") props.onReady();

    }

    );

    unityContent.on("OnLoaded", () => {

        try {

            if (typeof props.onLoaded == "function") props.onLoaded();

        }

        catch{ }

    }

    );

    unityContent.on("OnError", () => {

        try {

            if (typeof props.onError == "function") props.onError();

        }

        catch{ }

    }

    );

    useEffect(() => {

        if (ready) loadFile()

    }, [props.file]);

    const loadFile = () => {

        try {

            if (props.file && typeof props.file == "object") {

                var reader = new FileReader();

                reader.onload = (function (file) {

                    return function (e) {

                        (window.filedata = window.filedata ? window.filedata : {})[file.name] = e.target.result;

                        unityContent.send("root", "FileUpload", file.name)

                        setFileName(file.name);

                    }

                })(props.file);

                reader.readAsArrayBuffer(props.file);

            }

            else if (typeof props.file == "string") {

                unityContent.send("root", "Load", JSON.stringify({ file: props.file }))

                setFileName(props.file);

            }

            else {

                unityContent.send("root", "Clear");

                setFileName("");

            }

        }

        catch (e) {

            console.log(e);

            if (typeof props.onError == "function") props.onError();

        }

    }

    return (

        <div className={classes.root} >

            <Unity unityContent={unityContent} height="100%" width="100%" className={classes.unityContent} />

        </div>

    )

}

Here is the link to what I am trying to achieve using this script
https://digital-archaeology.co.uk/arcvis/RED/

I have sust out how react chooses the info to populate the navbar from a json file and sends it to a pop up from which the model is selected and then sets the file that the viewer will show. I just cant seem to get the viewer integrated. This viewer.js page is the key to this.