Tutorial: Samples

Samples

Simple Viewer Example

<html>
    <head>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse.js"></script>

        <script>
            // Provide your 3dverse.com credentials here
            const user      = '';
            const password  = '';
            const sceneUUID = '3d1578da-7529-4f73-ae34-c438c09d2ade';

            window.addEventListener('load', async () =>
            {
                const connectionInfo = await SDK3DVerse.webAPI.startSession(user, password, sceneUUID);

                SDK3DVerse.notifier.on('onLoadingStarted', () => document.getElementById("message").innerHTML = "Connecting...");
                SDK3DVerse.notifier.on('onLoadingProgress', (status) => document.getElementById("message").innerHTML = status.message);
                SDK3DVerse.notifier.on('onLoadingEnded', (status) => document.getElementById("message").innerHTML = status.message);
                
                SDK3DVerse.setupDisplay(document.getElementById('display_canvas'));
                SDK3DVerse.startStreamer(connectionInfo);
            });
        </script>
    </head>

    <body>
        <div id="message">Loading...</div>
        <canvas tabindex="1" id="display_canvas" width="1280" height="720"></canvas>
    </body>
</html>

Select and transform entities

<html>
    <head>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse.js"></script>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse_Gizmos_Ext.js"></script>

        <script>
            // Provide your 3dverse.com credentials here
            const user      = '';
            const password  = '';
            const sceneUUID = '3d1578da-7529-4f73-ae34-c438c09d2ade';

            window.addEventListener('load', async () =>
            {
                var canvas = document.getElementById('display_canvas');
                
                const connectionInfo = await SDK3DVerse.webAPI.startSession(user, password, sceneUUID);
                
                SDK3DVerse.notifier.on('onLoadingStarted', () => document.getElementById("message").innerHTML = "Connecting...");
                SDK3DVerse.notifier.on('onLoadingProgress', (status) => document.getElementById("message").innerHTML = status.message);
                SDK3DVerse.notifier.on('onLoadingEnded', (status) => document.getElementById("message").innerHTML = status.message);
                
                SDK3DVerse.setupDisplay(canvas);
                SDK3DVerse.startStreamer(connectionInfo);
                
                SDK3DVerse.installExtension(SDK3DVerse_Gizmos_Ext);
                SDK3DVerse.connectToEditor();

                canvas.addEventListener(
                    'mouseup',
                    async (e) => 
                    {
                        var keepOldSelection = e.ctrlKey || e.metaKey;
                        var {entity} = await SDK3DVerse.engineAPI.castScreenSpaceRay(e.clientX, e.clientY, true, keepOldSelection);

                        if(entity)
                        {
                            document.getElementById('selected_entity').innerHTML = `Selected entity : <strong>${entity.getName()}</strong>`;
                        }
                    }, 
                    false
                );
            });
        </script>
    </head>

    <body>
        <div id="message">Loading...</div>
        <div id="selected_entity"></div>
        <canvas tabindex="1" id="display_canvas" width="1280" height="720"></canvas>
    </body>
</html>

Propagate changes at runtime

<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="utf-8"/>
        <title>3DVerse SDK Sample : Light</title>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse.js"></script>

        <script>
            // Provide your 3dverse.com credentials here
            const user              = '';
            const password          = '';
            const sceneUUID         = 'aa2851e4-32dd-496c-a544-73c77eedd032';
            const lightEntityEUID   = '5c7aff5c-c728-4bab-8e8e-6d107505695a';
            let lightEntity         = null;

            window.addEventListener('load', async () =>
            {
                var connectionInfo = await SDK3DVerse.webAPI.startSession(user, password, sceneUUID);

                SDK3DVerse.notifier.on('onLoadingStarted', () => document.getElementById("message").innerHTML = "Connecting...");
                SDK3DVerse.notifier.on('onLoadingProgress', (status) => document.getElementById("message").innerHTML = status.message);
                SDK3DVerse.notifier.on('onLoadingEnded', (status) => document.getElementById("message").innerHTML = status.message);

                SDK3DVerse.notifier.on('sceneGraphReady', async () =>
                {
                    const entities  = await SDK3DVerse.engineAPI.findEntitiesByEUID(lightEntityEUID);
                    lightEntity     = entities[0];
                });
                
                SDK3DVerse.setupDisplay(document.getElementById('display_canvas'));
                SDK3DVerse.startStreamer(connectionInfo);
                SDK3DVerse.connectToEditor();
            });

            async function toggleLight()
            {
                if(!lightEntity)
                {
                    return;
                }

                const currentIntensity  = lightEntity.getComponent('point_light').intensity;
                const newIntensity      = currentIntensity > 0 ? 0 : 10;
                lightEntity.setComponent('point_light', { intensity : newIntensity });
                SDK3DVerse.engineAPI.propagateChanges();
            }

        </script>
    </head>

    <body>
        <div id="message">Loading...</div>
        <button onclick="toggleLight()">Toggle light</button>
        <br>
        <canvas tabindex="1" id="display_canvas" width="1280" height="720"></canvas>
    </body>
</html>

Create measures

<html>
    <head>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse.js"></script>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse_ThreeJS_Ext.js"></script>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse_MeasureDisplay_Ext.js"></script>
        <script src="https://3dverse.com/sdk/dist/SDK3DVerse_ViewportDomOverlay_Ext.js"></script>

        <script>
            // Provide your 3dverse.com credentials here
            const user      = '';
            const password  = '';
            const sceneUUID = '3d1578da-7529-4f73-ae34-c438c09d2ade';

            window.addEventListener('load', async () =>
            {
                const canvas = document.getElementById('display_canvas');
                
                const connectionInfo = await SDK3DVerse.webAPI.startSession(user, password, sceneUUID);
                
                SDK3DVerse.notifier.on('onLoadingStarted', () => document.getElementById("message").innerHTML = "Connecting...");
                SDK3DVerse.notifier.on('onLoadingProgress', (status) => document.getElementById("message").innerHTML = status.message);
                SDK3DVerse.notifier.on('onLoadingEnded', (status) => document.getElementById("message").innerHTML = status.message);
                
                SDK3DVerse.setupDisplay(canvas);
                SDK3DVerse.startStreamer(connectionInfo);
                SDK3DVerse.connectToEditor();
                
                await SDK3DVerse.installExtension(SDK3DVerse_ThreeJS_Ext);
                await SDK3DVerse.installExtension(SDK3DVerse_ViewportDomOverlay_Ext);
                const measureEX = await SDK3DVerse.installExtension(SDK3DVerse_MeasureDisplay_Ext);
                measureEX.setUnit(10, "cm");

                canvas.addEventListener(
                    'mouseup',
                    (e) => 
                    {
                        if(e.altKey || e.metaKey)
                        {
                            const measureColor = 'rgb(0, 220, 0)';
                            measureEX.createMeasureFromMouseEvent(e, 2, measureColor);
                        }
                    }, 
                    false
                );
            });
        </script>
    </head>

    <body>
        <div id="message">Loading...</div>
        <div style="position: absolute;">
            <canvas tabindex="1" id="display_canvas" width="1280" height="720"></canvas>
        </div>
    </body>
</html>