Samuele Locatelli
437 lines
21 KiB
HTML
437 lines
21 KiB
HTML
<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> |