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

primo commit ( versione di prova ).

Browse Source
This commit is contained in:
Riccardo Elitropi
2024-03-26 13:20:40 +01:00
parent f749cb75b9
commit 8d1cbef568
4 changed files with 252 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TestArea_IIS01/THREEJS_DOORS/CubeRef/cubeControls.js → TestArea_IIS01/THREEJS_DOORS/StaticRef/cubeControls.js
+127 -111
View File
@@ -60,6 +60,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
for ( let { object } of intersects) {
if ( object.name) {
this._name_click = object.name ;
this._name = object.name ;
this._rotateTheCube( object.name) ;
break ;
}
@@ -177,34 +178,53 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
this._checkSideOver( x, y) ;
}
_checkSideOver(x, y) {
const raycaster = new THREE1.Raycaster() ;
raycaster.setFromCamera( { x, y }, this._camera) ;
const intersects = raycaster.intersectObjects( this._cube.children, true) ;
// check hover
// check hover
if ( intersects.length) {
for ( let { object } of intersects) {
if ( object.name) {
const prop = CUBE_FACES.find( prop => prop.name === object.name) ;
object.parent.children.forEach( function( child) {
if ( child.name === object.name) {
child.material.color.setHex(ACCENTCOLOR);
child.material.color.setHex( ACCENTCOLOR) ;
}
});
break;
}) ;
this.decolorCube( object.name) ;
break ;
}
}
if ( intersects[0].object.name != null){
if ( intersects[0].object.name != null) {
this._name = intersects[0].object.name ;
}
}
else {
else if ( ! this.name) {
this._name = null ;
this.decolorCube( null) ;
}
}
decolorCube( name) {
// main faces
for ( let i = 0 ; i < this._cube.children[0].children.length ; ++ i) {
if ( this._cube.children[0].children[i].name != name)
this._cube.children[0].children[i].material.color.set( this._cube.children[0].children[i].material.oldColor) ;
}
// edges and corners
for ( let i = 1 ; i < this._cube.children.length ; ++ i) {
const child = this._cube.children[i] ;
for ( let j = 0 ; j < child.children.length ; ++ j) {
const granChild = child.children[j] ;
for ( let k = 0 ; k < granChild.children.length ; ++ k) {
const myMesh = granChild.children[k] ;
if ( myMesh.name !== name)
myMesh.material.color.set( myMesh.material.oldColor) ;
}
}
}
}
update( orbitControls) {
this._animate() ;
@@ -216,27 +236,23 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
var invRotMat = new THREE1.Matrix4() ;
invRotMat.extractRotation( this._orbitControls.object.matrix) ;
invRotMat.invert() ;
const RotY_mat = new THREE1.Matrix4() ;
RotY_mat.makeRotationY( Math.PI / 2) ;
invRotMat.multiply( RotY_mat) ;
var euler = new THREE1.Euler() ;
euler.setFromRotationMatrix( invRotMat) ;
this._cube.rotation.set( euler.x, euler.y, euler.z) ;
this._cube.rotation.set( euler.x, euler.y , euler.z) ;
if( this._animation){
const now = Date.now() ;
const { duration, time } = this._animation;
const alpha = Math.min((( now - time) / duration), 1) ;
this._interp = alpha ;
if ( alpha == 1) {
this._animation = null ;
this._blockRot = false ;
if ( this._name_click == 1 || this._name_click == 6){
this._TopBottomRotation( this._name_click, this._orbitControls) ;
}
if ( this._animation) {
// for top and bottom faces
if ( this._name_click == 1 || this._name_click == 6) {
//this._TopBottomRotation( this._name_click, this._orbitControls) ;
}
this.dispatchEvent({
type: 'angle-change',
quaternion: this._cube.quaternion.clone(),
t: alpha
}) ;
this._animation = null ;
}
else {
this._interp = null ;
@@ -268,7 +284,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
somma += jump ;
orbit.rotateLeft( - jump) ;
}
if( theta_i < 0) {
if ( theta_i < 0) {
theta_t = theta_i - alpha * ( Math.PI / 2 + theta_i);
var jump = theta_t - theta_tt ;
orbit.rotateLeft( - jump) ;
@@ -329,7 +345,7 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
}
_animateCubeRotation({ base, delta }, alpha) {
const ease = (Math.sin(((alpha * 2) - 1) * Math.PI * 0.5) + 1) * 0.5 ;
const ease = ( Math.sin((( alpha * 2) - 1) * Math.PI * 0.5) + 1) * 0.5 ;
let angleX = -TWOPI + base.x + delta.x * ease ;
let angleY = -TWOPI + base.y + delta.y * ease ;
let angleZ = -TWOPI + base.z + delta.z * ease ;
@@ -514,111 +530,113 @@ export default class ViewCubeControls extends THREE1.EventDispatcher {
this._face_list.push( this._cube.children[5].children[3].children[1]) ;
}
_getVersorAndRotation() {
_setVersorAndRotation() {
switch ( this._name) {
case 2: //FRONT
this._vers = new THREE1.Vector3( 0, 0, 1) ;
this._rot = new THREE1.Vector3( 0 * toRad, 0 * toRad, 0 * toRad) ;
break ;
case 4: //BACK
this._vers = new THREE1.Vector3( 0, 0, -1) ;
this._rot = new THREE1.Vector3( 0 * toRad, 180 * toRad, 0 * toRad) ;
break ;
case 3: //RIGHT
case 2: // RIGHT
this._vers = new THREE1.Vector3( 1, 0, 0) ;
this._rot = new THREE1.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ;
this._rot = new THREE1.Vector3( 0 * toRad, 90 * toRad, 0 * toRad) ;
break ;
case 5: //LEFT
this._vers = new THREE1.Vector3( -1, 0, 0) ;
this._rot = new THREE1.Vector3( 0 * toRad, -270 * toRad, 0 * toRad) ;
case 4: // LEFT
this._vers = new THREE1.Vector3( -1, 0, 0) ;
this._rot = new THREE1.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ;
break ;
case 1: //TOP
case 3: // FRONT
this._vers = new THREE1.Vector3( 0, 0, -1) ;
this._rot = new THREE1.Vector3( 0 * toRad, 0 * toRad, 180 * toRad) ;
break ;
case 5: // BACK
this._vers = new THREE1.Vector3( 0, 0, 1) ;
this._rot = new THREE1.Vector3( 0 * toRad, 0 * toRad, 0 * toRad) ;
break ;
case 1: // TOP
this._vers = new THREE1.Vector3( 0, 1, 0) ;
this._rot = new THREE1.Vector3( 90 * toRad, 0 * toRad, 0 * toRad) ;
break ;
case 6: //BOTTOM
case 6: // BOTTOM
this._vers = new THREE1.Vector3( 0, -1, 0) ;
this._rot = new THREE1.Vector3( -90 * toRad, 0 * toRad, 0 * toRad) ;
break ;
case 11: //FRONT-RIGHT
case 11: // RIGHT-FRONT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 0, - 1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 0 * toRad, 45 * toRad, 0 * toRad) ;
break ;
case 7: // RIGHT-TOP
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 1 / Math.sqrt( 2), 0.) ;
this._rot = new THREE1.Vector3( 45 * toRad, 90 * toRad, 0 * toRad) ;
break ;
case 14: // BACK-RIGHT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 0 * toRad, -45 * toRad, 0 * toRad) ;
break ;
case 7: //FRONT-TOP
this._vers = new THREE1.Vector3( 0, 1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3(45 * toRad, 0 * toRad, 0 * toRad) ;
break ;
case 14: //FRONT-LEFT
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 2), 0, 1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 0 * toRad, -315 * toRad, 0 * toRad) ;
break ;
case 15: //FRONT-BOTTOM
this._vers = new THREE1.Vector3( 0, -1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3(-45 * toRad, 0 * toRad, 0 * toRad) ;
case 15: // BOTTOM-RIGHT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), -1 / Math.sqrt( 2), 0.) ;
this._rot = new THREE1.Vector3( 135 * toRad, - 135 * toRad, 0 * toRad) ;
break ;
case 12: //BACK-RIGHT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 0, -1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 0 * toRad, -135 * toRad, 0 * toRad) ;
case 12: // FRONT-LEFT
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 2), 0, -1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 0 * toRad, 135 * toRad, 0 * toRad) ;
break ;
case 9: //BACK-TOP
this._vers = new THREE1.Vector3( 0, 1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 45 * toRad, -180 * toRad, 0 * toRad) ;
break ;
case 13: //BACK-LEFT
this._vers = new THREE1.Vector3( -1 / Math.sqrt(2), 0, -1 / Math.sqrt(2)) ;
this._rot = new THREE1.Vector3(0 * toRad, -225 * toRad, 0 * toRad) ;
break ;
case 17: //BACK-BOTTOM
this._vers = new THREE1.Vector3( 0, -1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( -45 * toRad, -180 * toRad, 0 * toRad) ;
break ;
case 8: //RIGHT-TOP
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 2), 1 / Math.sqrt( 2), 0) ;
case 9: // LEFT-TOP
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 2), 1 / Math.sqrt( 2), 0) ;
this._rot = new THREE1.Vector3( 45 * toRad, -90 * toRad, 0 * toRad) ;
break ;
case 16: //RIGHT-BOTTOM
this._vers = new THREE1.Vector3( 1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ;
this._rot = new THREE1.Vector3( -45 * toRad, -90 * toRad, 0 * toRad) ;
case 13: // LEFT-BACK
this._vers = new THREE1.Vector3( -1 / Math.sqrt(2), 0, 1 / Math.sqrt(2)) ;
this._rot = new THREE1.Vector3(0 * toRad, -45 * toRad, 0 * toRad) ;
break ;
case 10: //LEFT-TOP
this._vers = new THREE1.Vector3( -1 / Math.sqrt(2), 1 / Math.sqrt(2), 0) ;
this._rot = new THREE1.Vector3( 45 * toRad, -270 * toRad, 0 * toRad) ;
case 17: // BOTTOM-LEFT
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 2), -1 / Math.sqrt( 2), 0) ;
this._rot = new THREE1.Vector3( -45 * toRad, 90 * toRad, 0 * toRad) ;
break ;
case 18: //LEFT-BOTTOM
this._vers = new THREE1.Vector3( -1 / Math.sqrt(2), -1 / Math.sqrt(2), 0) ;
this._rot = new THREE1.Vector3(-45 * toRad, 270 * toRad, 0 * toRad) ;
case 8: // FRONT-TOP
this._vers = new THREE1.Vector3( 0., 1 / Math.sqrt( 2), -1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 45 * toRad, 180 * toRad, 0 * toRad) ;
break ;
case 21: //TOP-LEFT-BACK
case 16: // BOTTOM-FRONT
this._vers = new THREE1.Vector3( 0., -1 / Math.sqrt( 2), -1 / Math.sqrt(2)) ;
this._rot = new THREE1.Vector3( 135 * toRad, 0 * toRad, 0 * toRad) ;
break ;
case 10: // TOP-BACK
this._vers = new THREE1.Vector3( 0, 1 / Math.sqrt( 2), 1 / Math.sqrt( 2)) ;
this._rot = new THREE1.Vector3( 45 * toRad, 0 * toRad, 0 * toRad) ;
break ;
case 18: // BOTTOM-BACK
this._vers = new THREE1.Vector3( 0., -1 / Math.sqrt(2), 1 / Math.sqrt(2), 0) ;
this._rot = new THREE1.Vector3( 135 * toRad, 180 * toRad, 0 * toRad) ;
break ;
case 21: // LEFT-BACK-TOP
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 45 * toRad, -45 * toRad, 0 * toRad) ;
break ;
case 20: // FRONT-LEFT-TOP
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 45 * toRad, -225 * toRad, 0 * toRad) ;
break ;
case 20: //TOP-BACK-RIGHT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 45 * toRad, -135 * toRad, 0 * toRad) ;
break ;
case 19: //TOP-RIGHT-FRONT
case 19: // RIGHT-FRONT-TOP
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 45 * toRad, 135 * toRad, 0 * toRad) ;
break ;
case 22: // BACK-RIGHT-TOP
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 45 * toRad, -45 * toRad, 0 * toRad) ;
this._rot = new THREE1.Vector3( 45 * toRad, 45 * toRad, 0 * toRad) ;
break ;
case 22: //TOP-FRONT-LEFT
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), 1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 45 * toRad, -315 * toRad, 0 * toRad) ;
case 26: // BOTTOM-BACK-RIGHT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 135 * toRad, 45 * toRad, 0 * toRad);
break ;
case 26: //BOTTOM-LEFT-FRONT
case 23: // BOTTOM-RIGHT-FRONT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3( 135 * toRad, 135 * toRad, 0 * toRad);
break ;
case 25: // BOTTOM-LEFT-BACK
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3(-45 * toRad, -315 * toRad, 0 * toRad);
this._rot = new THREE1.Vector3( 135 * toRad, -45 * toRad, 0 * toRad);
break ;
case 23: //BOTTOM-FRONT-RIGHT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), 1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3(-45 * toRad, -45 * toRad, 0 * toRad);
break ;
case 25: //BOTTOM-LEFT-BACK
case 24: // BOTTOM-FRONT-LEFT
this._vers = new THREE1.Vector3( -1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3(-45 * toRad, -225 * toRad, 0 * toRad);
break ;
case 24: //BOTTOM-BACK-RIGHT
this._vers = new THREE1.Vector3( 1 / Math.sqrt( 3), -1 / Math.sqrt( 3), -1 / Math.sqrt( 3)) ;
this._rot = new THREE1.Vector3(-45 * toRad, -135 * toRad, 0 * toRad) ;
this._rot = new THREE1.Vector3( 135 * toRad, - 135 * toRad, 0 * toRad) ;
break ;
}
}
@@ -762,14 +780,12 @@ function calculateAngleDelta( from, to, axis) {
const altA = direct - TWOPI ;
const altB = direct + TWOPI ;
if ( Math.abs( direct) > Math.abs( altA)) {
if ( Math.abs( direct) > Math.abs( altA))
return altA ;
}
else if ( Math.abs( direct) > Math.abs( altB)) {
else if ( Math.abs( direct) > Math.abs( altB))
return altB ;
}
// direzione sempre compresa tra [-PI, +PI]
// direction always between [-PI, +PI]
return direct ;
}
@@ -783,12 +799,12 @@ function createTextSprite( text, props) {
const canvas = document.createElement( 'canvas') ;
canvas.width = width ;
canvas.height = height ;
const context = canvas.getContext( '2d');
const context = canvas.getContext( '2d') ;
context.font = `bold ${fontsize}px ${fontface}` ;
context.fillStyle = `rgba(${bgColor})` ;
context.fillRect( 0, 0, width, height) ;
// get size data (height depends only on font size)
const metrics = context.measureText( text);
const metrics = context.measureText( text) ;
const textWidth = metrics.width ;
// text color
context.fillStyle = `rgba(${fgColor})`;
@@ -859,7 +875,7 @@ var BOX_FACES = [
name: FACES.BOTTOM,
map: createTextSprite( "BOTTOM", { fontSize: 40, font: "Arial Narrow, sans-serif" })
}
];
] ;
var CORNER_FACES = [
{ name: FACES.TOP_FRONT_RIGHT_CORNER },
{ name: FACES.TOP_BACK_RIGHT_CORNER },
@@ -869,7 +885,7 @@ var CORNER_FACES = [
{ name: FACES.BOTTOM_FRONT_RIGHT_CORNER },
{ name: FACES.BOTTOM_FRONT_LEFT_CORNER },
{ name: FACES.BOTTOM_BACK_LEFT_CORNER }
];
] ;
var EDGE_FACES = [
{ name: FACES.TOP_FRONT_EDGE },
{ name: FACES.TOP_RIGHT_EDGE },
@@ -880,12 +896,12 @@ var EDGE_FACES = [
{ name: FACES.BOTTOM_RIGHT_EDGE },
{ name: FACES.BOTTOM_FRONT_EDGE },
{ name: FACES.BOTTOM_LEFT_EDGE },
];
] ;
var EDGE_FACES_SIDE = [
{ name: FACES.FRONT_RIGHT_EDGE },
{ name: FACES.BACK_RIGHT_EDGE },
{ name: FACES.BACK_LEFT_EDGE },
{ name: FACES.FRONT_LEFT_EDGE }
];
] ;
// merge them all to ease the traversing
var CUBE_FACES = [...BOX_FACES, ...CORNER_FACES, ...EDGE_FACES, ...EDGE_FACES_SIDE] ;
TestArea_IIS01/THREEJS_DOORS/StaticRef/refControls.js
+58
View File
@@ -0,0 +1,58 @@
import * as THREE1 from "../Libs/node_modules/three/build/three.module.js";
export function getStaticRef( thick, length) {
// color definition
const RED = 0xd9534f ;
const GREEN = 0x5cb85c ;
const BLUE = 0x0275d8 ;
const BLACK = 0x000000 ;
// cylinder geometry
const axis_geometry = new THREE1.CylinderGeometry( thick, thick, length, 32) ;
const arrow_geometry = new THREE1.CylinderGeometry( 0., 2 * thick, length / 5, 32) ;
// materials
const x_material = new THREE1.MeshBasicMaterial({ color: RED}) ;
const y_material = new THREE1.MeshBasicMaterial({ color: GREEN}) ;
const z_material = new THREE1.MeshBasicMaterial({ color: BLUE}) ;
// line-meshes
const x_cylinder = new THREE1.Mesh( axis_geometry, x_material) ;
const y_cylinder = new THREE1.Mesh( axis_geometry, y_material) ;
const z_cylinder = new THREE1.Mesh( axis_geometry, z_material) ;
// arrow-meshes
const x_cylinder_arrow = new THREE1.Mesh( arrow_geometry, x_material ) ;
const y_cylinder_arrow = new THREE1.Mesh( arrow_geometry, y_material ) ;
const z_cylinder_arrow = new THREE1.Mesh( arrow_geometry, z_material ) ;
// rotation for axis and arrows
x_cylinder.rotateOnAxis( new THREE1.Vector3( 0., 0., 1.), - Math.PI / 2) ;
y_cylinder.rotateOnAxis( new THREE1.Vector3( 1., 0., 0.), Math.PI / 2) ;
x_cylinder_arrow.rotateOnAxis( new THREE1.Vector3( 0., 0., 1.), - Math.PI / 2) ;
y_cylinder_arrow.rotateOnAxis( new THREE1.Vector3( 1., 0., 0.), Math.PI / 2) ;
// translations
x_cylinder.translateY( length / 2) ;
y_cylinder.translateY( length / 2) ;
z_cylinder.translateY( length / 2) ;
x_cylinder_arrow.translateY( 1.1 * length) ;
y_cylinder_arrow.translateY( 1.1 * length) ;
z_cylinder_arrow.translateY( 1.1 * length) ;
// origin
const sphere_geometry = new THREE1.SphereGeometry( 1.5 * thick, 32, 32) ;
const sphere_material = new THREE1.MeshBasicMaterial( { color: BLACK}) ;
const sphere_origin = new THREE1.Mesh( sphere_geometry, sphere_material ) ;
// creating the group
const axisGroup = new THREE1.Group() ;
axisGroup.add( x_cylinder) ;
axisGroup.add( y_cylinder) ;
axisGroup.add( z_cylinder) ;
axisGroup.add( x_cylinder_arrow) ;
axisGroup.add( y_cylinder_arrow) ;
axisGroup.add( z_cylinder_arrow) ;
axisGroup.add( sphere_origin) ;
return axisGroup ;
}
export function updateRef( ref, controls) {
var invRotMat = new THREE1.Matrix4() ;
invRotMat.extractRotation( controls.object.matrix) ;
invRotMat.invert() ;
var euler = new THREE1.Euler().setFromRotationMatrix( invRotMat) ;
ref.rotation.set( euler.x, euler.y , euler.z) ;
}
TestArea_IIS01/THREEJS_DOORS/index.html
+56 -171
View File
@@ -29,7 +29,8 @@
Camera settings :
Zoom : Wheel-Scroll
Pan : Mouse-Left and Drag ( hold )
Rotate : Mouse-Right and Drag ( hold )
Rotate : Mouse-Right and Drag ( hold )
Center : Key-C
Type : Key-O ( orthographic )
Key-P ( perspective )
@@ -43,13 +44,15 @@
<div id = 'DoorRender'></div>
<div id = 'RefRender'></div>
<div id = 'Ref1Render'></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';
import ViewCubeControls from './StaticRef/cubeControls.js';
import { getStaticRef, updateRef } from './StaticRef/refControls.js' ;
// settings
const EPS_SMALL = 0.001 ;
@@ -66,8 +69,8 @@
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 = [] ;
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 ;
/* -----------------------------------*/
@@ -108,48 +111,18 @@
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) ;
renderer_ref1.render( scene_ref1, camera_ref1) ;
updateRef( frame_ref1, controls) ;
}
function readDoor() {
const loader = new Rhino3dmLoader() ;
loader.setLibraryPath( './Libs/node_modules/three/examples/jsm/libs/rhino3dm/' ) ;
loader.load( PATH + "/" + FILE_NAME, function( object) {
// passing into threejs frame
//object.rotateX( - Math.PI / 2) ;
// removing shading from colors and adjusting z-fighting with lines
for ( let i = 0 ; i < object.children.length ; ++ i)
setOpenGLRenderProperties( object.children[i]) ;
@@ -162,6 +135,8 @@
setGrid() ;
// setting frame
setFrame() ;
// static cube
setStaticCube() ;
// static frame
setStaticFrame() ;
// render loop
@@ -291,7 +266,7 @@
scene.add( frameGroup) ;
}
function setStaticFrame() {
function setStaticCube() {
// container of the cube
const divContainer = document.getElementById( 'RefRender') ;
// renderer
@@ -306,34 +281,50 @@
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) ;
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) ;
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() ;
}) ;
ComeFromRot = false ;
var Cvers = null ;
var Crot = null ;
const toRad = Math.PI / 180 ;
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) ;
// creatin 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) ;
}
@@ -343,22 +334,25 @@
document.addEventListener( "keypress", function( event) {
if ( event.key === "r")
ToggleRotation() ;
else if ( event.key === 'p') {
else if ( event.key === 'p' || event.key === 'P') {
if ( CAMERA_TYPE == CAMERA_PERSP)
return ;
controls.object = perspCamera.clone() ;
CAMERA_TYPE = CAMERA_PERSP ;
setCameraPosition() ;
}
else if ( event.key === 'o') {
else if ( event.key === 'o' || event.key === 'O') {
if ( CAMERA_TYPE == CAMERA_ORTHO)
return ;
controls.object = ortoCamera.clone() ;
CAMERA_TYPE = CAMERA_ORTHO ;
setCameraPosition() ;
setStaticFrame() ;
}
else if ( event.key === 'd')
else if ( event.key === 'd' || event.key === 'D')
window.alert( 'manca :(') ;
else if ( event.key === 'c' || event.key === 'C')
setCameraPosition() ;
});
// Elements
@@ -382,115 +376,6 @@
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>
TestArea_IIS01/THREEJS_DOORS/style.css
+11 -1
View File
@@ -46,7 +46,7 @@ canvas {
#infoDiv {
width: 100% ;
height: auto ;
height: auto ;
color: white ;
background-color: transparent ;
font-size: 0.9em ;
@@ -60,3 +60,13 @@ canvas {
right: 10px ;
border: 1px solid black ;
}
#Ref1Render {
position: fixed ;
width: 200px ;
height: 200px ;
bottom: 10px ;
left: 10px ;
background-color: transparent ;
border: 1px solid black ;
}