<html>
<head>
<meta charset="UTF-8">
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
<style>
.assa-360d-container nav-bar .nav-container {
justify-content: flex-end;
}
.assa-360d-container nav-bar .nav-container .logo-button {
display: none;
}
.assa-360d-container nav-bar .nav-container .fullscreen {
display: block !important;
}
canvas {
height: 100%;
width: 100%;
outline: none;
z-index: 999;
}
html,
body {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.fullscreen-btn {
position: absolute;
bottom: 10px;
right: 10px;
}
.fullscreen-btn .icon {
pointer-events: none;
display: inline-block;
}
.fullscreen-btn .fullscreen-icon:after {
font-size: 16px;
content: '\E740';
}
#loadingScreen {
position: absolute;
width: 100%;
height: 100%;
color: white;
font-size: 50px;
text-align: center;
background-color: #bb464bcc;
z-index: 9999;
}
</style>
<title>3D Model rendering</title>
</head>
<body>
<div id="loadingScreen">Loading Asset...</div>
<canvas id='3dCanvas' touch-action="none" style="touch-action: none;" tabindex=0></canvas>
<script>
const svg = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024">
<title></title>
<g id="icomoon-ignore">
</g>
<path fill="#000" d="M1024.001 31.998c0-17.856-14.143-31.999-31.999-31.999h-287.52c-18.175 0-31.712 14.337-31.744 32.513 0 18.144 13.568 31.488 31.744 31.488h255.519l-0.513 256.735c0 18.175 13.824 31.999 31.999 31.999 18.175-0.032 31.999-13.824 31.999-31.999l0.513-288.256c0-0.096-0.032-0.16-0.032-0.224 0.003-0.096 0.033-0.16 0.033-0.258z"></path>
<path fill="#000" d="M320.513-0.001h-287.52c-0.096 0-0.16 0.032-0.255 0.032-0.064 0-0.16-0.032-0.224-0.032-17.856 0-32.002 14.143-32.002 31.999l-0.511 288.256c0 18.175 14.337 31.744 32.513 31.744 18.144 0 31.488-13.568 31.488-31.744l0.511-256.257h255.999c18.175 0 31.999-13.824 31.999-31.999-0.031-18.175-13.855-31.999-31.997-31.999z"></path>
<path fill="#000" d="M319.521 959.999h-255.519v-255.999c0-18.175-13.824-31.999-31.999-31.999s-32.002 13.821-32.002 31.999v287.519c0 0.096 0.032 0.16 0.032 0.224 0 0.096-0.032 0.16-0.032 0.255 0 17.856 14.143 31.999 31.999 31.999h287.519c18.175 0 31.712-14.337 31.744-32.513 0.003-18.143-13.566-31.486-31.741-31.486z"></path>
<path fill="#000" d="M991.487 672.736c-18.175 0-31.52 13.568-31.488 31.744v255.519h-255.999c-18.175 0-31.999 13.824-31.999 31.999s13.824 31.999 31.999 31.999h287.519c0.096 0 0.16-0.032 0.224-0.032 0.096-0.032 0.16 0.032 0.255 0.032 17.856 0 31.999-14.143 31.999-31.999v-287.519c0.003-18.175-14.334-31.744-32.51-31.744z"></path>
</svg>`;
const blob = new Blob([svg], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
var canvas = document.getElementById('3dCanvas');
var startRenderLoop = function (engine, canvas) {
engine.runRenderLoop(function () {
if (sceneToRender && sceneToRender.activeCamera) {
sceneToRender.render();
}
});
};
var engine = null;
var scene = null;
var sceneToRender = null;
var createDefaultEngine = function () {
return new BABYLON.Engine(canvas, true, {
isPointerLock: false,
preserveDrawingBuffer: true,
stencil: true,
disableWebGL2Support: false,
});
};
var delayCreateScene = function () {
// Create a scene.
var scene = new BABYLON.Scene(engine);
scene.environmentTexture = new BABYLON.CubeTexture('https://www.hesinnovations.com/content/dam/assa-abloy/americas/ems/hes/document/studio.env', scene);
scene.clearColor = new BABYLON.Color3(1, 1, 1);
// Append glTF model to scene.
BABYLON.SceneLoader.Append(
'https://www.hesinnovations.com/content/dam/assa-abloy/americas/ems/hes/image/AADSS1183602.glb',
'',
scene,
function (scene) {
scene.createDefaultCameraOrLight(true, true, true);
scene.activeCamera.panningSensibility = 0;
scene.activeCamera.lowerRadiusLimit = 0.1;
scene.activeCamera.upperRadiusLimit = 0.4;
scene.activeCamera.wheelDeltaPercentage = 0.009;
scene.activeCamera.alpha += Math.PI;
}
);
// GUI
var advancedTexture =
BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI');
var fs = BABYLON.GUI.Button.CreateImageOnlyButton('b1', url);
fs.image.stretch = BABYLON.GUI.Image.STRETCH_NONE;
fs.width = '30px';
fs.height = '30px';
fs.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
fs.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
fs.isPointerBlocker = 'true';
fs.hoverCursor = 'pointer';
fs.onPointerUpObservable.add(function () {
engine.switchFullscreen(true);
setTimeout(() => {
window.dispatchEvent(
new KeyboardEvent('keydown', {
keyCode: '9',
})
);
}, 0);
});
advancedTexture.addControl(fs);
engine.hideLoadingUI();
return scene;
};
window.initFunction = async function () {
var asyncEngineCreation = async function () {
try {
return createDefaultEngine();
} catch (e) {
console.log(
'the available createEngine function failed. Creating the default engine instead'
);
return createDefaultEngine();
}
};
window.engine = await asyncEngineCreation();
if (!engine) throw 'engine should not be null.';
var loadingScreenDiv = window.document.getElementById('loadingScreen');
function customLoadingScreen() {
//console.log('customLoadingScreen creation');
}
customLoadingScreen.prototype.displayLoadingUI = function () {
//console.log('customLoadingScreen loading');
loadingScreenDiv.innerHTML = 'loading';
};
customLoadingScreen.prototype.hideLoadingUI = function () {
//console.log('customLoadingScreen loaded');
loadingScreenDiv.style.display = 'none';
};
var loadingScreen = new customLoadingScreen();
engine.loadingScreen = loadingScreen;
engine.displayLoadingUI();
startRenderLoop(engine, canvas);
window.scene = delayCreateScene();
};
initFunction().then(() => {
sceneToRender = scene;
});
// Resize
window.addEventListener('resize', function () {
engine.resize();
});
window.onload = () => {
let canv = document.getElementById('3dCanvas');
canv.addEventListener('wheel', function(e){e.preventDefault();}, {passive: false})
}
</script>
</body>
</html>PROBLEM ONE
/*
There are two copies of .glb files here. One works fine while the other always renders too much zoomed into itself.
Out of 100's of product's .glb files that I am using, this is the only one that is showing issues with the upper and lowerRadiusLimit. All the other files are rendering properly.
Please use below mentioned URL for the .glb files and test by replacing the URL at line number 119 in HTML
*/
/*
The one that works properly with lowerRadiusLimit and upperRadiusLimit applied.
https://www.hesinnovations.com/content/dam/assa-abloy/americas/ems/hes/image/AADSS1183603.glb
*/
/*
The one that renders with zoomed into view. Doesn't work properly until I remove the lowerRadiusLimit and upperRadiusLimit at line number 125 and 126.
https://www.hesinnovations.com/content/dam/assa-abloy/americas/ems/hes/image/AADSS1183602.glb
*/
PROBLEM TWO
/*
I have applied a small loading text that should come up as the .glb file is loading behind the scene. But that is not working either.
Code for this can be found from #173 to #189
*/
/*
Please advise. Thank You.
*/
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.