80 lines
3.0 KiB
HTML
80 lines
3.0 KiB
HTML
<html lang = "en">
|
|
<head>
|
|
<meta charset = "UTF-8">
|
|
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
|
|
<title> Door render </title>
|
|
<link rel = "stylesheet" href = "style.css">
|
|
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
|
|
<script type = "importmap">
|
|
{
|
|
"imports": {
|
|
"three": "./lib/node_modules/webgl-door-visualizer/three.module.js",
|
|
"three/addons/": "./lib/node_modules/webgl-door-visualizer/"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- definition of Menu -->
|
|
<div id = 'divMenu'>
|
|
<!-- 3 elements: Logo, button "?" and Information -->
|
|
<div class = 'container'>
|
|
<img id = 'imgLogo' src = 'Images/logo.png'>
|
|
</div>
|
|
<div class = 'container'>
|
|
<button id = 'helpButton'>?</button>
|
|
</div>
|
|
<div class = 'container'>
|
|
<div id = 'infoDiv'>
|
|
<pre>
|
|
Camera settings :
|
|
Zoom : Wheel-Scroll
|
|
Pan : Mouse-Wheel and Drag
|
|
Rotate : Key-CTRL + Mouse-Right and Drag
|
|
Center : Key-'Space'
|
|
Type : Key-O ( orthographic )
|
|
Key-P ( perspective )
|
|
|
|
Toggle Auto-rotation : Key-R
|
|
|
|
Toggle Show-Dimension : Key-D
|
|
|
|
Toggle Show-Cube : Key-C
|
|
|
|
Toggle Show-Frame : Key-F
|
|
|
|
Toggle Show-Grid : Key-G
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id = 'DoorRender'></div>
|
|
<div id = 'RefRender'></div>
|
|
<div id = 'Ref1Render'></div>
|
|
|
|
<script type = 'module' src="./lib/node_modules/webgl-door-visualizer/webgl_draw.js"></script>
|
|
<script type = 'module'>
|
|
import { webgl_original } from './lib/node_modules/webgl-door-visualizer/webgl_draw.js';
|
|
|
|
const WGL = new webgl_original();
|
|
|
|
let options ={
|
|
modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models',
|
|
fName: getUrlParameter('src')
|
|
}
|
|
|
|
// Reading URL parameters -------------------------------------------------------------------------
|
|
function getUrlParameter( name) {
|
|
// get query string from URL
|
|
const queryString = window.location.search ;
|
|
// create URLSearchParams object from query string
|
|
const urlParams = new URLSearchParams( queryString) ;
|
|
// get parameter value by name
|
|
return urlParams.get( name) ;
|
|
}
|
|
|
|
WGL.initcall(options);
|
|
</script>
|
|
</body>
|
|
</html> |