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>