Egalware/web3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

review test area con 2 varianti index2 e index3

Browse Source
This commit is contained in:
Samuele Locatelli
2024-06-22 10:48:51 +02:00
parent 6fa3363acc
commit b26ba3824f
4 changed files with 213 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
WebDoorView/3DM_test/test_js_call/index2.html
+59
View File
@@ -0,0 +1,59 @@
<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' src="./lib/node_modules/webgl-door-visualizer/draw_call.js"></script>
</body>
</html>
WebDoorView/3DM_test/test_js_call/index3.html
+80
View File
@@ -0,0 +1,80 @@
<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>
WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js
Generated Vendored
+20
View File
@@ -0,0 +1,20 @@
import { webgl_original } from './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);
WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw.js → WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js
Generated Vendored
+54 -65
View File
@@ -5,9 +5,7 @@ import { Rhino3dmLoader} from './jsm/loaders/3DMLoader.js' ;
import ViewCubeControls from './custom/cubeControls.js';
import { getStaticRef, updateRef } from './custom/refControls.js' ;
// VARIABILI DI CONTROLLO - da rivedere
// VARIABILI DI CONTROLLO
const EPS_SMALL = 0.001 ;
const GRID_GROUP_NAME = 'gridGroup' ;
const FRAME_GROUP_NAME = 'frameGroup' ;
@@ -22,8 +20,8 @@ var CAMERA_TYPE = CAMERA_ORTHO ;
var SHOW_DIMENSION = true ;
var GRID_MAIN_COLOR = new THREE.Color( 0x000000) ;
var GRID_SECOND_COLOR = new THREE.Color( 0xcccccc) ;
var PATH = 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models' ;
var FILE_NAME = getUrlParameter('src') ;
var PATH = './Door_models' ;
var FILE_NAME = 'Demo.3dm'
var CTRL_DOWN = false ;
// ref global variables ---------
@@ -35,64 +33,55 @@ var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var fram
var m_box ; var m_size ; var m_center ; // set in setCameraPosition(), used in setGrid(), setFrame()
/* ------------------------------ */
//init();
// costanti globali
// scene
const scene = new THREE.Scene() ;
scene.background = SCENE_BACKGROUND_COLOR ;
// camera
const perspCamera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 150000) ;
const ortoCamera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,
window.innerHeight / 2, window.innerHeight / - 2, EPS_SMALL, 150000) ;
// render
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true}) ;
renderer.setSize( window.innerWidth, window.innerHeight) ;
renderer.setPixelRatio( 2 * window.devicePixelRatio) ;
document.getElementById( 'DoorRender').appendChild( renderer.domElement) ;
renderer.shadowMap.enabled = true ;
// light
const ambientLight = new THREE.AmbientLight( 0xffffff, 2.5) ; // color, intensity
scene.add( ambientLight) ;
// controls
const controls = new OrbitControls( CAMERA_TYPE == CAMERA_PERSP ? perspCamera : ortoCamera, renderer.domElement) ;
controls.autoRotate = true ;
// entity-groups ( to split entities between dimensions and general's ones )
const dimensionGroup = new THREE.Group() ;
dimensionGroup.name = DIMENSION_GROUP_NAME ;
const general_entity_Group = new THREE.Group() ;
general_entity_Group.name = GENERAL_ENTITY_GROUP_NAME ;
// creating grid and frame ( over it ) Group
const gridGroup = new THREE.Group() ;
const frameGroup = new THREE.Group() ;
//init();
class webgl_original {
async initcall({ modelPath, fName}) {
PATH = modelPath;
FILE_NAME = fName;
console.log('path: ' + modelPath)
console.log('name: ' + fName)
// scene
const scene = new THREE.Scene() ;
scene.background = SCENE_BACKGROUND_COLOR ;
// camera
const perspCamera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 150000) ;
const ortoCamera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,
window.innerHeight / 2, window.innerHeight / - 2, EPS_SMALL, 150000) ;
// render
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true}) ;
renderer.setSize( window.innerWidth, window.innerHeight) ;
renderer.setPixelRatio( 2 * window.devicePixelRatio) ;
document.getElementById( 'DoorRender').appendChild( renderer.domElement) ;
renderer.shadowMap.enabled = true ;
// light
const ambientLight = new THREE.AmbientLight( 0xffffff, 2.5) ; // color, intensity
scene.add( ambientLight) ;
// controls
const controls = new OrbitControls( CAMERA_TYPE == CAMERA_PERSP ? perspCamera : ortoCamera, renderer.domElement) ;
controls.autoRotate = true ;
// entity-groups ( to split entities between dimensions and general's ones )
const dimensionGroup = new THREE.Group() ;
dimensionGroup.name = DIMENSION_GROUP_NAME ;
const general_entity_Group = new THREE.Group() ;
general_entity_Group.name = GENERAL_ENTITY_GROUP_NAME ;
// creating grid and frame ( over it ) Group
const gridGroup = new THREE.Group() ;
const frameGroup = new THREE.Group() ;
let startTime = performance.now();
// reading .3dm file
readDoor() ;
// //console.log(fName)
// setLoaders();
// await init();
await readDoor() ;
let endTime = performance.now();
let timeElapsed = endTime - startTime;
console.log('init done in : ' + timeElapsed);
}
// setCameraType(){
// toggleCamera( perspectiveCamera, orthographicCamera);
// }
// refreshcall(nStart, nEnd) {
// refreshElement(nStart, nEnd);
// }
// resetCamera() {
// SetCameraPos( m_nCameraStartPos, ORIG) ;
// }
}
export { webgl_original }
@@ -393,12 +382,12 @@ helpButton.addEventListener( "click", function() {
infoDiv.style.display = "none";
}) ;
// 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) ;
}
// // 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) ;
// }