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

Spostata gestione eventi in pagina

Browse Source
This commit is contained in:
Samuele Locatelli
2024-06-25 10:55:57 +02:00
parent ae30af04ca
commit 1c949d0329
9 changed files with 743 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TestArea_IIS01/TJSD/index.html
+15 -15
View File
@@ -27,23 +27,23 @@
<div class = 'container'>
<div id = 'infoDiv'>
<pre>
Camera settings :
Zoom : Wheel-Scroll
Pan : Mouse-Wheel and Drag
Rotate : Key-CTRL + Mouse-Right and Drag
Center : Key-'Space'
Type : Key-O ( orthographic )
Key-P ( perspective )
Toggle Auto-rotation : Key-R
Toggle Show-Dimension : Key-D
Camera settings :
Zoom : Wheel-Scroll
Pan : Mouse-Wheel and Drag
Rotate : Key-CTRL + Mouse-Right and Drag
Center : Key-'Space'
Type : Key-O ( orthographic )
Key-P ( perspective )
Toggle Auto-rotation : Key-R
Toggle Show-Dimension : Key-D
Toggle Show-Cube : Key-C
Toggle Show-Cube : Key-C
Toggle Show-Frame : Key-F
Toggle Show-Frame : Key-F
Toggle Show-Grid : Key-G
Toggle Show-Grid : Key-G
</pre>
</div>
</div>
@@ -54,7 +54,7 @@
<div id = 'Ref1Render'></div>
<script type = 'module'>
// importing
// importing
import * as THREE from './lib/node_modules/webgl-door-visualizer/three.module.js' ;
import { OrbitControls } from 'three/addons/jsm/controls/OrbitControls.js';
import { Rhino3dmLoader} from 'three/addons/jsm/loaders/3DMLoader.js' ;
TestArea_IIS01/TJSD/index2.html
+59
View File
@@ -0,0 +1,59 @@
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title> Door render </title>
<link rel = "stylesheet" href = "style.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<script type = "importmap">
{
"imports": {
"three": "./lib/node_modules/webgl-door-visualizer/three.module.js",
"three/addons/": "./lib/node_modules/webgl-door-visualizer/"
}
}
</script>
</head>
<body>
<!-- definition of Menu -->
<div id = 'divMenu'>
<!-- 3 elements: Logo, button "?" and Information -->
<div class = 'container'>
<img id = 'imgLogo' src = 'Images/logo.png'>
</div>
<div class = 'container'>
<button id = 'helpButton'>?</button>
</div>
<div class = 'container'>
<div id = 'infoDiv'>
<pre>
Camera settings :
Zoom : Wheel-Scroll
Pan : Mouse-Wheel and Drag
Rotate : Key-CTRL + Mouse-Right and Drag
Center : Key-'Space'
Type : Key-O ( orthographic )
Key-P ( perspective )
Toggle Auto-rotation : Key-R
Toggle Show-Dimension : Key-D
Toggle Show-Cube : Key-C
Toggle Show-Frame : Key-F
Toggle Show-Grid : Key-G
</pre>
</div>
</div>
</div>
<div id = 'DoorRender'></div>
<div id = 'RefRender'></div>
<div id = 'Ref1Render'></div>
<script type = 'module' src="./lib/node_modules/webgl-door-visualizer/webgl_draw.js"></script>
<script type = 'module' src="./lib/node_modules/webgl-door-visualizer/draw_call.js"></script>
</body>
</html>
TestArea_IIS01/TJSD/index3.html
+80
View File
@@ -0,0 +1,80 @@
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title> Door render </title>
<link rel = "stylesheet" href = "style.css">
<link rel="icon" type="image/x-icon" href="./images/favicon.ico">
<script type = "importmap">
{
"imports": {
"three": "./lib/node_modules/webgl-door-visualizer/three.module.js",
"three/addons/": "./lib/node_modules/webgl-door-visualizer/"
}
}
</script>
</head>
<body>
<!-- definition of Menu -->
<div id = 'divMenu'>
<!-- 3 elements: Logo, button "?" and Information -->
<div class = 'container'>
<img id = 'imgLogo' src = 'Images/logo.png'>
</div>
<div class = 'container'>
<button id = 'helpButton'>?</button>
</div>
<div class = 'container'>
<div id = 'infoDiv'>
<pre>
Camera settings :
Zoom : Wheel-Scroll
Pan : Mouse-Wheel and Drag
Rotate : Key-CTRL + Mouse-Right and Drag
Center : Key-'Space'
Type : Key-O ( orthographic )
Key-P ( perspective )
Toggle Auto-rotation : Key-R
Toggle Show-Dimension : Key-D
Toggle Show-Cube : Key-C
Toggle Show-Frame : Key-F
Toggle Show-Grid : Key-G
</pre>
</div>
</div>
</div>
<div id = 'DoorRender'></div>
<div id = 'RefRender'></div>
<div id = 'Ref1Render'></div>
<script type = 'module' src="./lib/node_modules/webgl-door-visualizer/webgl_draw.js"></script>
<script type = 'module'>
import { webgl_original } from './lib/node_modules/webgl-door-visualizer/webgl_draw.js';
const WGL = new webgl_original();
let options ={
modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models',
fName: getUrlParameter('src')
}
// Reading URL parameters -------------------------------------------------------------------------
function getUrlParameter( name) {
// get query string from URL
const queryString = window.location.search ;
// create URLSearchParams object from query string
const urlParams = new URLSearchParams( queryString) ;
// get parameter value by name
return urlParams.get( name) ;
}
WGL.initcall(options);
</script>
</body>
</html>
TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/draw_call.js
Generated Vendored
+20
View File
@@ -0,0 +1,20 @@
import { webgl_original } from './webgl_draw.js';
const WGL = new webgl_original();
let options ={
modelPath: 'https://iis01.egalware.com/Test3D/THREEJS_DOORS/Door_models',
fName: getUrlParameter('src')
}
// Reading URL parameters -------------------------------------------------------------------------
function getUrlParameter( name) {
// get query string from URL
const queryString = window.location.search ;
// create URLSearchParams object from query string
const urlParams = new URLSearchParams( queryString) ;
// get parameter value by name
return urlParams.get( name) ;
}
WGL.initcall(options);
TestArea_IIS01/TJSD/lib/node_modules/webgl-door-visualizer/webgl_draw.js
Generated Vendored
+393
View File
@@ -0,0 +1,393 @@
// importing
import * as THREE from './three.module.js' ;
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { Rhino3dmLoader} from './jsm/loaders/3DMLoader.js' ;
import ViewCubeControls from './custom/cubeControls.js';
import { getStaticRef, updateRef } from './custom/refControls.js' ;
// VARIABILI DI CONTROLLO
const EPS_SMALL = 0.001 ;
const GRID_GROUP_NAME = 'gridGroup' ;
const FRAME_GROUP_NAME = 'frameGroup' ;
const CAMERA_PERSP = 0 ;
const CAMERA_ORTHO = 1 ;
const DIMENSION_GROUP_NAME = 'dimGroup' ;
const DIMENSION_DISCRIMINANT_NAME = 'dim_' ;
const GENERAL_ENTITY_GROUP_NAME = 'generalGroup' ;
const START_CAMERA_POSITION = ( new THREE.Vector3( -0.3994, 0.6339, 0.66223)).normalize() ;
var SCENE_BACKGROUND_COLOR = new THREE.Color( 0x808080) ;
var CAMERA_TYPE = CAMERA_ORTHO ;
var SHOW_DIMENSION = true ;
var GRID_MAIN_COLOR = new THREE.Color( 0x000000) ;
var GRID_SECOND_COLOR = new THREE.Color( 0xcccccc) ;
var PATH = './Door_models' ;
var FILE_NAME = 'Demo.3dm'
var CTRL_DOWN = false ;
// ref global variables ---------
var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ; var cube_ref ;
var scene_ref1 ; var renderer_ref1 ; var camera_ref1 ; var group_ref1 ; var frame_ref1 ;
// shared variables
/* Box3d of the door ------------ */
var m_box ; var m_size ; var m_center ; // set in setCameraPosition(), used in setGrid(), setFrame()
/* ------------------------------ */
// costanti globali
// scene
const scene = new THREE.Scene() ;
scene.background = SCENE_BACKGROUND_COLOR ;
// camera
const perspCamera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 150000) ;
const ortoCamera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,
window.innerHeight / 2, window.innerHeight / - 2, EPS_SMALL, 150000) ;
// render
const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true}) ;
renderer.setSize( window.innerWidth, window.innerHeight) ;
renderer.setPixelRatio( 2 * window.devicePixelRatio) ;
document.getElementById( 'DoorRender').appendChild( renderer.domElement) ;
renderer.shadowMap.enabled = true ;
// light
const ambientLight = new THREE.AmbientLight( 0xffffff, 2.5) ; // color, intensity
scene.add( ambientLight) ;
// controls
const controls = new OrbitControls( CAMERA_TYPE == CAMERA_PERSP ? perspCamera : ortoCamera, renderer.domElement) ;
controls.autoRotate = true ;
// entity-groups ( to split entities between dimensions and general's ones )
const dimensionGroup = new THREE.Group() ;
dimensionGroup.name = DIMENSION_GROUP_NAME ;
const general_entity_Group = new THREE.Group() ;
general_entity_Group.name = GENERAL_ENTITY_GROUP_NAME ;
// creating grid and frame ( over it ) Group
const gridGroup = new THREE.Group() ;
const frameGroup = new THREE.Group() ;
//init();
class webgl_original {
async initcall({ modelPath, fName}) {
PATH = modelPath;
FILE_NAME = fName;
// console.log('path: ' + modelPath)
// console.log('name: ' + fName)
let startTime = performance.now();
// reading .3dm file
await readDoor() ;
let endTime = performance.now();
let timeElapsed = endTime - startTime;
console.log('init done in : ' + timeElapsed);
}
}
export { webgl_original }
// rendering
function animate() {
requestAnimationFrame( animate) ;
renderer.render( scene, controls.object) ;
controls.update() ;
cube_ref.update( controls) ;
renderer_ref.render( scene_ref, camera_ref) ;
updateRef( frame_ref1, camera_ref1, controls) ;
renderer_ref1.render( scene_ref1, camera_ref1) ;
}
function readDoor() {
const loader = new Rhino3dmLoader() ;
loader.setLibraryPath( './lib/node_modules/webgl-door-visualizer/jsm/libs/rhino3dm/' ) ;
loader.load( PATH + "/" + FILE_NAME, function( object) {
// removing shading from colors and adjusting z-fighting with lines ( organizing groups entities )
for ( let i = 0 ; i < object.children.length ; ++ i)
setOpenGLRenderProperties( object.children[i], dimensionGroup, general_entity_Group) ;
// adding groups to scene
scene.add( dimensionGroup) ;
scene.add( general_entity_Group) ;
// setting Box3d of the door
set3dBox( object) ;
// setting camera position
setCameraPosition() ;
// setting grid
setGrid() ;
// setting frame
setFrame() ;
// static cube
setStaticCube() ;
// static frame
setStaticFrame() ;
// render loop
animate() ;
}) ;
}
function setOpenGLRenderProperties( object, dimensionGroup, general_entity_Group) {
if ( object.type == 'Mesh') {
object.material.emissive.set( 0x000000) ; // Set emissive color to black
object.material.polygonOffset = true ; // enable polygonOffset
object.material.polygonOffsetFactor = 1 ; // shifting mesh
object.material.polygonOffsetUnits = 1 ; // shifting units
object.material.depthTest = true ; // deep test enable for triangle rendering
object.renderOrder = 0 ; // rendering order priority
if ( object.transparent)
object.opacity = 0.25 ;
}
else if ( object.type == 'Line') {
object.material.depthTest = false ; // disable deep test ( no z-fighting with meshes)
object.material.transparent = true ; // setting transparency for visibility inside/outside meshes
object.material.opacity = 1 ; // high-level of opacity
object.renderOrder = 1 ; // ordering them on Z-buffer after meshes
}
// classifying between groups
if ( object.name.substring( 0, DIMENSION_DISCRIMINANT_NAME.length) == DIMENSION_DISCRIMINANT_NAME)
dimensionGroup.add( object.clone()) ; // dimension-type object
else
general_entity_Group.add( object.clone()) ; // general-entity-type object
}
function set3dBox( object) {
// box of the door
m_box = new THREE.Box3().setFromObject( object) ;
// size of the box
m_size = m_box.getSize( new THREE.Vector3()) ;
// center of the box
m_center = m_box.getCenter( new THREE.Vector3()) ;
}
function setCameraPosition() {
// maxSize of the box
var maxSize = Math.max( m_size.x, m_size.y, m_size.z) ;
const aspectRatio = window.innerWidth / window.innerHeight ;
if ( CAMERA_TYPE == CAMERA_ORTHO) {
maxSize *= 5 ;
controls.object.left = - 0.2 * aspectRatio * maxSize ;
controls.object.right = 0.2 * aspectRatio * maxSize ;
controls.object.bottom = - 0.2 * maxSize ;
controls.object.top = 0.2 * maxSize ;
controls.object.zoom = 1.5 ; // 1.25 * maxSize
controls.object.near = - 2 * maxSize ;
controls.object.far = 2 * maxSize ;
maxSize /= 5 ;
}
// position of the camera
const positionVec = m_box.min.clone().add( START_CAMERA_POSITION.clone().multiplyScalar( maxSize)) ;
const targetVec = m_box.min.clone().add( new THREE.Vector3( 0, 0.5 * m_size.y, 0)) ;
controls.object.position.copy( positionVec) ; // this zoom won't change for ortho, it's just for the position
controls.target.copy( targetVec) ;
// updating projection matrix
controls.object.updateProjectionMatrix() ;
controls.update() ;
}
function setGrid() {
// getting maximum size over X and Z
const gridHalf_edge = 1.25 * Math.max( m_size.x, m_size.z) ;
// defining step
const step = gridHalf_edge / 5 ;
// creating the grid and adding to the scene
for ( let i = 0 ; i < 11 ; ++ i) {
const x_line = new THREE.Line(
new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3( - gridHalf_edge, 0., - gridHalf_edge + i * step),
new THREE.Vector3(( i != 5 ? gridHalf_edge : 0.), 0., - gridHalf_edge + i * step)
]),
new THREE.LineBasicMaterial({ color : ( i != 5 ? GRID_SECOND_COLOR : GRID_MAIN_COLOR)})
) ;
gridGroup.add( x_line) ;
const y_line = new THREE.Line(
new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3( - gridHalf_edge + i * step , 0., - gridHalf_edge),
new THREE.Vector3( - gridHalf_edge + i * step, 0., ( i != 5 ? gridHalf_edge : 0.))
]),
new THREE.LineBasicMaterial({ color : ( i != 5 ? GRID_SECOND_COLOR : GRID_MAIN_COLOR)})
) ;
gridGroup.add( y_line) ;
}
// adding the group to the scene
gridGroup.name = GRID_GROUP_NAME ;
scene.add( gridGroup) ;
}
function setFrame() {
// getting maximum size over X and Z
const maxSize = 1.25 * Math.max( m_size.x, m_size.z) ;
// x_axis
const x_axis = new THREE.Line(
new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3( 0., 0., 0.),
new THREE.Vector3( maxSize, 0., 0.)
]),
new THREE.LineBasicMaterial({ color : new THREE.Color( 0xff0000)})
) ;
// y_axis
const y_axis = new THREE.Line(
new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3( 0., 0., 0.),
new THREE.Vector3( 0., 0., maxSize)
]),
new THREE.LineBasicMaterial({ color : new THREE.Color( 0x00ff00)})
) ;
// z_axis
const z_axis = new THREE.Line(
new THREE.BufferGeometry().setFromPoints([
new THREE.Vector3( 0., 0., 0.),
new THREE.Vector3( 0., 1., 0.)
]),
new THREE.LineBasicMaterial({ color : new THREE.Color( 0x0000ff)})
) ;
frameGroup.add( x_axis) ;
frameGroup.add( y_axis) ;
frameGroup.add( z_axis) ;
frameGroup.name = FRAME_GROUP_NAME ;
scene.add( frameGroup) ;
}
function setStaticCube() {
// container of the cube
const divContainer = document.getElementById( 'RefRender') ;
// renderer
renderer_ref = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ;
renderer_ref.setSize( divContainer.clientWidth, divContainer.clientHeight) ;
renderer_ref.setPixelRatio( 2 * window.devicePixelRatio) ;
divContainer.appendChild( renderer_ref.domElement) ;
// scene
scene_ref = new THREE.Scene() ;
if ( CAMERA_TYPE == CAMERA_ORTHO)
camera_ref = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5,
divContainer.clientHeight / 5, -divContainer.clientHeight / 5, 0.1, 1000) ;
else
camera_ref = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ;
// setting standard camera posizion and lookAt -> made according cube dimension
camera_ref.position.set( 0, 0, 70) ;
camera_ref.lookAt( 0, 0, 0) ;
// creatin the cube object and adding it to the scene
cube_ref = new ViewCubeControls( camera_ref, 30, 5, renderer_ref.domElement, controls) ;
const myCube = cube_ref.getObject() ;
scene_ref.add( myCube) ;
// event listener for angle change
cube_ref.addEventListener( 'angle-change', ({ quaternion}) => {
// blocking t-parameter
cube_ref._setVersorAndRotation() ; // setting normal versor of the face
const distanceC = controls.object.position.distanceTo( new THREE.Vector3( controls.target.x, controls.target.y, controls.target.z)) ;
var vtEnd = new THREE.Vector3( controls.target.x + cube_ref._vers.x * distanceC,
controls.target.y + cube_ref._vers.y * distanceC,
controls.target.z + cube_ref._vers.z * distanceC) ;
controls.object.position.set( vtEnd.x, vtEnd.y, vtEnd.z) ;
controls.update() ;
}) ;
cube_ref._colorCube() ;
}
function setStaticFrame() {
// container of the cube
const divContainer = document.getElementById( 'Ref1Render') ;
// renderer
renderer_ref1 = new THREE.WebGLRenderer({ antialias: true, alpha : true, transparent : true}) ;
renderer_ref1.setSize( divContainer.clientWidth, divContainer.clientHeight) ;
renderer_ref1.setPixelRatio( 2 * window.devicePixelRatio) ;
divContainer.appendChild( renderer_ref1.domElement) ;
// scene
scene_ref1 = new THREE.Scene() ;
if ( CAMERA_TYPE == CAMERA_ORTHO)
camera_ref1 = new THREE.OrthographicCamera( - divContainer.clientWidth / 5, divContainer.clientWidth / 5,
divContainer.clientHeight / 5, - divContainer.clientHeight / 5, 0.1, 1000) ;
else
camera_ref1 = new THREE.PerspectiveCamera( 50, 1, 0.1, 1000) ;
// setting standard camera posizion and lookAt -> made according cube dimension
camera_ref1.position.set( 0, 0, 70) ;
camera_ref1.lookAt( 0, 0, 0) ;
// creating the cube object and adding it to the scene
frame_ref1 = getStaticRef( 1, 25) ;
scene_ref1.add( frame_ref1) ;
}
function ToggleRotation() {
controls.autoRotate = ( ! controls.autoRotate) ;
}
function toggleDimensionVisibility() {
dimensionGroup.visible = ! dimensionGroup.visible ;
}
function toggleCubeVisibility() {
var cubeContainer = document.getElementById( 'RefRender') ;
if ( cubeContainer.style.display === "none")
cubeContainer.style.display = "block";
else
cubeContainer.style.display = "none";
}
function toggleFrameVisibility() {
var frameContainer = document.getElementById( 'Ref1Render') ;
if ( frameContainer.style.display === "none")
frameContainer.style.display = "block";
else
frameContainer.style.display = "none";
}
function toggleGridVisibility() {
gridGroup.visible = ! gridGroup.visible ;
frameGroup.visible = ! frameGroup.visible ;
}
// Event Listner -------------------------------------------------------------------
// KEY
document.addEventListener( "keypress", function( event) {
if ( event.key.toLowerCase() === "r")
ToggleRotation() ;
else if ( event.key.toLowerCase() === 'p') {
if ( CAMERA_TYPE == CAMERA_PERSP)
return ;
controls.object = perspCamera.clone() ;
CAMERA_TYPE = CAMERA_PERSP ;
setCameraPosition() ;
}
else if ( event.key.toLowerCase() === 'o') {
if ( CAMERA_TYPE == CAMERA_ORTHO)
return ;
controls.object = ortoCamera.clone() ;
CAMERA_TYPE = CAMERA_ORTHO ;
setCameraPosition() ;
}
else if ( event.key.toLowerCase() === 'd')
toggleDimensionVisibility() ;
else if ( event.key.toLowerCase() === ' ')
setCameraPosition() ;
else if ( event.key.toLowerCase() === 'c')
toggleCubeVisibility() ;
else if ( event.key.toLowerCase() === 'f')
toggleFrameVisibility() ;
else if ( event.key.toLowerCase() === 'g')
toggleGridVisibility() ;
}) ;
// Elements
var helpButton = document.getElementById( "helpButton") ;
var infoDiv = document.getElementById( "infoDiv") ;
infoDiv.style.display = "none";
helpButton.addEventListener( "click", function() {
if ( infoDiv.style.display === "none")
infoDiv.style.display = "block" ;
else
infoDiv.style.display = "none";
}) ;
// // Reading URL parameters -------------------------------------------------------------------------
// function getUrlParameter( name) {
// // get query string from URL
// const queryString = window.location.search ;
// // create URLSearchParams object from query string
// const urlParams = new URLSearchParams( queryString) ;
// // get parameter value by name
// return urlParams.get( name) ;
// }
WebDoorView/3DM_test/test_js_call/index3.html
+94 -5
View File
@@ -18,11 +18,21 @@
<!-- definition of Menu -->
<div id = 'divMenu'>
<!-- 3 elements: Logo, button "?" and Information -->
<div class = 'container'>
<img id = 'imgLogo' src = 'Images/logo.png'>
<div class = 'container'>
<img id = 'imgLogo' src = 'Images/logo.png'>
</div>
<div class="d-flex">
</div>
<div class = 'container'>
<button id = 'helpButton'>?</button>
<button onclick="resetCamera()">bar</button>
<button onclick="setOrtho()">O</button>
<button onclick="setPersp()">P</button>
<button onclick="toggleCube()">C</button>
<button onclick="toggleFrame()">F</button>
<button onclick="toggleGrid()">G</button>
<button onclick="toggleQuote()">Q</button>
<button onclick="toggleRotate()">R</button>
</div>
<div class = 'container'>
<div id = 'infoDiv'>
@@ -37,14 +47,14 @@
Toggle Auto-rotation : Key-R
Toggle Show-Dimension : Key-D
Toggle Show-Quotes : Key-Q
Toggle Show-Cube : Key-C
Toggle Show-Frame : Key-F
Toggle Show-Grid : Key-G
</pre>
</pre>
</div>
</div>
</div>
@@ -52,7 +62,7 @@
<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';
@@ -74,7 +84,86 @@
return urlParams.get( name) ;
}
// reset camera
window.resetCamera = () =>
{
console.log("Reset Camera");
WGL.resetCamera();
}
// reset camera
window.setOrtho = () =>
{
console.log("Set Camera ISO/ORTHO");
WGL.setCameraOrtho();
}
// reset camera
window.setPersp = () =>
{
console.log("Set Camera Perspective");
WGL.setCameraPersp();
}
// toggle cubo
window.toggleCube = () =>
{
console.log("Toggle Cubo");
WGL.toggleCube();
}
// toggle frame
window.toggleFrame = () =>
{
console.log("Toggle Frame");
WGL.toggleFrame();
}
// toggle griglia
window.toggleGrid = () =>
{
console.log("Toggle Grid");
WGL.toggleGrid();
}
// toggle quotatura
window.toggleQuote = () =>
{
console.log("Toggle Quote");
WGL.toggleQuotes();
}
// toggle rotazione
window.toggleRotate = () =>
{
console.log("Toggle Rotate");
WGL.toggleRotation();
}
WGL.initcall(options);
// Event Listner -------------------------------------------------------------------
// KEY
document.addEventListener( "keypress", function( event) {
if ( event.key.toLowerCase() === "r")
toggleRotate();
else if ( event.key.toLowerCase() === 'p') {
setPersp();
}
else if ( event.key.toLowerCase() === 'o') {
setOrtho();
}
else if ( event.key.toLowerCase() === 'q')
toggleQuote();
else if ( event.key.toLowerCase() === ' ')
resetCamera();
else if ( event.key.toLowerCase() === 'c')
toggleCube();
else if ( event.key.toLowerCase() === 'f')
toggleFrame();
else if ( event.key.toLowerCase() === 'g')
toggleGrid();
}) ;
</script>
</body>
</html>
WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/draw_call.js
Generated Vendored
+1 -1
View File
@@ -17,4 +17,4 @@ function getUrlParameter( name) {
return urlParams.get( name) ;
}
WGL.initcall(options);
WGL.initcall(options);
WebDoorView/3DM_test/test_js_call/lib/node_modules/webgl-door-visualizer/webgl_draw.js
Generated Vendored
+80 -50
View File
@@ -82,6 +82,54 @@ class webgl_original {
let timeElapsed = endTime - startTime;
console.log('init done in : ' + timeElapsed);
}
// reset posizione camera
resetCamera()
{
myResetCamera();
}
// imposta vista isometrica/ortografica
setCameraOrtho()
{
mySetCameraOrtho()
}
// imposta vista prospettica
setCameraPersp()
{
mySetCameraPersp()
}
// toggle visualizzaizone cubo
toggleCube()
{
myToggleCubeVisibility();
}
// toggle visualizzazione frame assi
toggleFrame()
{
myToggleFrameVisibility();
}
// toggle visualizzazione griglia
toggleGrid()
{
myToggleGridVisibility();
}
// toggle visualizzazione quotature
toggleQuotes()
{
myToggleQuote()
}
// toggle rotazione
toggleRotation()
{
myToggleRotation()
}
}
export { webgl_original }
@@ -311,15 +359,7 @@ function setStaticFrame() {
scene_ref1.add( frame_ref1) ;
}
function ToggleRotation() {
controls.autoRotate = ( ! controls.autoRotate) ;
}
function toggleDimensionVisibility() {
dimensionGroup.visible = ! dimensionGroup.visible ;
}
function toggleCubeVisibility() {
function myToggleCubeVisibility() {
var cubeContainer = document.getElementById( 'RefRender') ;
if ( cubeContainer.style.display === "none")
cubeContainer.style.display = "block";
@@ -327,7 +367,7 @@ function toggleCubeVisibility() {
cubeContainer.style.display = "none";
}
function toggleFrameVisibility() {
function myToggleFrameVisibility() {
var frameContainer = document.getElementById( 'Ref1Render') ;
if ( frameContainer.style.display === "none")
frameContainer.style.display = "block";
@@ -335,41 +375,40 @@ function toggleFrameVisibility() {
frameContainer.style.display = "none";
}
function toggleGridVisibility() {
function myToggleGridVisibility() {
gridGroup.visible = ! gridGroup.visible ;
frameGroup.visible = ! frameGroup.visible ;
}
// Event Listner -------------------------------------------------------------------
// KEY
document.addEventListener( "keypress", function( event) {
if ( event.key.toLowerCase() === "r")
ToggleRotation() ;
else if ( event.key.toLowerCase() === 'p') {
if ( CAMERA_TYPE == CAMERA_PERSP)
return ;
controls.object = perspCamera.clone() ;
CAMERA_TYPE = CAMERA_PERSP ;
setCameraPosition() ;
}
else if ( event.key.toLowerCase() === 'o') {
if ( CAMERA_TYPE == CAMERA_ORTHO)
return ;
controls.object = ortoCamera.clone() ;
CAMERA_TYPE = CAMERA_ORTHO ;
setCameraPosition() ;
}
else if ( event.key.toLowerCase() === 'd')
toggleDimensionVisibility() ;
else if ( event.key.toLowerCase() === ' ')
setCameraPosition() ;
else if ( event.key.toLowerCase() === 'c')
toggleCubeVisibility() ;
else if ( event.key.toLowerCase() === 'f')
toggleFrameVisibility() ;
else if ( event.key.toLowerCase() === 'g')
toggleGridVisibility() ;
}) ;
function myToggleRotation() {
controls.autoRotate = ( ! controls.autoRotate) ;
}
function myToggleQuote() {
dimensionGroup.visible = ! dimensionGroup.visible ;
}
function mySetCameraOrtho() {
if ( CAMERA_TYPE == CAMERA_ORTHO)
return ;
controls.object = ortoCamera.clone() ;
CAMERA_TYPE = CAMERA_ORTHO ;
setCameraPosition() ;
}
function mySetCameraPersp() {
if ( CAMERA_TYPE == CAMERA_PERSP)
return ;
controls.object = perspCamera.clone() ;
CAMERA_TYPE = CAMERA_PERSP ;
setCameraPosition() ;
}
function myResetCamera() {
setCameraPosition() ;
}
// Elements
var helpButton = document.getElementById( "helpButton") ;
@@ -382,12 +421,3 @@ helpButton.addEventListener( "click", function() {
infoDiv.style.display = "none";
}) ;
// // Reading URL parameters -------------------------------------------------------------------------
// function getUrlParameter( name) {
// // get query string from URL
// const queryString = window.location.search ;
// // create URLSearchParams object from query string
// const urlParams = new URLSearchParams( queryString) ;
// // get parameter value by name
// return urlParams.get( name) ;
// }
WebDoorView/3DM_test/test_js_call/style.css
+1 -1
View File
@@ -40,7 +40,7 @@ canvas {
#helpButton {
text-decoration: underline ;
float: right ;
/* float: right ; */
height: auto ;
}