diff --git a/TestArea_IIS01/THREEJS_DOORS/Door_models/Door2.3dm b/TestArea_IIS01/THREEJS_DOORS/Door_models/Door2.3dm new file mode 100644 index 0000000..6cccd6b Binary files /dev/null and b/TestArea_IIS01/THREEJS_DOORS/Door_models/Door2.3dm differ diff --git a/TestArea_IIS01/THREEJS_DOORS/Door_models/Door3.3dm b/TestArea_IIS01/THREEJS_DOORS/Door_models/Door3.3dm new file mode 100644 index 0000000..2ca1339 Binary files /dev/null and b/TestArea_IIS01/THREEJS_DOORS/Door_models/Door3.3dm differ diff --git a/TestArea_IIS01/THREEJS_DOORS/Libs/node_modules/three/examples/jsm/controls/OrbitControls.js b/TestArea_IIS01/THREEJS_DOORS/Libs/node_modules/three/examples/jsm/controls/OrbitControls.js index d21c1eb..fe99d38 100644 --- a/TestArea_IIS01/THREEJS_DOORS/Libs/node_modules/three/examples/jsm/controls/OrbitControls.js +++ b/TestArea_IIS01/THREEJS_DOORS/Libs/node_modules/three/examples/jsm/controls/OrbitControls.js @@ -96,7 +96,8 @@ class OrbitControls extends EventDispatcher { this.keys = { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }; // Mouse buttons - this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }; + //this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }; + this.mouseButtons = { MIDDLE: MOUSE.PAN }; // Touch fingers this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }; diff --git a/TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js b/TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js index 880406c..ae2d6f1 100644 --- a/TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js +++ b/TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js @@ -36,6 +36,8 @@ export default class ViewCubeControls extends THREE1.EventDispatcher { this._blue = 0x0275d8 ; this._vers = null ; this._rot = null ; + this._last_event_target_x = null ; + this._last_event_target_y = null ; this._handleMouseMove = this._handleMouseMove.bind( this) ; this._handleMouseClick = this._handleMouseClick.bind( this) ; this._listen() ; @@ -175,6 +177,8 @@ export default class ViewCubeControls extends THREE1.EventDispatcher { _handleMouseMove( event) { const x = ( event.offsetX / event.target.clientWidth) * 2 - 1 ; const y = -( event.offsetY / event.target.clientHeight) * 2 + 1 ; + this._last_event_target_x = x ; + this._last_event_target_y = y ; this._checkSideOver( x, y) ; } @@ -239,8 +243,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher { const RotY_mat = new THREE1.Matrix4() ; RotY_mat.makeRotationY( Math.PI / 2) ; invRotMat.multiply( RotY_mat) ; - var euler = new THREE1.Euler() ; - euler.setFromRotationMatrix( invRotMat) ; + var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ; this._cube.rotation.set( euler.x, euler.y , euler.z) ; if ( this._animation) { @@ -256,7 +259,10 @@ export default class ViewCubeControls extends THREE1.EventDispatcher { } else { this._interp = null ; - } + } + if ( this._last_event_target_x != null && this._last_event_target_y != null) + this._checkSideOver( this._last_event_target_x, this._last_event_target_y) ; + } _TopBottomRotation( type, orbit){ @@ -274,7 +280,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher { function loop() { const now = performance.now() ; const delta = now - start ; - const alpha = Math.min( delta/duration, maxAlpha); + const alpha = Math.min( delta / duration, maxAlpha); if ( type == 1){ if ( theta_i >= -Math.PI / 2 && theta_i <= Math.PI / 2){ theta_tt = theta_t ; @@ -318,7 +324,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher { orbit.rotateLeft( jump) ; } } - else{ + else { theta_tt = theta_t ; if ( theta_i >= 0){ theta_t = theta_i - alpha * ( theta_i - Math.PI / 2) ; @@ -857,7 +863,7 @@ var BOX_FACES = [ }, { name: FACES.RIGHT, - map: createTextSprite( "FRONT", { fontSize: 60, font: "Arial Narrow, sans-serif" }) + map: createTextSprite( "BACK", { fontSize: 60, font: "Arial Narrow, sans-serif" }) }, { name: FACES.BACK, @@ -865,7 +871,7 @@ var BOX_FACES = [ }, { name: FACES.LEFT, - map: createTextSprite( "BACK", { fontSize: 60, font: "Arial Narrow, sans-serif" }) + map: createTextSprite( "FRONT", { fontSize: 60, font: "Arial Narrow, sans-serif" }) }, { name: FACES.TOP, diff --git a/TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js b/TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js index 6835260..cf7a7a4 100644 --- a/TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js +++ b/TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js @@ -2,25 +2,31 @@ import * as THREE1 from "../Libs/node_modules/three/build/three.module.js"; export function getStaticRef( thick, length) { // color definition - const RED = 0xd9534f ; + const RED = 0xd9534f ; + const DARK_RED = 0xAE423F ; const GREEN = 0x5cb85c ; + const DARK_GREEN = 0x4A934A ; const BLUE = 0x0275d8 ; + const DARK_BLUE = 0x025EAD ; const BLACK = 0x000000 ; // cylinder geometry const axis_geometry = new THREE1.CylinderGeometry( thick, thick, length, 32) ; const arrow_geometry = new THREE1.CylinderGeometry( 0., 2 * thick, length / 5, 32) ; // materials const x_material = new THREE1.MeshBasicMaterial({ color: RED}) ; + const x_darkMaterial = new THREE1.MeshBasicMaterial({ color : DARK_RED}) ; const y_material = new THREE1.MeshBasicMaterial({ color: GREEN}) ; + const y_darkMaterial = new THREE1.MeshBasicMaterial({ color: DARK_GREEN}) ; const z_material = new THREE1.MeshBasicMaterial({ color: BLUE}) ; + const z_darkMaterial = new THREE1.MeshBasicMaterial({ color : DARK_BLUE}) ; // line-meshes const x_cylinder = new THREE1.Mesh( axis_geometry, x_material) ; const y_cylinder = new THREE1.Mesh( axis_geometry, y_material) ; const z_cylinder = new THREE1.Mesh( axis_geometry, z_material) ; // arrow-meshes - const x_cylinder_arrow = new THREE1.Mesh( arrow_geometry, x_material ) ; - const y_cylinder_arrow = new THREE1.Mesh( arrow_geometry, y_material ) ; - const z_cylinder_arrow = new THREE1.Mesh( arrow_geometry, z_material ) ; + const x_cylinder_arrow = new THREE1.Mesh( arrow_geometry, x_darkMaterial) ; + const y_cylinder_arrow = new THREE1.Mesh( arrow_geometry, y_darkMaterial) ; + const z_cylinder_arrow = new THREE1.Mesh( arrow_geometry, z_darkMaterial) ; // rotation for axis and arrows x_cylinder.rotateOnAxis( new THREE1.Vector3( 0., 0., 1.), - Math.PI / 2) ; y_cylinder.rotateOnAxis( new THREE1.Vector3( 1., 0., 0.), Math.PI / 2) ; @@ -49,10 +55,11 @@ export function getStaticRef( thick, length) { return axisGroup ; } -export function updateRef( ref, controls) { - var invRotMat = new THREE1.Matrix4() ; - invRotMat.extractRotation( controls.object.matrix) ; +export function updateRef( ref, myCamera, controls) { + var invRotMat = new THREE1.Matrix4() ; + invRotMat.extractRotation( controls.object.matrix) ; invRotMat.invert() ; - var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ; + var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ; ref.rotation.set( euler.x, euler.y , euler.z) ; + myCamera.updateMatrix() ; } \ No newline at end of file diff --git a/TestArea_IIS01/THREEJS_DOORS/index.html b/TestArea_IIS01/THREEJS_DOORS/index.html index 1aec83c..93f42f8 100644 --- a/TestArea_IIS01/THREEJS_DOORS/index.html +++ b/TestArea_IIS01/THREEJS_DOORS/index.html @@ -28,15 +28,21 @@ 
  Camera settings : 
  Zoom : Wheel-Scroll 
- Pan : Mouse-Left and Drag ( hold ) 
- Rotate : Mouse-Right and Drag ( hold )
- Center : Key-C 
+ 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
@@ -60,13 +66,18 @@ 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_PERSP ; + 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 ; // referement global variables --------- var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ; var cube_ref ; @@ -102,6 +113,16 @@ // 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() ; @@ -113,20 +134,20 @@ 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) ; - updateRef( frame_ref1, controls) ; } function readDoor() { const loader = new Rhino3dmLoader() ; loader.setLibraryPath( './Libs/node_modules/three/examples/jsm/libs/rhino3dm/' ) ; loader.load( PATH + "/" + FILE_NAME, function( object) { - // passing into threejs frame - //object.rotateX( - Math.PI / 2) ; - // removing shading from colors and adjusting z-fighting with lines + // 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]) ; - scene.add( object) ; + 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 @@ -144,7 +165,7 @@ }) ; } - function setOpenGLRenderProperties( object) { + 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 @@ -162,6 +183,11 @@ 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) { @@ -175,17 +201,21 @@ function setCameraPosition() { // maxSize of the box - const maxSize = Math.max( m_size.x, m_size.y, m_size.z) ; + var maxSize = Math.max( m_size.x, m_size.y, m_size.z) ; + const aspectRatio = window.innerWidth / window.innerHeight ; if ( CAMERA_TYPE == CAMERA_ORTHO) { - const aspectRatio = window.innerWidth / window.innerHeight ; - controls.object.left = - aspectRatio * maxSize ; - controls.object.right = aspectRatio * maxSize ; - controls.object.bottom = - maxSize ; - controls.object.top = maxSize ; - controls.object.zoom = 1.5 ; // 1.25 * maxSize + 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(( new THREE.Vector3( 0, 0.75, 1)).normalize().multiplyScalar( maxSize)) ; + 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) ; @@ -201,8 +231,6 @@ const gridHalf_edge = 1.25 * Math.max( m_size.x, m_size.z) ; // defining step const step = gridHalf_edge / 5 ; - // creating grid Group - const gridGroup = new THREE.Group() ; // creating the grid and adding to the scene for ( let i = 0 ; i < 11 ; ++ i) { const x_line = new THREE.Line( @@ -257,8 +285,6 @@ new THREE.LineBasicMaterial({ color : new THREE.Color( 0x0000ff)}) ) ; - // creating the group of the frame and adding it to the scene - const frameGroup = new THREE.Group() ; frameGroup.add( x_axis) ; frameGroup.add( y_axis) ; frameGroup.add( z_axis) ; @@ -320,7 +346,7 @@ // setting standard camera posizion and lookAt -> made according cube dimension camera_ref1.position.set( 0, 0, 70) ; camera_ref1.lookAt( 0, 0, 0) ; - // creatin the cube object and adding it to the scene + // creating the cube object and adding it to the scene frame_ref1 = getStaticRef( 1, 25) ; scene_ref1.add( frame_ref1) ; } @@ -329,31 +355,61 @@ 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 === "r") + if ( event.key.toLowerCase() === "r") ToggleRotation() ; - else if ( event.key === 'p' || event.key === 'P') { + 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 === 'o' || event.key === 'O') { + else if ( event.key.toLowerCase() === 'o') { if ( CAMERA_TYPE == CAMERA_ORTHO) return ; controls.object = ortoCamera.clone() ; CAMERA_TYPE = CAMERA_ORTHO ; setCameraPosition() ; - setStaticFrame() ; } - else if ( event.key === 'd' || event.key === 'D') - window.alert( 'manca :(') ; - else if ( event.key === 'c' || event.key === 'C') + 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") ; @@ -375,7 +431,6 @@ // get parameter value by name return urlParams.get( name) ; } - \ No newline at end of file diff --git a/TestArea_IIS01/THREEJS_DOORS/style.css b/TestArea_IIS01/THREEJS_DOORS/style.css index edf3a45..505f31f 100644 --- a/TestArea_IIS01/THREEJS_DOORS/style.css +++ b/TestArea_IIS01/THREEJS_DOORS/style.css @@ -17,7 +17,7 @@ canvas { top: 10px ; right: 10px ; background-color: transparent ; - width: 250px ; + width: 275px ; } .container { @@ -58,15 +58,15 @@ canvas { height: 200px ; bottom: 10px ; right: 10px ; - border: 1px solid black ; + /*border: 1px solid black ;*/ } #Ref1Render { position: fixed ; - width: 200px ; - height: 200px ; + width: 150px ; + height: 150px ; bottom: 10px ; left: 10px ; background-color: transparent ; - border: 1px solid black ; + /*border: 1px solid black ;*/ }