From 6fa3363acc36e2213921c6fd64ff26fabe24e5b9 Mon Sep 17 00:00:00 2001
From: Samuele Locatelli <samuele@steamware.net>
Date: Fri, 21 Jun 2024 17:12:04 +0200
Subject: [PATCH] update parziale draw.js

---
 WebDoorView/3DM_test/test_js_call/index.html  |  30 +-
 .../webgl-door-visualizer/draw.js             | 404 ++++++++++++++++++
 2 files changed, 419 insertions(+), 15 deletions(-)
 create mode 100644 WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw.js

diff --git a/WebDoorView/3DM_test/test_js_call/index.html b/WebDoorView/3DM_test/test_js_call/index.html
index 2a48daf..ad2e9d1 100644
--- a/WebDoorView/3DM_test/test_js_call/index.html
+++ b/WebDoorView/3DM_test/test_js_call/index.html
@@ -27,23 +27,23 @@
             <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
+                        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-Cube : Key-C
 
- Toggle Show-Frame : Key-F
+                        Toggle Show-Frame : Key-F
 
- Toggle Show-Grid : Key-G
+                        Toggle Show-Grid : Key-G
                     </pre>   
                 </div>
             </div>
@@ -54,7 +54,7 @@
         <div id = 'Ref1Render'></div>
 
         <script type = 'module'>
-           // importing
+            // importing
             import * as THREE from './lib/node_modules/webgl-door-visualizer/three.module.js' ;
             import { OrbitControls } from 'three/addons/jsm/controls/OrbitControls.js';
             import { Rhino3dmLoader} from 'three/addons/jsm/loaders/3DMLoader.js' ;
diff --git a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw.js b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw.js
new file mode 100644
index 0000000..52ce57d
--- /dev/null
+++ b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw.js
@@ -0,0 +1,404 @@
+// importing
+import * as THREE from './three.module.js' ;
+import { OrbitControls } from './jsm/controls/OrbitControls.js';
+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
+const EPS_SMALL = 0.001 ;
+const GRID_GROUP_NAME = 'gridGroup' ;
+const FRAME_GROUP_NAME = 'frameGroup' ;
+const CAMERA_PERSP = 0 ;
+const CAMERA_ORTHO = 1 ;
+const DIMENSION_GROUP_NAME = 'dimGroup' ;
+const DIMENSION_DISCRIMINANT_NAME = 'dim_' ;
+const GENERAL_ENTITY_GROUP_NAME = 'generalGroup' ;
+const START_CAMERA_POSITION = ( new THREE.Vector3( -0.3994, 0.6339, 0.66223)).normalize() ;
+var SCENE_BACKGROUND_COLOR = new THREE.Color( 0x808080) ;
+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 CTRL_DOWN = false ;
+
+// ref global variables ---------
+var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ; var cube_ref ;
+var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var frame_ref1 ;
+
+// shared variables
+/* Box3d of the door ------------ */
+var m_box ; var m_size ; var m_center ; // set in setCameraPosition(), used in setGrid(), setFrame() 
+/* ------------------------------ */
+
+//init();
+class webgl_original {
+    async initcall({ modelPath, fName}) {
+        PATH = modelPath;
+        FILE_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() ;
+
+		// reading .3dm file
+		readDoor() ;
+		
+		// //console.log(fName)
+        // setLoaders();
+        // await init();
+    }
+
+    // setCameraType(){
+    //     toggleCamera( perspectiveCamera, orthographicCamera);
+    // }
+
+    // refreshcall(nStart, nEnd) {
+    //     refreshElement(nStart, nEnd);
+    // }
+    
+    // resetCamera() {        
+    //     SetCameraPos( m_nCameraStartPos, ORIG) ;
+    // }
+}
+
+export { webgl_original }
+
+
+// rendering
+function animate() {
+	requestAnimationFrame( animate) ;
+	renderer.render( scene, controls.object) ;
+	controls.update() ;
+	cube_ref.update( controls) ;
+	renderer_ref.render( scene_ref, camera_ref) ;
+	updateRef( frame_ref1, camera_ref1, controls) ;
+	renderer_ref1.render( scene_ref1, camera_ref1) ;
+}
+
+function readDoor() {
+	const loader = new Rhino3dmLoader() ;
+	loader.setLibraryPath( './lib/node_modules/webgl-door-visualizer/jsm/libs/rhino3dm/' ) ;
+	loader.load( PATH + "/" + FILE_NAME, function( object) {
+	   // removing shading from colors and adjusting z-fighting with lines ( organizing groups entities )
+		for ( let i = 0 ; i < object.children.length ; ++ i)
+			setOpenGLRenderProperties( object.children[i], dimensionGroup, general_entity_Group) ;
+	   // adding groups to scene
+		scene.add( dimensionGroup) ;
+		scene.add( general_entity_Group) ;
+	   // setting Box3d of the door
+		set3dBox( object) ;
+	   // setting camera position
+		setCameraPosition() ;
+	   // setting grid
+		setGrid() ;
+	   // setting frame
+		setFrame() ;
+	   // static cube
+		setStaticCube() ;
+	   // static frame
+		setStaticFrame() ;
+	  // render loop
+		animate() ;
+	}) ;
+}
+
+function setOpenGLRenderProperties( object, dimensionGroup, general_entity_Group) {
+	if ( object.type == 'Mesh') {
+		object.material.emissive.set( 0x000000) ;   // Set emissive color to black
+		object.material.polygonOffset = true ;      // enable polygonOffset
+		object.material.polygonOffsetFactor = 1 ;   // shifting mesh 
+		object.material.polygonOffsetUnits = 1 ;    // shifting units
+		object.material.depthTest = true ;          // deep test enable for triangle rendering
+		object.renderOrder = 0 ;                    // rendering order priority
+		if ( object.transparent)
+			object.opacity = 0.25 ;
+
+	}
+	else if ( object.type == 'Line') {
+		object.material.depthTest = false ;     // disable deep test ( no z-fighting with meshes)
+		object.material.transparent = true ;    // setting transparency for visibility inside/outside meshes
+		object.material.opacity = 1 ;           // high-level of opacity
+		object.renderOrder = 1 ;                // ordering them on Z-buffer after meshes
+	}
+   // classifying between groups
+	if ( object.name.substring( 0, DIMENSION_DISCRIMINANT_NAME.length) == DIMENSION_DISCRIMINANT_NAME)
+		dimensionGroup.add( object.clone()) ;        // dimension-type object
+	else
+		general_entity_Group.add( object.clone()) ;  // general-entity-type object
+}
+
+function set3dBox( object) {
+   // box of the door
+	m_box = new THREE.Box3().setFromObject( object) ;
+   // size of the box
+	m_size = m_box.getSize( new THREE.Vector3()) ;
+   // center of the box
+	m_center = m_box.getCenter( new THREE.Vector3()) ;  
+}
+
+function setCameraPosition() {
+   // maxSize of the box
+	var maxSize = Math.max( m_size.x, m_size.y, m_size.z) ;
+	const aspectRatio = window.innerWidth / window.innerHeight ;
+	if ( CAMERA_TYPE == CAMERA_ORTHO) {
+		maxSize *= 5 ;
+		controls.object.left = - 0.2 * aspectRatio * maxSize ;
+		controls.object.right = 0.2 * aspectRatio * maxSize ;
+		controls.object.bottom = - 0.2 * maxSize ;
+		controls.object.top = 0.2 * maxSize ;
+		controls.object.zoom = 1.5 ;  // 1.25 * maxSize
+		controls.object.near = - 2 * maxSize ;
+		controls.object.far = 2 * maxSize ;
+		maxSize /= 5 ; 
+	}
+   // position of the camera
+	const positionVec = m_box.min.clone().add( START_CAMERA_POSITION.clone().multiplyScalar( maxSize)) ;
+	const targetVec = m_box.min.clone().add( new THREE.Vector3( 0, 0.5 * m_size.y, 0)) ;
+	controls.object.position.copy( positionVec) ; // this zoom won't change for ortho, it's just for the position
+	controls.target.copy( targetVec) ;
+
+   // updating projection matrix
+	controls.object.updateProjectionMatrix() ;
+	controls.update() ;
+
+}
+
+function setGrid() {
+   // getting maximum size over X and Z
+	const gridHalf_edge = 1.25 * Math.max( m_size.x, m_size.z) ;
+   // defining step
+	const step = gridHalf_edge / 5 ;
+   // creating the grid and adding to the scene
+	for ( let i = 0 ; i < 11 ; ++ i) {
+		const x_line = new THREE.Line( 
+			new THREE.BufferGeometry().setFromPoints([
+				new THREE.Vector3( - gridHalf_edge, 0., - gridHalf_edge + i * step),
+				new THREE.Vector3(( i != 5 ? gridHalf_edge : 0.), 0., - gridHalf_edge + i * step)
+			]),
+			new THREE.LineBasicMaterial({ color : ( i != 5 ? GRID_SECOND_COLOR : GRID_MAIN_COLOR)})
+		) ;
+		gridGroup.add( x_line) ;
+		const y_line = new THREE.Line( 
+			new THREE.BufferGeometry().setFromPoints([
+				new THREE.Vector3( - gridHalf_edge + i * step , 0., - gridHalf_edge),
+				new THREE.Vector3( - gridHalf_edge + i * step, 0., ( i != 5 ? gridHalf_edge : 0.))
+			]),
+			new THREE.LineBasicMaterial({ color : ( i != 5 ? GRID_SECOND_COLOR : GRID_MAIN_COLOR)})
+		) ;
+		gridGroup.add( y_line) ;
+		
+	}
+   // adding the group to the scene
+	gridGroup.name = GRID_GROUP_NAME ;
+	scene.add( gridGroup) ;
+
+}
+
+function setFrame() {
+   // getting maximum size over X and Z
+	const maxSize = 1.25 * Math.max( m_size.x, m_size.z) ;
+   // x_axis
+	const x_axis = new THREE.Line(
+		new THREE.BufferGeometry().setFromPoints([
+			new THREE.Vector3( 0., 0., 0.),
+			new THREE.Vector3( maxSize, 0., 0.)
+		]),
+		new THREE.LineBasicMaterial({ color : new THREE.Color( 0xff0000)})
+	) ;
+   // y_axis
+	const y_axis = new THREE.Line(
+		new THREE.BufferGeometry().setFromPoints([
+			new THREE.Vector3( 0., 0., 0.),
+			new THREE.Vector3( 0., 0., maxSize)
+		]),
+		new THREE.LineBasicMaterial({ color : new THREE.Color( 0x00ff00)})
+	) ;
+   // z_axis
+	const z_axis = new THREE.Line(
+		new THREE.BufferGeometry().setFromPoints([
+			new THREE.Vector3( 0., 0., 0.),
+			new THREE.Vector3( 0., 1., 0.)
+		]),
+		new THREE.LineBasicMaterial({ color : new THREE.Color( 0x0000ff)})
+	) ;
+
+	frameGroup.add( x_axis) ;
+	frameGroup.add( y_axis) ;
+	frameGroup.add( z_axis) ;
+	frameGroup.name = FRAME_GROUP_NAME ;
+	scene.add( frameGroup) ;
+}
+
+function setStaticCube() {
+   // container of the cube
+	const divContainer = document.getElementById( 'RefRender') ;
+   // renderer
+	renderer_ref = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ;
+	renderer_ref.setSize( divContainer.clientWidth, divContainer.clientHeight) ;
+	renderer_ref.setPixelRatio( 2 * window.devicePixelRatio) ;
+	divContainer.appendChild( renderer_ref.domElement) ;
+   // scene
+	scene_ref = new THREE.Scene() ;
+	if ( CAMERA_TYPE == CAMERA_ORTHO)
+		camera_ref = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5, 
+												   divContainer.clientHeight / 5, -divContainer.clientHeight / 5, 0.1, 1000) ;
+	else
+		camera_ref = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ;
+   // setting standard camera posizion and lookAt -> made according cube dimension
+	camera_ref.position.set( 0, 0, 70) ;
+	camera_ref.lookAt( 0, 0, 0) ;
+   // creatin the cube object and adding it to the scene
+	cube_ref = new ViewCubeControls( camera_ref, 30, 5, renderer_ref.domElement, controls) ;
+	const myCube = cube_ref.getObject() ;
+	scene_ref.add( myCube) ;
+   // event listener for angle change
+	cube_ref.addEventListener( 'angle-change', ({ quaternion}) => {
+	   // blocking t-parameter
+		cube_ref._setVersorAndRotation() ; // setting normal versor of the face
+		const distanceC = controls.object.position.distanceTo( new THREE.Vector3( controls.target.x, controls.target.y, controls.target.z)) ;
+		var vtEnd = new THREE.Vector3( controls.target.x + cube_ref._vers.x * distanceC,
+									   controls.target.y + cube_ref._vers.y * distanceC,
+									   controls.target.z + cube_ref._vers.z * distanceC) ;
+		controls.object.position.set( vtEnd.x, vtEnd.y, vtEnd.z) ;
+		controls.update() ;
+	}) ;
+	cube_ref._colorCube() ;
+}
+
+function setStaticFrame() {
+   // container of the cube
+   const divContainer = document.getElementById( 'Ref1Render') ;
+   // renderer
+	renderer_ref1 = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ;
+	renderer_ref1.setSize( divContainer.clientWidth, divContainer.clientHeight) ;
+	renderer_ref1.setPixelRatio( 2 * window.devicePixelRatio) ;
+	divContainer.appendChild( renderer_ref1.domElement) ;
+   // scene
+	scene_ref1 = new THREE.Scene() ;
+	if ( CAMERA_TYPE == CAMERA_ORTHO)
+		camera_ref1 = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5, 
+													divContainer.clientHeight / 5, - divContainer.clientHeight / 5, 0.1, 1000) ;
+	else
+		camera_ref1 = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ;
+   // setting standard camera posizion and lookAt -> made according cube dimension
+	camera_ref1.position.set( 0, 0, 70) ;
+	camera_ref1.lookAt( 0, 0, 0) ;
+   // creating the cube object and adding it to the scene
+	frame_ref1 = getStaticRef( 1, 25) ;
+	scene_ref1.add( frame_ref1) ;   
+}
+
+function ToggleRotation() {
+	controls.autoRotate = ( ! controls.autoRotate) ;
+}
+
+function toggleDimensionVisibility() {
+	dimensionGroup.visible = ! dimensionGroup.visible ;
+}
+
+function toggleCubeVisibility() {
+	var cubeContainer = document.getElementById( 'RefRender') ;
+	if ( cubeContainer.style.display === "none")
+		cubeContainer.style.display = "block";
+	else
+		cubeContainer.style.display = "none";
+}
+
+function toggleFrameVisibility() {
+	var frameContainer = document.getElementById( 'Ref1Render') ;
+	if ( frameContainer.style.display === "none")
+		frameContainer.style.display = "block";
+	else
+		frameContainer.style.display = "none";
+}
+
+function toggleGridVisibility() {
+	gridGroup.visible = ! gridGroup.visible ;
+	frameGroup.visible = ! frameGroup.visible ;
+}
+
+// Event Listner -------------------------------------------------------------------
+						// KEY
+document.addEventListener( "keypress", function( event) {
+	if ( event.key.toLowerCase() === "r")
+		ToggleRotation() ;
+	else if ( event.key.toLowerCase() === 'p') {
+		if ( CAMERA_TYPE == CAMERA_PERSP)
+			return ;
+		controls.object = perspCamera.clone() ;
+		CAMERA_TYPE = CAMERA_PERSP ;
+		setCameraPosition() ;
+	}
+	else if ( event.key.toLowerCase() === 'o') {
+		if ( CAMERA_TYPE == CAMERA_ORTHO)
+			return ;
+		controls.object = ortoCamera.clone() ;
+		CAMERA_TYPE = CAMERA_ORTHO ;
+		setCameraPosition() ;
+	}
+	else if ( event.key.toLowerCase() === 'd')
+		toggleDimensionVisibility() ;
+	else if ( event.key.toLowerCase() === ' ')
+		setCameraPosition() ;
+	else if ( event.key.toLowerCase() === 'c')
+		toggleCubeVisibility() ;
+	else if ( event.key.toLowerCase() === 'f')
+		toggleFrameVisibility() ;
+	else if ( event.key.toLowerCase() === 'g')
+		toggleGridVisibility() ;
+}) ;
+
+						// Elements
+var helpButton = document.getElementById( "helpButton") ;
+var infoDiv = document.getElementById( "infoDiv") ;
+infoDiv.style.display = "none";
+helpButton.addEventListener( "click", function() {
+	if ( infoDiv.style.display === "none")
+		infoDiv.style.display = "block" ;
+	else 
+	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) ;
+}
\ No newline at end of file