Samuele Locatelli
496 lines
24 KiB
HTML
496 lines
24 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">
|
|
<script type = "importmap">
|
|
{
|
|
"imports": {
|
|
"three": "./Libs/node_modules/three/build/three.module.js",
|
|
"three/addons/": "./Libs/node_modules/three/examples/jsm/"
|
|
}
|
|
}
|
|
</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-Left and Drag ( hold )
|
|
Rotate : Mouse-Right and Drag ( hold )
|
|
Type : Key-O ( orthographic )
|
|
Key-P ( perspective )
|
|
|
|
Toggle Auto-rotation : Key-R
|
|
|
|
Toggle Show-Dimension : Key-D
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id = 'DoorRender'></div>
|
|
<div id = 'RefRender'></div>
|
|
|
|
<script type = 'module'>
|
|
// importing
|
|
import * as THREE from './Libs/node_modules/three/build/three.module.js' ;
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
import { Rhino3dmLoader} from 'three/addons/loaders/3DMLoader.js' ;
|
|
import ViewCubeControls from './CubeRef/cubeControls.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 ;
|
|
var SCENE_BACKGROUND_COLOR = new THREE.Color( 0x808080) ;
|
|
var CAMERA_TYPE = CAMERA_PERSP ;
|
|
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') ;
|
|
|
|
// referement global variables ---------
|
|
var scene_ref ; var renderer_ref ; var camera_ref ; var group_ref ;
|
|
var cube_ref ; var anim1 = 0 ; var ComeFromRot ; var index_LSS = [] ; var face_list = [] ;
|
|
/* -----------------------------------*/
|
|
|
|
|
|
// 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) ;
|
|
|
|
// reading .3dm file
|
|
readDoor() ;
|
|
|
|
// rendering
|
|
function animate() {
|
|
requestAnimationFrame( animate) ;
|
|
renderer.render( scene, controls.object) ;
|
|
controls.update() ;
|
|
if ( cube_ref._blockRot == false) {
|
|
if ( ComeFromRot) {
|
|
ComeFromRot = false ;
|
|
anim1 = 0 ;
|
|
}
|
|
else {
|
|
//controls.autoRotate = controls.motion ;
|
|
controls.update() ;
|
|
}
|
|
}
|
|
else {
|
|
ComeFromRot = true ;
|
|
}
|
|
if ( cube_ref._name != null && cube_ref._name != '') {
|
|
index_LSS = [] ;
|
|
for ( var i = 0 ; i < face_list.length ; i++) {
|
|
if ( face_list[i].name == cube_ref._name) {
|
|
index_LSS.push( i) ;
|
|
face_list[i].material.color = new THREE.Color( 0xFFFFFF) ;
|
|
}
|
|
}
|
|
for ( var i = 0 ; i < face_list.length ; i++) {
|
|
for ( var j = 0 ; j < index_LSS.length ; j++) {
|
|
if ( face_list[i].name != face_list[index_LSS[j]].name) {
|
|
face_list[i].material.color = face_list[i].material.oldColor ;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
else { // no intersezione
|
|
for ( var j = 0 ; j < index_LSS.length ; j++) {
|
|
face_list[index_LSS[j]].material.color = face_list[index_LSS[j]].material.oldColor ;
|
|
}
|
|
}
|
|
cube_ref.update( controls) ;
|
|
renderer_ref.render( scene_ref, camera_ref) ;
|
|
}
|
|
|
|
function readDoor() {
|
|
const loader = new Rhino3dmLoader() ;
|
|
loader.setLibraryPath( './Libs/node_modules/three/examples/jsm/libs/rhino3dm/' ) ;
|
|
loader.load( PATH + "/" + FILE_NAME, function( object) {
|
|
// removing shading from colors and adjusting z-fighting with lines
|
|
for ( let i = 0 ; i < object.children.length ; ++ i)
|
|
setOpenGLRenderProperties( object.children[i]) ;
|
|
scene.add( object) ;
|
|
// setting Box3d of the door
|
|
set3dBox( object) ;
|
|
// setting camera position
|
|
setCameraPosition() ;
|
|
// setting grid
|
|
setGrid() ;
|
|
// setting frame
|
|
setFrame() ;
|
|
// static frame
|
|
setStaticFrame() ;
|
|
// render loop
|
|
animate() ;
|
|
}) ;
|
|
}
|
|
|
|
function setOpenGLRenderProperties( object) {
|
|
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
|
|
}
|
|
}
|
|
|
|
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
|
|
const maxSize = Math.max( m_size.x, m_size.y, m_size.z) ;
|
|
if ( CAMERA_TYPE == CAMERA_ORTHO) {
|
|
const aspectRatio = window.innerWidth / window.innerHeight ;
|
|
controls.object.left = - aspectRatio * maxSize ;
|
|
controls.object.right = aspectRatio * maxSize ;
|
|
controls.object.bottom = - maxSize ;
|
|
controls.object.top = maxSize ;
|
|
controls.object.zoom = 1.5 ; // 1.25 * maxSize
|
|
}
|
|
// position of the camera
|
|
const positionVec = m_box.min.clone().add(( new THREE.Vector3( 0, 0.75, 1)).normalize().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 grid Group
|
|
const gridGroup = new THREE.Group() ;
|
|
// creating the grid and adding to the scene
|
|
for ( let i = 0 ; i < 11 ; ++ i) {
|
|
const x_line = new THREE.Line(
|
|
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)})
|
|
) ;
|
|
|
|
// creating the group of the frame and adding it to the scene
|
|
const frameGroup = new THREE.Group() ;
|
|
frameGroup.add( x_axis) ;
|
|
frameGroup.add( y_axis) ;
|
|
frameGroup.add( z_axis) ;
|
|
frameGroup.name = FRAME_GROUP_NAME ;
|
|
scene.add( frameGroup) ;
|
|
}
|
|
|
|
function setStaticFrame() {
|
|
// 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) ;
|
|
|
|
camera_ref.position.set( 0, 0, 70) ;
|
|
camera_ref.lookAt( 0, 0, 0) ;
|
|
cube_ref = new ViewCubeControls( camera_ref, 30, 5, renderer_ref.domElement, controls) ;
|
|
scene_ref.add( cube_ref.getObject()) ;
|
|
var Cposition = null ;
|
|
var Ctarget = null ;
|
|
var distanceC = 0 ;
|
|
cube_ref.addEventListener( 'angle-change', ({ quaternion, t}) => {
|
|
getVersor( cube_ref._name_click) ;
|
|
if ( cube_ref._blockRot) {
|
|
if ( anim1 == 0)
|
|
distanceC = camera.position.distanceTo( new THREE.Vector3( controls.target.x, controls.target.y, controls.target.z)) ;
|
|
}
|
|
anim1 ++ ;
|
|
var VectorEnd = new THREE.Vector3( controls.target.x + Cvers.x * distanceC,
|
|
controls.target.y + Cvers.y * distanceC,
|
|
controls.target.z + Cvers.z * distanceC) ;
|
|
camera.position.lerp( VectorEnd, t) ;
|
|
controls.update() ;
|
|
}) ;
|
|
ComeFromRot = false ;
|
|
var Cvers = null ;
|
|
var Crot = null ;
|
|
const toRad = Math.PI / 180 ;
|
|
cube_ref._colorCube() ;
|
|
}
|
|
|
|
function ToggleRotation() {
|
|
controls.autoRotate = ( ! controls.autoRotate) ;
|
|
}
|
|
|
|
// Event Listner -------------------------------------------------------------------
|
|
// KEY
|
|
document.addEventListener( "keypress", function( event) {
|
|
if ( event.key === "r")
|
|
ToggleRotation() ;
|
|
else if ( event.key === 'p') {
|
|
if ( CAMERA_TYPE == CAMERA_PERSP)
|
|
return ;
|
|
controls.object = perspCamera.clone() ;
|
|
CAMERA_TYPE = CAMERA_PERSP ;
|
|
setCameraPosition() ;
|
|
}
|
|
else if ( event.key === 'o') {
|
|
if ( CAMERA_TYPE == CAMERA_ORTHO)
|
|
return ;
|
|
controls.object = ortoCamera.clone() ;
|
|
CAMERA_TYPE = CAMERA_ORTHO ;
|
|
setCameraPosition() ;
|
|
}
|
|
else if ( event.key === 'd')
|
|
window.alert( 'manca :(') ;
|
|
});
|
|
|
|
// 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) ;
|
|
}
|
|
|
|
// static cube -----------------------------------------------------------------------------------------
|
|
function getVersor( name) {
|
|
switch ( name) {
|
|
case 2: //FRONT
|
|
Cvers = new THREE.Vector3(0, 0, 1);
|
|
Crot = new THREE.Vector3( 0 * toRad, 0 * toRad, 0 * toRad);
|
|
break ;
|
|
case 4: //BACK
|
|
Cvers = new THREE.Vector3( 0, 0, -1) ;
|
|
Crot = new THREE.Vector3( 0 * toRad, 180 * toRad, 0 * toRad);
|
|
break ;
|
|
case 3: //RIGHT
|
|
Cvers = new THREE.Vector3( 1, 0, 0) ;
|
|
Crot = new THREE.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 5: //LEFT
|
|
Cvers = new THREE.Vector3(-1, 0, 0) ;
|
|
Crot = new THREE.Vector3( 0 * toRad, -270 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 1: //TOP
|
|
Cvers = new THREE.Vector3( 0, 1, 0) ;
|
|
Crot = new THREE.Vector3( 90 * toRad, 0 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 6: //BOTTOM
|
|
Cvers = new THREE.Vector3 (0, -1, 0) ;
|
|
Crot = new THREE.Vector3( -90 * toRad, 0 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 11: //FRONT-RIGHT
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
|
|
Crot = new THREE.Vector3( 0 * toRad, -45 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 7: //FRONT-TOP
|
|
Cvers = new THREE.Vector3( 0, 1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
|
|
Crot = new THREE.Vector3(45 * toRad, 0 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 14: //FRONT-LEFT
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
|
|
Crot = new THREE.Vector3( 0 * toRad, -315 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 15: //FRONT-BOTTOM
|
|
Cvers = new THREE.Vector3( 0, -1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
|
|
Crot = new THREE.Vector3(-45 * toRad, 0 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 12: //BACK-RIGHT
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt( 2), 0, -1 / Math.sqrt( 2)) ;
|
|
Crot = new THREE.Vector3( 0 * toRad, -135 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 9: //BACK-TOP
|
|
Cvers = new THREE.Vector3( 0, 1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
|
|
Crot = new THREE.Vector3( 45 * toRad, -180 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 13: //BACK-LEFT
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt(2), 0, -1 / Math.sqrt(2)) ;
|
|
Crot = new THREE.Vector3(0 * toRad, -225 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 17: //BACK-BOTTOM
|
|
Cvers = new THREE.Vector3( 0, -1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
|
|
Crot = new THREE.Vector3( -45 * toRad, -180 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 8: //RIGHT-TOP
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt( 2), 1 / Math.sqrt( 2), 0) ;
|
|
Crot = new THREE.Vector3( 45 * toRad, -90 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 16: //RIGHT-BOTTOM
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ;
|
|
Crot = new THREE.Vector3( -45 * toRad, -90 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 10: //LEFT-TOP
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt(2), 1 / Math.sqrt(2), 0) ;
|
|
Crot = new THREE.Vector3( 45 * toRad, -270 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 18: //LEFT-BOTTOM
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ;
|
|
Crot = new THREE.Vector3(-45 * toRad, 270 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 21: //TOP-LEFT-BACK
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3( 45 * toRad, -225 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 20: //TOP-BACK-RIGHT
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3( 45 * toRad, -135 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 19: //TOP-RIGHT-FRONT
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3( 45 * toRad, -45 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 22: //TOP-FRONT-LEFT
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3( 45 * toRad, -315 * toRad, 0 * toRad) ;
|
|
break ;
|
|
case 26: //BOTTOM-LEFT-FRONT
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3(-45 * toRad, -315 * toRad, 0 * toRad);
|
|
break ;
|
|
case 23: //BOTTOM-FRONT-RIGHT
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3(-45 * toRad, -45 * toRad, 0 * toRad);
|
|
break ;
|
|
case 25: //BOTTOM-LEFT-BACK
|
|
Cvers = new THREE.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3(-45 * toRad, -225 * toRad, 0 * toRad);
|
|
break ;
|
|
case 24: //BOTTOM-BACK-RIGHT
|
|
Cvers = new THREE.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
|
|
Crot = new THREE.Vector3(-45 * toRad, -135 * toRad, 0 * toRad) ;
|
|
break ;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |