diff --git a/TestArea_IIS01/TJSD/index.html b/TestArea_IIS01/TJSD/index.html index 2a48daf..ad2e9d1 100644 --- a/TestArea_IIS01/TJSD/index.html +++ b/TestArea_IIS01/TJSD/index.html @@ -27,23 +27,23 @@ 
- 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
@@ -54,7 +54,7 @@
+ + + +
+ +
+ +
+
+ +
+
+
+ 
+                        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
+
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/index3.html b/TestArea_IIS01/TJSD/index3.html new file mode 100644 index 0000000..c55d3a3 --- /dev/null +++ b/TestArea_IIS01/TJSD/index3.html @@ -0,0 +1,80 @@ + + + + + Door render + + + + + + +
+ +
+ +
+
+ +
+
+
+ 
+                        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
+
+
+
+
+ +
+
+
+ + + + + \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js new file mode 100644 index 0000000..48b4119 --- /dev/null +++ b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js @@ -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); \ No newline at end of file diff --git a/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js new file mode 100644 index 0000000..8371ee6 --- /dev/null +++ b/TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js @@ -0,0 +1,393 @@ +// 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 +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 = './Door_models' ; +var FILE_NAME = 'Demo.3dm' +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() +/* ------------------------------ */ + +// 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) + + let startTime = performance.now(); + // reading .3dm file + await readDoor() ; + let endTime = performance.now(); + let timeElapsed = endTime - startTime; + console.log('init done in : ' + timeElapsed); + } +} + +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 diff --git a/WebDoorView/3DM_test/test_js_call/index3.html b/WebDoorView/3DM_test/test_js_call/index3.html index c55d3a3..7ff0d4b 100644 --- a/WebDoorView/3DM_test/test_js_call/index3.html +++ b/WebDoorView/3DM_test/test_js_call/index3.html @@ -18,11 +18,21 @@
-
- +
+ +
+
+ + + + + + + +
@@ -37,14 +47,14 @@ Toggle Auto-rotation : Key-R - Toggle Show-Dimension : Key-D + Toggle Show-Quotes : Key-Q Toggle Show-Cube : Key-C Toggle Show-Frame : Key-F Toggle Show-Grid : Key-G - +
@@ -52,7 +62,7 @@
- + \ No newline at end of file diff --git a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js index 48b4119..cbd529e 100644 --- a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js +++ b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js @@ -17,4 +17,4 @@ function getUrlParameter( name) { return urlParams.get( name) ; } -WGL.initcall(options); \ No newline at end of file +WGL.initcall(options); diff --git a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js index 8371ee6..bbb299b 100644 --- a/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js +++ b/WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js @@ -82,6 +82,54 @@ class webgl_original { let timeElapsed = endTime - startTime; console.log('init done in : ' + timeElapsed); } + + // reset posizione camera + resetCamera() + { + myResetCamera(); + } + + // imposta vista isometrica/ortografica + setCameraOrtho() + { + mySetCameraOrtho() + } + + // imposta vista prospettica + setCameraPersp() + { + mySetCameraPersp() + } + + // toggle visualizzaizone cubo + toggleCube() + { + myToggleCubeVisibility(); + } + + // toggle visualizzazione frame assi + toggleFrame() + { + myToggleFrameVisibility(); + } + + // toggle visualizzazione griglia + toggleGrid() + { + myToggleGridVisibility(); + } + + // toggle visualizzazione quotature + toggleQuotes() + { + myToggleQuote() + } + + // toggle rotazione + toggleRotation() + { + myToggleRotation() + } } export { webgl_original } @@ -311,15 +359,7 @@ function setStaticFrame() { scene_ref1.add( frame_ref1) ; } -function ToggleRotation() { - controls.autoRotate = ( ! controls.autoRotate) ; -} - -function toggleDimensionVisibility() { - dimensionGroup.visible = ! dimensionGroup.visible ; -} - -function toggleCubeVisibility() { +function myToggleCubeVisibility() { var cubeContainer = document.getElementById( 'RefRender') ; if ( cubeContainer.style.display === "none") cubeContainer.style.display = "block"; @@ -327,7 +367,7 @@ function toggleCubeVisibility() { cubeContainer.style.display = "none"; } -function toggleFrameVisibility() { +function myToggleFrameVisibility() { var frameContainer = document.getElementById( 'Ref1Render') ; if ( frameContainer.style.display === "none") frameContainer.style.display = "block"; @@ -335,41 +375,40 @@ function toggleFrameVisibility() { frameContainer.style.display = "none"; } -function toggleGridVisibility() { +function myToggleGridVisibility() { 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() ; -}) ; +function myToggleRotation() { + controls.autoRotate = ( ! controls.autoRotate) ; +} + +function myToggleQuote() { + dimensionGroup.visible = ! dimensionGroup.visible ; +} + +function mySetCameraOrtho() { + if ( CAMERA_TYPE == CAMERA_ORTHO) + return ; + controls.object = ortoCamera.clone() ; + CAMERA_TYPE = CAMERA_ORTHO ; + setCameraPosition() ; +} + +function mySetCameraPersp() { + if ( CAMERA_TYPE == CAMERA_PERSP) + return ; + controls.object = perspCamera.clone() ; + CAMERA_TYPE = CAMERA_PERSP ; + setCameraPosition() ; +} + +function myResetCamera() { + setCameraPosition() ; +} + + // Elements var helpButton = document.getElementById( "helpButton") ; @@ -382,12 +421,3 @@ 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) ; -// } \ No newline at end of file diff --git a/WebDoorView/3DM_test/test_js_call/style.css b/WebDoorView/3DM_test/test_js_call/style.css index 505f31f..8ce32b9 100644 --- a/WebDoorView/3DM_test/test_js_call/style.css +++ b/WebDoorView/3DM_test/test_js_call/style.css @@ -40,7 +40,7 @@ canvas { #helpButton { text-decoration: underline ; - float: right ; + /* float: right ; */ height: auto ; }