Update area TJSD + yaml x robocopy
This commit is contained in:
Samuele Locatelli
+4
-7
@@ -32,16 +32,13 @@ variables:
|
||||
- |
|
||||
net use X: /delete
|
||||
SLEEP 2
|
||||
$mountCmd = "net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD"
|
||||
Write-Output $mountCmd;
|
||||
#$mountCmd = "net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD"
|
||||
#Write-Output $mountCmd;
|
||||
net use X: $env:NET_SHARE_X /u:$env:NET_USERQ $SDRIVE_PASSWD
|
||||
Foreach ($sDir in ($env:DIR_PATH -split " ")) {
|
||||
Write-Output ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\
|
||||
Write-Output "ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\"
|
||||
ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\
|
||||
}
|
||||
# for FOLDER in $env:DIR_PATH
|
||||
# do
|
||||
# Write-Output ROBOCOPY /MIR $env:SRC_PATH\$sDir\ X:\$sDir\
|
||||
# done
|
||||
SLEEP 2
|
||||
net use X: /delete
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
+334
-405
@@ -2,9 +2,12 @@
|
||||
<head>
|
||||
<meta charset = "UTF-8">
|
||||
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
|
||||
<title> Door render </title>
|
||||
<title>WebDoor3D Render </title>
|
||||
<link rel = "stylesheet" href = "style.css">
|
||||
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<script type = "importmap">
|
||||
{
|
||||
"imports": {
|
||||
@@ -15,423 +18,349 @@
|
||||
</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 class="d-flex justify-content-between bg-dark bg-opacity-75">
|
||||
<div class="p-2">
|
||||
<div class="btn-group" role="group" aria-label="Mode">
|
||||
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
|
||||
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Animation">
|
||||
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
|
||||
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
|
||||
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
|
||||
</div>
|
||||
</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 id ="divMenu2" class="p-2">
|
||||
<div>
|
||||
<button id="btnHelp" class="btn btn-lg btn-light" onclick="toggleHelp()" title="Hide/Show Menu"><i class="fas fa-question"></i></button>
|
||||
<div class="btn-group" role="group" aria-label="Animation">
|
||||
<button id="btnPause" class="btn btn-lg btn-secondary" onclick="toggleAnim()" title="Freeze model"><i class="fas fa-pause"></i></button>
|
||||
<button id="btnPlay" class="btn btn-lg btn-light" onclick="toggleAnim()" title="Animation Active"><i class="fas fa-play"></i></button>
|
||||
</div>
|
||||
<button id="btnReset" class="btn btn-lg btn-secondary" onclick="resetCamera()" title="Reset"><i class="fas fa-sync-alt"></i></button>
|
||||
</div>
|
||||
<div id = "infoDiv">
|
||||
<ul class="list-group list-group-sm small" style="font-size: 0.75em;">
|
||||
<li class="list-group-item p-1 active text-start">
|
||||
<b>Camera settings</b>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<b>Zoom</b> Wheel-Scroll
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<b>Pan</b> Drag Mouse-Wheel
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<b>Rotate</b> CTRL + Drag Mouse-Wheel
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Iso / Ortho</b></div>
|
||||
<div>
|
||||
<i class="fas fa-cube"></i> | key : <b>O</b>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Perspective</b></div>
|
||||
<div>
|
||||
<i class="fab fa-unity"></i> | key : <b>P</b>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>AutoRotate</b></div>
|
||||
<div>
|
||||
<i class="fas fa-globe"></i> | key : <b>R</b>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Quotes</b></div>
|
||||
<div>
|
||||
<i class="fas fa-ruler"></i> | key : <b>Q</b>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Grid</b></div>
|
||||
<div>
|
||||
<i class="fas fa-border-all"></i> | key : <b>G</b>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Reset</b></div>
|
||||
<div>
|
||||
<i class="fas fa-sync-alt"></i> | key: <b>SpaceBar</b>
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Menu</b></div>
|
||||
<div>
|
||||
<i class="fas fa-question"></i> | key : <b>H</b>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="divLogo" class="bg-dark bg-opacity-50 bg-gradient p-1 small text-light text-center">
|
||||
<img class="img-fluid" src ="Images/LogoEgw.png" height="32" />
|
||||
<small>EgalWare</small>
|
||||
</div>
|
||||
<div id = "DoorRender"></div>
|
||||
<div id = "RefRender"></div>
|
||||
<div id = "Ref1Render"></div>
|
||||
<div class="fixed-bottom small">
|
||||
<div class="d-flex justify-content-between bg-dark text-light">
|
||||
<div class="px-2">
|
||||
WebDoor 3D
|
||||
</div>
|
||||
<div class="px-2">
|
||||
Egalware | <a class="text-light text-decoration-none" href="https://www.egalware.com/" target="_blank"><img class="img-fluid" width="16" src="images/LogoEgw.png" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</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";
|
||||
|
||||
<div id = 'DoorRender'></div>
|
||||
<div id = 'RefRender'></div>
|
||||
<div id = 'Ref1Render'></div>
|
||||
const WGL = new webgl_original();
|
||||
|
||||
<script type = 'module'>
|
||||
// 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' ;
|
||||
import ViewCubeControls from 'three/addons/custom/cubeControls.js';
|
||||
import { getStaticRef, updateRef } from 'three/addons/custom/refControls.js' ;
|
||||
|
||||
// settings
|
||||
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 ;
|
||||
|
||||
// referement 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()
|
||||
/* ------------------------------ */
|
||||
|
||||
|
||||
// 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() ;
|
||||
|
||||
// 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") ;
|
||||
const infoDiv = document.getElementById( "infoDiv") ;
|
||||
const doorDiv = document.getElementById( "DoorRender") ;
|
||||
const cubeDiv = document.getElementById( "Ref1Render") ;
|
||||
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 -------------------------------------------------------------------------
|
||||
var isAnimated = true;
|
||||
var isRotating = true;
|
||||
var showQuote = true;
|
||||
var showGrid = true;
|
||||
|
||||
let options ={
|
||||
modelPath: "https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models",
|
||||
fName: getUrlParameter("src")
|
||||
}
|
||||
|
||||
// init controllo
|
||||
WGL.initcall(options);
|
||||
|
||||
|
||||
// ---------------------------------------------------
|
||||
// Funzioni pubbliche
|
||||
// ---------------------------------------------------
|
||||
window.toggleAnim = () =>
|
||||
{
|
||||
isAnimated = !isAnimated;
|
||||
fixAnimate(true);
|
||||
}
|
||||
|
||||
// reset camera
|
||||
window.resetCamera = () =>
|
||||
{
|
||||
console.log("Reset Camera");
|
||||
document.getElementById("btnReset").className = "btn btn-lg btn-light";
|
||||
isAnimated = true;
|
||||
// isRotating = true;
|
||||
fixAnimate(true);
|
||||
// fixBtnRotate();
|
||||
// WGL.toggleRotation();
|
||||
WGL.resetCamera();
|
||||
var millisecondsToWait = 500;
|
||||
setTimeout(function() {
|
||||
document.getElementById("btnReset").className = "btn btn-lg btn-secondary";
|
||||
}, millisecondsToWait);
|
||||
}
|
||||
|
||||
// set camera persp
|
||||
window.setOrtho = () =>
|
||||
{
|
||||
console.log("Set Camera ISO/ORTHO");
|
||||
document.getElementById("btnOrto").className = "btn btn-lg btn-light";
|
||||
document.getElementById("btnPers").className = "btn btn-lg btn-secondary";
|
||||
WGL.setCameraOrtho();
|
||||
}
|
||||
|
||||
// reset camera persp
|
||||
window.setPersp = () =>
|
||||
{
|
||||
console.log("Set Camera Perspective");
|
||||
document.getElementById("btnOrto").className = "btn btn-lg btn-secondary";
|
||||
document.getElementById("btnPers").className = "btn btn-lg btn-light";
|
||||
WGL.setCameraPersp();
|
||||
}
|
||||
|
||||
// toggle griglia
|
||||
window.toggleGrid = () =>
|
||||
{
|
||||
console.log("Toggle Grid");
|
||||
showGrid = !showGrid;
|
||||
if(showGrid)
|
||||
{
|
||||
document.getElementById("btnGrid").className = "btn btn-lg btn-light";
|
||||
}
|
||||
else{
|
||||
document.getElementById("btnGrid").className = "btn btn-lg btn-secondary";
|
||||
}
|
||||
WGL.toggleGrid();
|
||||
}
|
||||
|
||||
// toggle quotatura
|
||||
window.toggleHelp = () =>
|
||||
{
|
||||
console.log("Toggle Menu");
|
||||
toggleMenu();
|
||||
}
|
||||
|
||||
// toggle quotatura
|
||||
window.toggleQuote = () =>
|
||||
{
|
||||
console.log("Toggle Quote");
|
||||
showQuote = !showQuote;
|
||||
if(showQuote)
|
||||
{
|
||||
document.getElementById("btnQuote").className = "btn btn-lg btn-light";
|
||||
}
|
||||
else{
|
||||
document.getElementById("btnQuote").className = "btn btn-lg btn-secondary";
|
||||
}
|
||||
WGL.toggleQuotes();
|
||||
}
|
||||
|
||||
// toggle rotazione
|
||||
window.toggleRotate = () =>
|
||||
{
|
||||
console.log("Toggle Rotate");
|
||||
isRotating = !isRotating;
|
||||
fixBtnRotate();
|
||||
WGL.toggleRotation();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------
|
||||
// Funzioni private
|
||||
// ---------------------------------------------------
|
||||
|
||||
// Reading URL parameters -------------------------------------------------------------------------
|
||||
function getUrlParameter( name) {
|
||||
// get query string from URL
|
||||
// get query string from URL
|
||||
const queryString = window.location.search ;
|
||||
// create URLSearchParams object from query string
|
||||
// create URLSearchParams object from query string
|
||||
const urlParams = new URLSearchParams( queryString) ;
|
||||
// get parameter value by name
|
||||
// get parameter value by name
|
||||
return urlParams.get( name) ;
|
||||
}
|
||||
|
||||
function toggleMenu()
|
||||
{
|
||||
console.log("Toggle Menu Camera");
|
||||
if ( infoDiv.style.display == "none")
|
||||
infoDiv.style.display = "block" ;
|
||||
else
|
||||
infoDiv.style.display = "none";
|
||||
}
|
||||
|
||||
function fixAnimate(setRotate)
|
||||
{
|
||||
if( isAnimated )
|
||||
{
|
||||
document.getElementById("btnPlay").className = "btn btn-lg btn-light";
|
||||
document.getElementById("btnPause").className = "btn btn-lg btn-secondary";
|
||||
if(setRotate)
|
||||
isRotating = true;
|
||||
fixBtnRotate();
|
||||
WGL.setRotate(isRotating);
|
||||
WGL.doAnimate();
|
||||
}
|
||||
else
|
||||
{
|
||||
document.getElementById("btnPlay").className = "btn btn-lg btn-secondary";
|
||||
document.getElementById("btnPause").className = "btn btn-lg btn-light";
|
||||
if(setRotate)
|
||||
isRotating = false;
|
||||
fixBtnRotate();
|
||||
WGL.setRotate(isRotating);
|
||||
WGL.doFreeze();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function fixBtnRotate()
|
||||
{
|
||||
var cssClass = "btn btn-lg btn-secondary";
|
||||
if(isRotating)
|
||||
{
|
||||
cssClass = "btn btn-lg btn-light";
|
||||
}
|
||||
document.getElementById("btnRotate").className = cssClass;
|
||||
}
|
||||
|
||||
function onKeyPress( event) {
|
||||
|
||||
switch (event.key.toLowerCase() ){
|
||||
case " ":
|
||||
resetCamera();
|
||||
break;
|
||||
case "a":
|
||||
toggleAnim();
|
||||
break;
|
||||
case "h":
|
||||
toggleMenu();
|
||||
break;
|
||||
case "g":
|
||||
toggleGrid();
|
||||
break;
|
||||
case "o":
|
||||
setOrtho();
|
||||
break;
|
||||
case "p":
|
||||
setPersp();
|
||||
break;
|
||||
case "q":
|
||||
toggleQuote();
|
||||
break;
|
||||
case "r":
|
||||
toggleRotate();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function checkButton(event)
|
||||
{
|
||||
switch(event.button){
|
||||
case 0:
|
||||
// salto!
|
||||
break;
|
||||
default:
|
||||
reAnimate();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function reAnimate()
|
||||
{
|
||||
if( !isAnimated )
|
||||
{
|
||||
isAnimated = true;
|
||||
fixAnimate(false);
|
||||
}
|
||||
}
|
||||
|
||||
function reAnimateRotate()
|
||||
{
|
||||
if( !isAnimated )
|
||||
{
|
||||
isAnimated = true;
|
||||
fixAnimate(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Event Listner -------------------------------------------------------------------
|
||||
// KEY
|
||||
document.addEventListener( "keypress", onKeyPress) ;
|
||||
doorDiv.addEventListener( 'pointerup', checkButton );
|
||||
doorDiv.addEventListener( 'touchstart', reAnimate );
|
||||
// doorDiv.addEventListener( 'touchend', reAnimate );
|
||||
// doorDiv.addEventListener( 'touchcancel', reAnimate );
|
||||
doorDiv.addEventListener( 'touchmove', reAnimateRotate );
|
||||
doorDiv.addEventListener( 'click', toggleAnim );
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<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>
|
||||
@@ -1,80 +0,0 @@
|
||||
<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>
|
||||
@@ -0,0 +1,437 @@
|
||||
<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'>
|
||||
// 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' ;
|
||||
import ViewCubeControls from 'three/addons/custom/cubeControls.js';
|
||||
import { getStaticRef, updateRef } from 'three/addons/custom/refControls.js' ;
|
||||
|
||||
// settings
|
||||
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 ;
|
||||
|
||||
// referement 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()
|
||||
/* ------------------------------ */
|
||||
|
||||
|
||||
// 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() ;
|
||||
|
||||
// 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) ;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,151 @@
|
||||
<html lang = "en">
|
||||
<head>
|
||||
<meta charset = "UTF-8">
|
||||
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
|
||||
<title>WebDoor3D Render </title>
|
||||
<link rel = "stylesheet" href = "style.css">
|
||||
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<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>
|
||||
<div class="d-flex justify-content-between bg-dark bg-opacity-75">
|
||||
<div class="p-2">
|
||||
<div class="btn-group" role="group" aria-label="Mode">
|
||||
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
|
||||
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
|
||||
</div>
|
||||
<div class="btn-group" role="group" aria-label="Animation">
|
||||
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
|
||||
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
|
||||
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id ="divMenu2" class="p-2">
|
||||
<div>
|
||||
<button id="btnHelp" class="btn btn-lg btn-light" onclick="toggleHelp()" title="Hide/Show Menu"><i class="fas fa-question"></i></button>
|
||||
<!-- <div class="btn-group" role="group" aria-label="Mode">
|
||||
<button id="btnOrto" class="btn btn-lg btn-light" onclick="setOrtho()" title="Ortho/ISO View"><i class="fas fa-cube"></i></button>
|
||||
<button id="btnPers" class="btn btn-lg btn-secondary" onclick="setPersp()" title="Perspective View"><i class="fab fa-unity"></i></button>
|
||||
</div> -->
|
||||
<div class="btn-group" role="group" aria-label="Animation">
|
||||
<button id="btnPause" class="btn btn-lg btn-secondary" onclick="toggleAnim()" title="Freeze model"><i class="fas fa-pause"></i></button>
|
||||
<button id="btnPlay" class="btn btn-lg btn-light" onclick="toggleAnim()" title="Animation Active"><i class="fas fa-play"></i></button>
|
||||
</div>
|
||||
<!-- <div class="btn-group" role="group" aria-label="Animation">
|
||||
<button id="btnRotate" class="btn btn-lg btn-light" onclick="toggleRotate()" title="Toggle Rotate"><i class="fas fa-globe"></i></button>
|
||||
<button id="btnQuote" class="btn btn-lg btn-light" onclick="toggleQuote()" title="Show Quotation"><i class="fas fa-ruler"></i></button>
|
||||
<button id="btnGrid" class="btn btn-lg btn-light" onclick="toggleGrid()" title="Toggle Grid"><i class="fas fa-border-all"></i></button>
|
||||
</div> -->
|
||||
<button id="btnReset" class="btn btn-lg btn-secondary" onclick="resetCamera()" title="Reset"><i class="fas fa-sync-alt"></i></button>
|
||||
</div>
|
||||
<div id = "infoDiv">
|
||||
<ul class="list-group list-group-sm small" style="font-size: 0.75em;">
|
||||
<li class="list-group-item p-1 active text-start">
|
||||
<b>Camera settings</b>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<b>Zoom</b> Wheel-Scroll
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<b>Pan</b> Drag Mouse-Wheel
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<b>Rotate</b> CTRL + Drag Mouse-Wheel
|
||||
</li>
|
||||
<!-- <li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div>
|
||||
Toggle Show-Cube : <b>C</b>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-primary py-0" onclick="toggleCube()">C</button>
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div>
|
||||
Toggle Show-Frame : <b>F</b>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-primary py-0" onclick="toggleFrame()">F</button>
|
||||
</li> -->
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Iso / Ortho</b></div>
|
||||
<div>
|
||||
<i class="fas fa-cube"></i> | key : <b>O</b>
|
||||
</div>
|
||||
<!-- <button class="btn btn-sm btn-primary py-1" onclick="setOrtho()"><i class="fas fa-cube"></i></button> -->
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Perspective</b></div>
|
||||
<div>
|
||||
<i class="fab fa-unity"></i> | key : <b>P</b>
|
||||
</div>
|
||||
<!-- <button class="btn btn-sm btn-primary py-1" onclick="setPersp()"><i class="fab fa-unity"></i></button> -->
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>AutoRotate</b></div>
|
||||
<div>
|
||||
<i class="fas fa-globe"></i> | key : <b>R</b>
|
||||
</div>
|
||||
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleRotate()"><i class="fas fa-globe"></i></button> -->
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Quotes</b></div>
|
||||
<div>
|
||||
<i class="fas fa-ruler"></i> | key : <b>Q</b>
|
||||
</div>
|
||||
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleQuote()"><i class="fas fa-ruler"></i></button> -->
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Grid</b></div>
|
||||
<div>
|
||||
<i class="fas fa-border-all"></i> | key : <b>G</b>
|
||||
</div>
|
||||
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleGrid()"></button> -->
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Reset</b></div>
|
||||
<div>
|
||||
<i class="fas fa-sync-alt"></i> | key: <b>SpaceBar</b>
|
||||
</div>
|
||||
<!-- <button class="btn btn-sm btn-primary py-1" onclick="resetCamera()"><i class="fas fa-sync-alt"></i></button> -->
|
||||
</li>
|
||||
<li class="list-group-item p-1 d-flex justify-content-between">
|
||||
<div><b>Menu</b></div>
|
||||
<div>
|
||||
<i class="fas fa-question"></i> | key : <b>H</b>
|
||||
</div>
|
||||
<!-- <button class="btn btn-sm btn-primary py-1" onclick="toggleHelp()"><i class="fas fa-question small"></i></button> -->
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="divLogo" class="bg-dark bg-opacity-50 bg-gradient p-1 small text-light text-center">
|
||||
<img class="img-fluid" src ="Images/LogoEgw.png" height="32" />
|
||||
<small>EgalWare</small>
|
||||
</div>
|
||||
<div id = "DoorRender"></div>
|
||||
<div id = "RefRender"></div>
|
||||
<div id = "Ref1Render"></div>
|
||||
<div class="fixed-bottom small">
|
||||
<div class="d-flex justify-content-between bg-dark text-light">
|
||||
<div class="px-2">
|
||||
WebDoor 3D
|
||||
</div>
|
||||
<div class="px-2">
|
||||
Egalware | <a class="text-light text-decoration-none" href="https://www.egalware.com/" target="_blank"><img class="img-fluid" width="16" src="images/LogoEgw.png" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
+229
-9
@@ -1,20 +1,240 @@
|
||||
import { webgl_original } from './webgl_draw.js';
|
||||
|
||||
import { webgl_original } from "./webgl_draw.js";
|
||||
const WGL = new webgl_original();
|
||||
|
||||
const infoDiv = document.getElementById( "infoDiv") ;
|
||||
const doorDiv = document.getElementById( "DoorRender") ;
|
||||
const cubeDiv = document.getElementById( "Ref1Render") ;
|
||||
infoDiv.style.display = "none";
|
||||
|
||||
var isAnimated = true;
|
||||
var isRotating = true;
|
||||
var showQuote = true;
|
||||
var showGrid = true;
|
||||
|
||||
let options ={
|
||||
modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models',
|
||||
fName: getUrlParameter('src')
|
||||
modelPath: "https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models",
|
||||
fName: getUrlParameter("src")
|
||||
}
|
||||
|
||||
// init controllo
|
||||
WGL.initcall(options);
|
||||
|
||||
|
||||
// ---------------------------------------------------
|
||||
// Funzioni pubbliche
|
||||
// ---------------------------------------------------
|
||||
window.toggleAnim = () =>
|
||||
{
|
||||
isAnimated = !isAnimated;
|
||||
fixAnimate(true);
|
||||
}
|
||||
|
||||
// reset camera
|
||||
window.resetCamera = () =>
|
||||
{
|
||||
console.log("Reset Camera");
|
||||
document.getElementById("btnReset").className = "btn btn-lg btn-light";
|
||||
isAnimated = true;
|
||||
// isRotating = true;
|
||||
fixAnimate(true);
|
||||
// fixBtnRotate();
|
||||
// WGL.toggleRotation();
|
||||
WGL.resetCamera();
|
||||
var millisecondsToWait = 500;
|
||||
setTimeout(function() {
|
||||
document.getElementById("btnReset").className = "btn btn-lg btn-secondary";
|
||||
}, millisecondsToWait);
|
||||
}
|
||||
|
||||
// set camera persp
|
||||
window.setOrtho = () =>
|
||||
{
|
||||
console.log("Set Camera ISO/ORTHO");
|
||||
document.getElementById("btnOrto").className = "btn btn-lg btn-light";
|
||||
document.getElementById("btnPers").className = "btn btn-lg btn-secondary";
|
||||
WGL.setCameraOrtho();
|
||||
}
|
||||
|
||||
// reset camera persp
|
||||
window.setPersp = () =>
|
||||
{
|
||||
console.log("Set Camera Perspective");
|
||||
document.getElementById("btnOrto").className = "btn btn-lg btn-secondary";
|
||||
document.getElementById("btnPers").className = "btn btn-lg btn-light";
|
||||
WGL.setCameraPersp();
|
||||
}
|
||||
|
||||
// toggle griglia
|
||||
window.toggleGrid = () =>
|
||||
{
|
||||
console.log("Toggle Grid");
|
||||
showGrid = !showGrid;
|
||||
if(showGrid)
|
||||
{
|
||||
document.getElementById("btnGrid").className = "btn btn-lg btn-light";
|
||||
}
|
||||
else{
|
||||
document.getElementById("btnGrid").className = "btn btn-lg btn-secondary";
|
||||
}
|
||||
WGL.toggleGrid();
|
||||
}
|
||||
|
||||
// toggle quotatura
|
||||
window.toggleHelp = () =>
|
||||
{
|
||||
console.log("Toggle Menu");
|
||||
toggleMenu();
|
||||
}
|
||||
|
||||
// toggle quotatura
|
||||
window.toggleQuote = () =>
|
||||
{
|
||||
console.log("Toggle Quote");
|
||||
showQuote = !showQuote;
|
||||
if(showQuote)
|
||||
{
|
||||
document.getElementById("btnQuote").className = "btn btn-lg btn-light";
|
||||
}
|
||||
else{
|
||||
document.getElementById("btnQuote").className = "btn btn-lg btn-secondary";
|
||||
}
|
||||
WGL.toggleQuotes();
|
||||
}
|
||||
|
||||
// toggle rotazione
|
||||
window.toggleRotate = () =>
|
||||
{
|
||||
console.log("Toggle Rotate");
|
||||
isRotating = !isRotating;
|
||||
fixBtnRotate();
|
||||
WGL.toggleRotation();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------
|
||||
// Funzioni private
|
||||
// ---------------------------------------------------
|
||||
|
||||
// Reading URL parameters -------------------------------------------------------------------------
|
||||
function getUrlParameter( name) {
|
||||
// get query string from URL
|
||||
const queryString = window.location.search ;
|
||||
const queryString = window.location.search ;
|
||||
// create URLSearchParams object from query string
|
||||
const urlParams = new URLSearchParams( queryString) ;
|
||||
const urlParams = new URLSearchParams( queryString) ;
|
||||
// get parameter value by name
|
||||
return urlParams.get( name) ;
|
||||
}
|
||||
return urlParams.get( name) ;
|
||||
}
|
||||
|
||||
WGL.initcall(options);
|
||||
function toggleMenu()
|
||||
{
|
||||
console.log("Toggle Menu Camera");
|
||||
if ( infoDiv.style.display == "none")
|
||||
infoDiv.style.display = "block" ;
|
||||
else
|
||||
infoDiv.style.display = "none";
|
||||
}
|
||||
|
||||
function fixAnimate(setRotate)
|
||||
{
|
||||
if( isAnimated )
|
||||
{
|
||||
document.getElementById("btnPlay").className = "btn btn-lg btn-light";
|
||||
document.getElementById("btnPause").className = "btn btn-lg btn-secondary";
|
||||
if(setRotate)
|
||||
isRotating = true;
|
||||
fixBtnRotate();
|
||||
WGL.setRotate(isRotating);
|
||||
WGL.doAnimate();
|
||||
}
|
||||
else
|
||||
{
|
||||
document.getElementById("btnPlay").className = "btn btn-lg btn-secondary";
|
||||
document.getElementById("btnPause").className = "btn btn-lg btn-light";
|
||||
if(setRotate)
|
||||
isRotating = false;
|
||||
fixBtnRotate();
|
||||
WGL.setRotate(isRotating);
|
||||
WGL.doFreeze();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function fixBtnRotate()
|
||||
{
|
||||
var cssClass = "btn btn-lg btn-secondary";
|
||||
if(isRotating)
|
||||
{
|
||||
cssClass = "btn btn-lg btn-light";
|
||||
}
|
||||
document.getElementById("btnRotate").className = cssClass;
|
||||
}
|
||||
|
||||
function onKeyPress( event) {
|
||||
|
||||
switch (event.key.toLowerCase() ){
|
||||
case " ":
|
||||
resetCamera();
|
||||
break;
|
||||
case "a":
|
||||
toggleAnim();
|
||||
break;
|
||||
case "h":
|
||||
toggleMenu();
|
||||
break;
|
||||
case "g":
|
||||
toggleGrid();
|
||||
break;
|
||||
case "o":
|
||||
setOrtho();
|
||||
break;
|
||||
case "p":
|
||||
setPersp();
|
||||
break;
|
||||
case "q":
|
||||
toggleQuote();
|
||||
break;
|
||||
case "r":
|
||||
toggleRotate();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function checkButton(event)
|
||||
{
|
||||
switch(event.button){
|
||||
case 0:
|
||||
// salto!
|
||||
break;
|
||||
default:
|
||||
reAnimate();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function reAnimate()
|
||||
{
|
||||
if( !isAnimated )
|
||||
{
|
||||
isAnimated = true;
|
||||
fixAnimate(false);
|
||||
}
|
||||
}
|
||||
|
||||
function reAnimateRotate()
|
||||
{
|
||||
if( !isAnimated )
|
||||
{
|
||||
isAnimated = true;
|
||||
fixAnimate(true);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Event Listner -------------------------------------------------------------------
|
||||
// KEY
|
||||
document.addEventListener( "keypress", onKeyPress) ;
|
||||
doorDiv.addEventListener( 'pointerup', checkButton );
|
||||
doorDiv.addEventListener( 'touchstart', reAnimate );
|
||||
// doorDiv.addEventListener( 'touchend', reAnimate );
|
||||
// doorDiv.addEventListener( 'touchcancel', reAnimate );
|
||||
doorDiv.addEventListener( 'touchmove', reAnimateRotate );
|
||||
doorDiv.addEventListener( 'click', toggleAnim );
|
||||
+179
@@ -0,0 +1,179 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global.Stats = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
/**
|
||||
* @author mrdoob / http://mrdoob.com/
|
||||
*/
|
||||
|
||||
var Stats = function () {
|
||||
|
||||
var mode = 0;
|
||||
|
||||
var container = document.createElement( 'div' );
|
||||
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
|
||||
container.addEventListener( 'click', function ( event ) {
|
||||
|
||||
event.preventDefault();
|
||||
showPanel( ++ mode % container.children.length );
|
||||
|
||||
}, false );
|
||||
|
||||
//
|
||||
|
||||
function addPanel( panel ) {
|
||||
|
||||
container.appendChild( panel.dom );
|
||||
return panel;
|
||||
|
||||
}
|
||||
|
||||
function showPanel( id ) {
|
||||
|
||||
for ( var i = 0; i < container.children.length; i ++ ) {
|
||||
|
||||
container.children[ i ].style.display = i === id ? 'block' : 'none';
|
||||
|
||||
}
|
||||
|
||||
mode = id;
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;
|
||||
|
||||
var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );
|
||||
var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );
|
||||
|
||||
if ( self.performance && self.performance.memory ) {
|
||||
|
||||
var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );
|
||||
|
||||
}
|
||||
|
||||
showPanel( 0 );
|
||||
|
||||
return {
|
||||
|
||||
REVISION: 16,
|
||||
|
||||
dom: container,
|
||||
|
||||
addPanel: addPanel,
|
||||
showPanel: showPanel,
|
||||
|
||||
begin: function () {
|
||||
|
||||
beginTime = ( performance || Date ).now();
|
||||
|
||||
},
|
||||
|
||||
end: function () {
|
||||
|
||||
frames ++;
|
||||
|
||||
var time = ( performance || Date ).now();
|
||||
|
||||
msPanel.update( time - beginTime, 200 );
|
||||
|
||||
if ( time >= prevTime + 1000 ) {
|
||||
|
||||
fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );
|
||||
|
||||
prevTime = time;
|
||||
frames = 0;
|
||||
|
||||
if ( memPanel ) {
|
||||
|
||||
var memory = performance.memory;
|
||||
memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return time;
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
beginTime = this.end();
|
||||
|
||||
},
|
||||
|
||||
// Backwards Compatibility
|
||||
|
||||
domElement: container,
|
||||
setMode: showPanel
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
Stats.Panel = function ( name, fg, bg ) {
|
||||
|
||||
var min = Infinity, max = 0, round = Math.round;
|
||||
var PR = round( window.devicePixelRatio || 1 );
|
||||
|
||||
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
|
||||
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
|
||||
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
|
||||
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
|
||||
|
||||
var canvas = document.createElement( 'canvas' );
|
||||
canvas.width = WIDTH;
|
||||
canvas.height = HEIGHT;
|
||||
canvas.style.cssText = 'width:80px;height:48px';
|
||||
|
||||
var context = canvas.getContext( '2d' );
|
||||
context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';
|
||||
context.textBaseline = 'top';
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.fillRect( 0, 0, WIDTH, HEIGHT );
|
||||
|
||||
context.fillStyle = fg;
|
||||
context.fillText( name, TEXT_X, TEXT_Y );
|
||||
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 0.9;
|
||||
context.fillRect( GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT );
|
||||
|
||||
return {
|
||||
|
||||
dom: canvas,
|
||||
|
||||
update: function ( value, maxValue ) {
|
||||
|
||||
min = Math.min( min, value );
|
||||
max = Math.max( max, value );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 1;
|
||||
context.fillRect( 0, 0, WIDTH, GRAPH_Y );
|
||||
context.fillStyle = fg;
|
||||
context.fillText( round( value ) + ' ' + name + ' (' + round( min ) + '-' + round( max ) + ')', TEXT_X, TEXT_Y );
|
||||
|
||||
context.drawImage( canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT );
|
||||
|
||||
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT );
|
||||
|
||||
context.fillStyle = bg;
|
||||
context.globalAlpha = 0.9;
|
||||
context.fillRect( GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round( ( 1 - ( value / maxValue ) ) * GRAPH_HEIGHT ) );
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
return Stats;
|
||||
|
||||
})));
|
||||
+210
-105
@@ -1,11 +1,12 @@
|
||||
// importing
|
||||
import * as THREE from './three.module.js' ;
|
||||
// import Stats from './jsm/libs/stats.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' ;
|
||||
// import { getStaticRef, updateRef } from './custom/refControls.js' ;
|
||||
|
||||
// VARIABILI DI CONTROLLO
|
||||
// COSTANTI/VARIABILI DI CONTROLLO
|
||||
const EPS_SMALL = 0.001 ;
|
||||
const GRID_GROUP_NAME = 'gridGroup' ;
|
||||
const FRAME_GROUP_NAME = 'frameGroup' ;
|
||||
@@ -15,23 +16,34 @@ 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) ;
|
||||
const _changeEvent = { type: 'change' };
|
||||
const _startEvent = { type: 'start' };
|
||||
const _endEvent = { type: 'end' };
|
||||
const clock = new THREE.Clock();
|
||||
const fpsTgtHigh = 1 / 60; // Target 60 FPS MAX
|
||||
const fpsTgtLow = 1 / 6; // Target 6 FPS low
|
||||
// // statistiche fps
|
||||
// const stats = new Stats();
|
||||
// variabili
|
||||
var SCENE_BACKGROUND_COLOR = new THREE.Color( 0x87a7ad) ;
|
||||
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 GRID_SECOND_COLOR = new THREE.Color( 0x363636) ;
|
||||
var PATH = './Door_models' ;
|
||||
var FILE_NAME = 'Demo.3dm'
|
||||
var CTRL_DOWN = false ;
|
||||
var targetTimeStep = fpsTgtHigh;
|
||||
|
||||
// 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 ;
|
||||
// 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()
|
||||
/* ------------------------------ */
|
||||
var freezed = false;
|
||||
|
||||
// costanti globali
|
||||
// scene
|
||||
@@ -49,6 +61,10 @@ renderer.setPixelRatio( 2 * window.devicePixelRatio) ;
|
||||
document.getElementById( 'DoorRender').appendChild( renderer.domElement) ;
|
||||
renderer.shadowMap.enabled = true ;
|
||||
|
||||
// // aggiunta panel statistiche
|
||||
// stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
|
||||
// document.body.appendChild(stats.dom)
|
||||
|
||||
// light
|
||||
const ambientLight = new THREE.AmbientLight( 0xffffff, 2.5) ; // color, intensity
|
||||
scene.add( ambientLight) ;
|
||||
@@ -67,8 +83,16 @@ const gridGroup = new THREE.Group() ;
|
||||
const frameGroup = new THREE.Group() ;
|
||||
|
||||
|
||||
//init();
|
||||
/*
|
||||
* Oggetto principale gestione WebGL Door visualizer
|
||||
*/
|
||||
class webgl_original {
|
||||
|
||||
/**
|
||||
* Metodo Init con visualizzazzione dati
|
||||
* @param {string} modelPath Percorso base recupero modello 3dm
|
||||
* @param {string} fName Nome del modello 3dm da visualizzare
|
||||
*/
|
||||
async initcall({ modelPath, fName}) {
|
||||
PATH = modelPath;
|
||||
FILE_NAME = fName;
|
||||
@@ -82,6 +106,95 @@ class webgl_original {
|
||||
let timeElapsed = endTime - startTime;
|
||||
console.log('init done in : ' + timeElapsed);
|
||||
}
|
||||
|
||||
async doFreeze()
|
||||
{
|
||||
freezed = true;
|
||||
}
|
||||
|
||||
async doAnimate()
|
||||
{
|
||||
freezed = false;
|
||||
// if(freezed)
|
||||
// {
|
||||
// freezed = false;
|
||||
// await animate();
|
||||
// }
|
||||
}
|
||||
|
||||
/**
|
||||
* reset posizione camera
|
||||
*/
|
||||
resetCamera()
|
||||
{
|
||||
myResetCamera();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* imposta vista isometrica/ortografica
|
||||
*/
|
||||
setCameraOrtho()
|
||||
{
|
||||
mySetCameraOrtho()
|
||||
}
|
||||
|
||||
/**
|
||||
* imposta vista prospettica
|
||||
*/
|
||||
setCameraPersp()
|
||||
{
|
||||
mySetCameraPersp()
|
||||
}
|
||||
|
||||
/**
|
||||
* toggle visualizzazione cubo
|
||||
*/
|
||||
toggleCube()
|
||||
{
|
||||
myToggleCubeVisibility();
|
||||
}
|
||||
|
||||
// /**
|
||||
// * toggle visualizzazione frame assi
|
||||
// */
|
||||
// toggleFrame()
|
||||
// {
|
||||
// myToggleFrameVisibility();
|
||||
// }
|
||||
|
||||
/**
|
||||
* toggle visualizzazione griglia
|
||||
*/
|
||||
toggleGrid()
|
||||
{
|
||||
myToggleGridVisibility();
|
||||
}
|
||||
|
||||
/**
|
||||
* toggle visualizzazione quotature
|
||||
*/
|
||||
toggleQuotes()
|
||||
{
|
||||
myToggleQuote()
|
||||
}
|
||||
|
||||
/**
|
||||
* toggle rotazione
|
||||
*/
|
||||
toggleRotation()
|
||||
{
|
||||
myToggleRotation()
|
||||
}
|
||||
|
||||
/**
|
||||
* Imposta rotazione
|
||||
* @param {boolean} isRotating
|
||||
*/
|
||||
setRotate(isRotating)
|
||||
{
|
||||
mySetRotation(isRotating);
|
||||
}
|
||||
}
|
||||
|
||||
export { webgl_original }
|
||||
@@ -90,12 +203,31 @@ export { webgl_original }
|
||||
// rendering
|
||||
function animate() {
|
||||
requestAnimationFrame( animate) ;
|
||||
|
||||
const elapsedTime = clock.getElapsedTime();
|
||||
targetTimeStep = fpsTgtHigh;
|
||||
if (freezed)
|
||||
{
|
||||
targetTimeStep = fpsTgtLow;
|
||||
// Update only if enough time has passed for target FPS
|
||||
if (elapsedTime < targetTimeStep)
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// if (freezed)
|
||||
// {
|
||||
// console.log(freezed);
|
||||
// return;
|
||||
// }
|
||||
|
||||
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) ;
|
||||
// updateRef( frame_ref1, camera_ref1, controls) ;
|
||||
// renderer_ref1.render( scene_ref1, camera_ref1) ;
|
||||
clock.start();
|
||||
}
|
||||
|
||||
function readDoor() {
|
||||
@@ -105,22 +237,22 @@ function readDoor() {
|
||||
// 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
|
||||
// adding groups to scene
|
||||
scene.add( dimensionGroup) ;
|
||||
scene.add( general_entity_Group) ;
|
||||
// setting Box3d of the door
|
||||
// setting Box3d of the door
|
||||
set3dBox( object) ;
|
||||
// setting camera position
|
||||
// setting camera position
|
||||
setCameraPosition() ;
|
||||
// setting grid
|
||||
// setting grid
|
||||
setGrid() ;
|
||||
// setting frame
|
||||
// setting frame
|
||||
setFrame() ;
|
||||
// static cube
|
||||
// static cube
|
||||
setStaticCube() ;
|
||||
// static frame
|
||||
setStaticFrame() ;
|
||||
// render loop
|
||||
// // static frame
|
||||
// setStaticFrame() ;
|
||||
// render loop
|
||||
animate() ;
|
||||
}) ;
|
||||
}
|
||||
@@ -258,6 +390,8 @@ function setStaticCube() {
|
||||
// renderer
|
||||
renderer_ref = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ;
|
||||
renderer_ref.setSize( divContainer.clientWidth, divContainer.clientHeight) ;
|
||||
// valutare abbassamento risoluzione
|
||||
// renderer_ref.setPixelRatio( 1 * window.devicePixelRatio) ;
|
||||
renderer_ref.setPixelRatio( 2 * window.devicePixelRatio) ;
|
||||
divContainer.appendChild( renderer_ref.domElement) ;
|
||||
// scene
|
||||
@@ -288,38 +422,30 @@ function setStaticCube() {
|
||||
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 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() {
|
||||
function myToggleCubeVisibility() {
|
||||
var cubeContainer = document.getElementById( 'RefRender') ;
|
||||
if ( cubeContainer.style.display === "none")
|
||||
cubeContainer.style.display = "block";
|
||||
@@ -327,67 +453,46 @@ function toggleCubeVisibility() {
|
||||
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 myToggleFrameVisibility() {
|
||||
// var frameContainer = document.getElementById( 'Ref1Render') ;
|
||||
// if ( frameContainer.style.display === "none")
|
||||
// frameContainer.style.display = "block";
|
||||
// else
|
||||
// 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 mySetRotation(isRotating) {
|
||||
controls.autoRotate = isRotating ;
|
||||
}
|
||||
function myToggleRotation() {
|
||||
controls.autoRotate = ( ! controls.autoRotate) ;
|
||||
}
|
||||
|
||||
// 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";
|
||||
}) ;
|
||||
function myToggleQuote() {
|
||||
dimensionGroup.visible = ! dimensionGroup.visible ;
|
||||
}
|
||||
|
||||
// // 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) ;
|
||||
// }
|
||||
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() ;
|
||||
}
|
||||
|
||||
@@ -14,59 +14,38 @@ canvas {
|
||||
|
||||
#divMenu {
|
||||
position: fixed ;
|
||||
top: 10px ;
|
||||
right: 10px ;
|
||||
top: 0.5rem;
|
||||
right: 0.2rem;
|
||||
background-color: transparent ;
|
||||
width: 275px ;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100% ;
|
||||
height: auto ;
|
||||
margin-bottom: 10px ;
|
||||
}
|
||||
|
||||
.container::after {
|
||||
content: "" ;
|
||||
display: table ;
|
||||
clear: both ;
|
||||
}
|
||||
|
||||
.container img {
|
||||
width: 100% ;
|
||||
height: auto ;
|
||||
display: block ;
|
||||
}
|
||||
|
||||
#helpButton {
|
||||
text-decoration: underline ;
|
||||
float: right ;
|
||||
height: auto ;
|
||||
#divLogo{
|
||||
position: fixed ;
|
||||
top: 4rem;
|
||||
right: 0.5rem;
|
||||
height: 5rem;
|
||||
width: 4rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
width: 100% ;
|
||||
height: auto ;
|
||||
color: white ;
|
||||
position: fixed ;
|
||||
top: 3.75rem;
|
||||
right: 0.5rem;
|
||||
z-index: 10;
|
||||
|
||||
width: 15rem;
|
||||
height: auto;
|
||||
/* color: white ; */
|
||||
background-color: transparent ;
|
||||
font-size: 0.9em ;
|
||||
}
|
||||
|
||||
#RefRender {
|
||||
position: fixed ;
|
||||
width: 200px ;
|
||||
height: 200px ;
|
||||
bottom: 10px ;
|
||||
right: 10px ;
|
||||
/*border: 1px solid black ;*/
|
||||
}
|
||||
|
||||
#Ref1Render {
|
||||
position: fixed ;
|
||||
width: 150px ;
|
||||
height: 150px ;
|
||||
bottom: 10px ;
|
||||
left: 10px ;
|
||||
width: 8rem ;
|
||||
height: 8rem ;
|
||||
bottom: 0.5rem ;
|
||||
left: 0.5rem ;
|
||||
background-color: transparent ;
|
||||
/*border: 1px solid black ;*/
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user