Update area src x npm
This commit is contained in:
Generated
Vendored
+2
-2
@@ -72,8 +72,8 @@ class webgl_original {
|
||||
async initcall({ modelPath, fName}) {
|
||||
PATH = modelPath;
|
||||
FILE_NAME = fName;
|
||||
console.log('path: ' + modelPath)
|
||||
console.log('name: ' + fName)
|
||||
// console.log('path: ' + modelPath)
|
||||
// console.log('name: ' + fName)
|
||||
|
||||
let startTime = performance.now();
|
||||
// reading .3dm file
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
email=ceo@steamware.net
|
||||
always-auth=true
|
||||
//nexus.steamware.net/repository/npm-hosted/:_authToken=NpmToken.9adde2db-ccdc-3a28-bd41-ff4f3d711993
|
||||
//nexus.steamware.net/repository/npm-group/:_authToken=NpmToken.63c81032-4adf-327f-b9b0-9ab32f867706
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
+913
@@ -0,0 +1,913 @@
|
||||
import * as THREE1 from "../three.module.js";
|
||||
|
||||
const MAINCOLOR = 0xDDDDDD ;
|
||||
const ACCENTCOLOR = 0xF7F7F7 ;
|
||||
const OUTLINECOLOR = 0xCCCCCC ;
|
||||
|
||||
export default class ViewCubeControls extends THREE1.EventDispatcher {
|
||||
constructor( camera, cubeSize, edgeSize, domElement, orbitControls) {
|
||||
super() ;
|
||||
this.cubeSize = cubeSize ;
|
||||
this.edgeSize = edgeSize ;
|
||||
this.domElement = domElement ;
|
||||
this._cube = new ViewCube({
|
||||
size: this.cubeSize,
|
||||
edge: this.edgeSize,
|
||||
outline: true,
|
||||
bgColor: MAINCOLOR,
|
||||
hoverColor: ACCENTCOLOR,
|
||||
outlineColor: OUTLINECOLOR
|
||||
}) ;
|
||||
this._blockRot = false ;
|
||||
this._TopBottom = false ;
|
||||
this._camera = camera ;
|
||||
this._orbitControls = orbitControls ;
|
||||
this._dir = null ;
|
||||
this._lastSelFace = null ;
|
||||
this._currSelFace = null ;
|
||||
this._color = null ;
|
||||
this._name = null ;
|
||||
this._name_click = null ;
|
||||
this._interp = null ;
|
||||
this._animation = null ;
|
||||
this._faceList = [] ;
|
||||
this._red = 0xd9534f ;
|
||||
this._green = 0x5cb85c ;
|
||||
this._blue = 0x0275d8 ;
|
||||
this._vers = null ;
|
||||
this._rot = null ;
|
||||
this._last_event_target_x = null ;
|
||||
this._last_event_target_y = null ;
|
||||
this._handleMouseMove = this._handleMouseMove.bind( this) ;
|
||||
this._handleMouseClick = this._handleMouseClick.bind( this) ;
|
||||
this._listen() ;
|
||||
}
|
||||
|
||||
_listen() {
|
||||
this.domElement.addEventListener( 'mousemove', this._handleMouseMove) ;
|
||||
this.domElement.addEventListener( 'click', this._handleMouseClick) ;
|
||||
}
|
||||
|
||||
_handleMouseClick( event) {
|
||||
const x = ( event.offsetX / event.target.clientWidth) * 2 - 1 ;
|
||||
const y = -( event.offsetY / event.target.clientHeight) * 2 + 1 ;
|
||||
this._checkSideTouch( x, y) ;
|
||||
}
|
||||
|
||||
_checkSideTouch( x, y) {
|
||||
const raycaster = new THREE1.Raycaster() ;
|
||||
raycaster.setFromCamera( { x, y }, this._camera) ;
|
||||
const intersects = raycaster.intersectObjects( this._cube.children, true) ;
|
||||
if ( intersects.length) {
|
||||
for ( let { object } of intersects) {
|
||||
if ( object.name) {
|
||||
this._name_click = object.name ;
|
||||
this._name = object.name ;
|
||||
this._rotateTheCube( object.name) ;
|
||||
break ;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_rotateTheCube( side) {
|
||||
switch ( side) {
|
||||
case FACES.FRONT:
|
||||
this._setCubeAngles( 0, 0, 0) ;
|
||||
break ;
|
||||
case FACES.RIGHT:
|
||||
this._setCubeAngles( 0, -90, 0) ;
|
||||
break ;
|
||||
case FACES.BACK:
|
||||
this._setCubeAngles( 0, -180, 0) ;
|
||||
break ;
|
||||
case FACES.LEFT:
|
||||
this._setCubeAngles( 0, -270, 0) ;
|
||||
break ;
|
||||
case FACES.TOP:
|
||||
this._setCubeAngles( 90, 0, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM:
|
||||
this._setCubeAngles( -90, 0, 0) ;
|
||||
break ;
|
||||
case FACES.TOP_FRONT_EDGE:
|
||||
this._setCubeAngles( 45, 0, 0) ;
|
||||
break ;
|
||||
case FACES.TOP_RIGHT_EDGE:
|
||||
this._setCubeAngles( 45, -90, 0) ;
|
||||
break ;
|
||||
case FACES.TOP_BACK_EDGE:
|
||||
this._setCubeAngles( 45, -180, 0) ;
|
||||
break ;
|
||||
case FACES.TOP_LEFT_EDGE:
|
||||
this._setCubeAngles( 45, -270, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM_FRONT_EDGE:
|
||||
this._setCubeAngles( -45, 0, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM_RIGHT_EDGE:
|
||||
this._setCubeAngles( -45, -90, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM_BACK_EDGE:
|
||||
this._setCubeAngles( -45, -180, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM_LEFT_EDGE:
|
||||
this._setCubeAngles( -45, -270, 0) ;
|
||||
break ;
|
||||
case FACES.FRONT_RIGHT_EDGE:
|
||||
this._setCubeAngles( 0, -45, 0) ;
|
||||
break ;
|
||||
case FACES.BACK_RIGHT_EDGE:
|
||||
this._setCubeAngles( 0, -135, 0) ;
|
||||
break ;
|
||||
case FACES.BACK_LEFT_EDGE:
|
||||
this._setCubeAngles( 0, -225, 0) ;
|
||||
break ;
|
||||
case FACES.FRONT_LEFT_EDGE:
|
||||
this._setCubeAngles( 0, -315, 0) ;
|
||||
break ;
|
||||
case FACES.TOP_FRONT_RIGHT_CORNER:
|
||||
this._setCubeAngles( 45, -45, 0) ;
|
||||
break ;
|
||||
case FACES.TOP_BACK_RIGHT_CORNER:
|
||||
this._setCubeAngles(45, -135, 0);
|
||||
break;
|
||||
case FACES.TOP_BACK_LEFT_CORNER:
|
||||
this._setCubeAngles( 45, -225, 0) ;
|
||||
break ;
|
||||
case FACES.TOP_FRONT_LEFT_CORNER:
|
||||
this._setCubeAngles( 45, -315, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM_FRONT_RIGHT_CORNER:
|
||||
this._setCubeAngles(-45, -45, 0);
|
||||
break ;
|
||||
case FACES.BOTTOM_BACK_RIGHT_CORNER:
|
||||
this._setCubeAngles( -45, -135, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM_BACK_LEFT_CORNER:
|
||||
this._setCubeAngles( -45, -225, 0) ;
|
||||
break ;
|
||||
case FACES.BOTTOM_FRONT_LEFT_CORNER:
|
||||
this._setCubeAngles( -45, -315, 0) ;
|
||||
break ;
|
||||
default:
|
||||
break ;
|
||||
}
|
||||
}
|
||||
|
||||
_setCubeAngles( x, y, z) {
|
||||
const base = this._cube.rotation ;
|
||||
this._blockRot = true ;
|
||||
this._animation = {
|
||||
base: {
|
||||
x: base.x,
|
||||
y: base.y,
|
||||
z: base.z
|
||||
},
|
||||
delta: {
|
||||
x: calculateAngleDelta( base.x, x * toRad, 'x'),
|
||||
y: calculateAngleDelta( base.y, y * toRad, 'y'),
|
||||
z: calculateAngleDelta( base.z, z * toRad, 'z')
|
||||
},
|
||||
duration: 500,
|
||||
time: Date.now()
|
||||
} ;
|
||||
}
|
||||
|
||||
_handleMouseMove( event) {
|
||||
const x = ( event.offsetX / event.target.clientWidth) * 2 - 1 ;
|
||||
const y = -( event.offsetY / event.target.clientHeight) * 2 + 1 ;
|
||||
this._last_event_target_x = x ;
|
||||
this._last_event_target_y = y ;
|
||||
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
|
||||
if ( intersects.length) {
|
||||
for ( let { object } of intersects) {
|
||||
if ( object.name) {
|
||||
object.parent.children.forEach( function( child) {
|
||||
if ( child.name === object.name) {
|
||||
child.material.color.setHex( ACCENTCOLOR) ;
|
||||
}
|
||||
}) ;
|
||||
this.decolorCube( object.name) ;
|
||||
break ;
|
||||
}
|
||||
}
|
||||
if ( intersects[0].object.name != null) {
|
||||
this._name = intersects[0].object.name ;
|
||||
}
|
||||
}
|
||||
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() ;
|
||||
this._orbitControls = orbitControls ;
|
||||
}
|
||||
|
||||
_animate() {
|
||||
this._orbitControls.object.updateMatrix() ;
|
||||
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().setFromRotationMatrix( invRotMat) ;
|
||||
this._cube.rotation.set( euler.x, euler.y , euler.z) ;
|
||||
|
||||
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(),
|
||||
}) ;
|
||||
this._animation = null ;
|
||||
}
|
||||
else {
|
||||
this._interp = null ;
|
||||
}
|
||||
if ( this._last_event_target_x != null && this._last_event_target_y != null)
|
||||
this._checkSideOver( this._last_event_target_x, this._last_event_target_y) ;
|
||||
|
||||
}
|
||||
|
||||
_TopBottomRotation( type, orbit){
|
||||
const duration = 150 ;
|
||||
const start = performance.now() ;
|
||||
const maxAlpha = 1 ;
|
||||
|
||||
var theta_i = orbit.object.rotation.z ;
|
||||
var theta_tn = 0 ;
|
||||
var theta_to = 0 ;
|
||||
var theta_t = theta_i ;
|
||||
var theta_tt = theta_i ;
|
||||
var somma = 0 ;
|
||||
|
||||
function loop() {
|
||||
const now = performance.now() ;
|
||||
const delta = now - start ;
|
||||
const alpha = Math.min( delta / duration, maxAlpha);
|
||||
if ( type == 1){
|
||||
if ( theta_i >= -Math.PI / 2 && theta_i <= Math.PI / 2){
|
||||
theta_tt = theta_t ;
|
||||
if ( theta_i >= 0){
|
||||
theta_t = theta_i - alpha * ( Math.PI / 2 + theta_i) ;
|
||||
var jump = theta_t - theta_tt ;
|
||||
somma += jump ;
|
||||
orbit.rotateLeft( - jump) ;
|
||||
}
|
||||
if ( theta_i < 0) {
|
||||
theta_t = theta_i - alpha * ( Math.PI / 2 + theta_i);
|
||||
var jump = theta_t - theta_tt ;
|
||||
orbit.rotateLeft( - jump) ;
|
||||
}
|
||||
}
|
||||
else {
|
||||
theta_tt = theta_t ;
|
||||
if ( theta_i >= 0){
|
||||
theta_t = theta_i + alpha * ( Math.PI/2 + Math.PI - theta_i) ;
|
||||
var jump = theta_t - theta_tt ;
|
||||
orbit.rotateLeft( - jump) ;
|
||||
}
|
||||
if ( theta_i < 0){
|
||||
theta_t = theta_i + alpha * (- theta_i - Math.PI / 2) ;
|
||||
var jump = theta_t - theta_tt ;
|
||||
orbit.rotateLeft( - jump) ;
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( type == 6){
|
||||
if( theta_i >= -Math.PI/2 && theta_i <= Math.PI / 2){
|
||||
theta_tt = theta_t ;
|
||||
if ( theta_i >= 0){
|
||||
theta_t = theta_i + alpha * ( Math.PI / 2 - theta_i) ;
|
||||
var jump = theta_t - theta_tt ;
|
||||
orbit.rotateLeft( jump) ;
|
||||
}
|
||||
if( theta_i < 0){
|
||||
theta_t = theta_i + alpha * ( Math.PI / 2 - theta_i) ;
|
||||
var jump = theta_t - theta_tt ;
|
||||
orbit.rotateLeft( jump) ;
|
||||
}
|
||||
}
|
||||
else {
|
||||
theta_tt = theta_t ;
|
||||
if ( theta_i >= 0){
|
||||
theta_t = theta_i - alpha * ( theta_i - Math.PI / 2) ;
|
||||
var jump = theta_t - theta_tt ;
|
||||
orbit.rotateLeft(jump);
|
||||
}
|
||||
if (theta_i < 0){
|
||||
theta_t = theta_i + alpha * ( Math.PI + Math.PI / 2 + theta_i);
|
||||
var jump = theta_t - theta_tt ;
|
||||
orbit.rotateLeft( - jump) ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
orbit.update() ;
|
||||
if ( alpha !== maxAlpha){
|
||||
return requestAnimationFrame( loop) ;
|
||||
}
|
||||
}
|
||||
|
||||
loop() ;
|
||||
|
||||
}
|
||||
|
||||
_animateCubeRotation({ base, delta }, alpha) {
|
||||
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 ;
|
||||
this._cube.rotation.set( angleX % TWOPI, angleY % TWOPI, angleZ % TWOPI) ;
|
||||
}
|
||||
|
||||
_colorCube() {
|
||||
// defining standard color ( tone mapping Toy )
|
||||
var blue = this._blue ;
|
||||
var red = this._red ;
|
||||
var green = this._green ;
|
||||
|
||||
// main faces
|
||||
this._cube.children[0].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[0].children[1].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[0].children[2].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[0].children[3].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[0].children[4].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[0].children[5].material.color = new THREE1.Color( blue) ;
|
||||
|
||||
// other faces
|
||||
this._cube.children[1].children[0].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[0].children[1].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[1].children[0].children[2].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[1].children[1].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[1].children[1].children[1].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[1].children[2].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[1].children[2].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[2].children[1].material.color = new THREE1.Color( green);
|
||||
this._cube.children[1].children[2].children[2].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[1].children[3].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[1].children[3].children[1].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[3].children[2].material.color = new THREE1.Color (blue) ;
|
||||
this._cube.children[2].children[0].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[2].children[0].children[1].material.color = new THREE1.Color( green);
|
||||
this._cube.children[2].children[0].children[2].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[2].children[1].children[0].material.color = new THREE1.Color( green);
|
||||
this._cube.children[2].children[1].children[1].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[2].children[1].children[2].material.color = new THREE1.Color( blue);
|
||||
this._cube.children[2].children[2].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[2].children[2].children[1].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[2].children[2].children[2].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[2].children[3].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[2].children[3].children[1].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[2].children[3].children[2].material.color = new THREE1.Color( blue);
|
||||
this._cube.children[3].children[0].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[3].children[0].children[1].material.color = new THREE1.Color( blue);
|
||||
this._cube.children[3].children[1].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[3].children[1].children[1].material.color = new THREE1.Color( blue);
|
||||
this._cube.children[3].children[2].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[3].children[2].children[1].material.color = new THREE1.Color( blue);
|
||||
this._cube.children[3].children[3].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[3].children[3].children[1].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[4].children[0].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[4].children[0].children[1].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[4].children[1].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[4].children[1].children[1].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[4].children[2].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[4].children[2].children[1].material.color = new THREE1.Color( blue);
|
||||
this._cube.children[4].children[3].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[4].children[3].children[1].material.color = new THREE1.Color( blue) ;
|
||||
this._cube.children[5].children[0].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[5].children[0].children[1].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[5].children[1].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[5].children[1].children[1].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[5].children[2].children[0].material.color = new THREE1.Color( red) ;
|
||||
this._cube.children[5].children[2].children[1].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[5].children[3].children[0].material.color = new THREE1.Color( green) ;
|
||||
this._cube.children[5].children[3].children[1].material.color = new THREE1.Color( red) ;
|
||||
|
||||
// setting second Color for raytracaing effect
|
||||
this._cube.children[0].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[0].children[1].material.oldColor = new THREE1.Color( green);
|
||||
this._cube.children[0].children[2].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[0].children[3].material.oldColor = new THREE1.Color( green);
|
||||
this._cube.children[0].children[4].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[0].children[5].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[1].children[0].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[0].children[1].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[1].children[0].children[2].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[1].children[1].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[1].children[1].children[1].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[1].children[2].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[1].children[2].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[2].children[1].material.oldColor = new THREE1.Color( green);
|
||||
this._cube.children[1].children[2].children[2].material.oldColor = new THREE1.Color( blue);
|
||||
this._cube.children[1].children[3].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[1].children[3].children[1].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[1].children[3].children[2].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[2].children[0].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[2].children[0].children[1].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[2].children[0].children[2].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[2].children[1].children[0].material.oldColor = new THREE1.Color( green);
|
||||
this._cube.children[2].children[1].children[1].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[2].children[1].children[2].material.oldColor = new THREE1.Color( blue);
|
||||
this._cube.children[2].children[2].children[0].material.oldColor = new THREE1.Color( red);
|
||||
this._cube.children[2].children[2].children[1].material.oldColor = new THREE1.Color( green);
|
||||
this._cube.children[2].children[2].children[2].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[2].children[3].children[0].material.oldColor = new THREE1.Color( green);
|
||||
this._cube.children[2].children[3].children[1].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[2].children[3].children[2].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[3].children[0].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[3].children[0].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[3].children[1].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[3].children[1].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[3].children[2].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[3].children[2].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[3].children[3].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[3].children[3].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[4].children[0].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[4].children[0].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[4].children[1].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[4].children[1].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[4].children[2].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[4].children[2].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[4].children[3].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[4].children[3].children[1].material.oldColor = new THREE1.Color( blue) ;
|
||||
this._cube.children[5].children[0].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[5].children[0].children[1].material.oldColor = new THREE1.Color(green) ;
|
||||
this._cube.children[5].children[1].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[5].children[1].children[1].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[5].children[2].children[0].material.oldColor = new THREE1.Color( red) ;
|
||||
this._cube.children[5].children[2].children[1].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[5].children[3].children[0].material.oldColor = new THREE1.Color( green) ;
|
||||
this._cube.children[5].children[3].children[1].material.oldColor = new THREE1.Color( red) ;
|
||||
|
||||
// adding faces to list
|
||||
this._face_list = [] ;
|
||||
this._face_list.push( this._cube.children[0].children[0]) ;
|
||||
this._face_list.push( this._cube.children[0].children[1]) ;
|
||||
this._face_list.push( this._cube.children[0].children[2]) ;
|
||||
this._face_list.push( this._cube.children[0].children[3]) ;
|
||||
this._face_list.push( this._cube.children[0].children[4]) ;
|
||||
this._face_list.push( this._cube.children[0].children[5]) ;
|
||||
this._face_list.push( this._cube.children[1].children[0].children[0]) ;
|
||||
this._face_list.push( this._cube.children[1].children[0].children[1]) ;
|
||||
this._face_list.push( this._cube.children[1].children[0].children[2]) ;
|
||||
this._face_list.push( this._cube.children[1].children[1].children[0]) ;
|
||||
this._face_list.push( this._cube.children[1].children[1].children[1]) ;
|
||||
this._face_list.push( this._cube.children[1].children[1].children[2]) ;
|
||||
this._face_list.push( this._cube.children[1].children[2].children[0]) ;
|
||||
this._face_list.push( this._cube.children[1].children[2].children[1]) ;
|
||||
this._face_list.push( this._cube.children[1].children[2].children[2]) ;
|
||||
this._face_list.push( this._cube.children[1].children[3].children[0]) ;
|
||||
this._face_list.push( this._cube.children[1].children[3].children[1]) ;
|
||||
this._face_list.push( this._cube.children[1].children[3].children[2]) ;
|
||||
this._face_list.push( this._cube.children[2].children[0].children[0]) ;
|
||||
this._face_list.push( this._cube.children[2].children[0].children[1]) ;
|
||||
this._face_list.push( this._cube.children[2].children[0].children[2]) ;
|
||||
this._face_list.push( this._cube.children[2].children[1].children[0]) ;
|
||||
this._face_list.push( this._cube.children[2].children[1].children[1]) ;
|
||||
this._face_list.push( this._cube.children[2].children[1].children[2]) ;
|
||||
this._face_list.push( this._cube.children[2].children[2].children[0]) ;
|
||||
this._face_list.push( this._cube.children[2].children[2].children[1]) ;
|
||||
this._face_list.push( this._cube.children[2].children[2].children[2]) ;
|
||||
this._face_list.push( this._cube.children[2].children[3].children[0]) ;
|
||||
this._face_list.push( this._cube.children[2].children[3].children[1]) ;
|
||||
this._face_list.push( this._cube.children[2].children[3].children[2]) ;
|
||||
this._face_list.push( this._cube.children[3].children[0].children[0]) ;
|
||||
this._face_list.push( this._cube.children[3].children[0].children[1]) ;
|
||||
this._face_list.push( this._cube.children[3].children[1].children[0]) ;
|
||||
this._face_list.push( this._cube.children[3].children[1].children[1]) ;
|
||||
this._face_list.push( this._cube.children[3].children[2].children[0]) ;
|
||||
this._face_list.push( this._cube.children[3].children[2].children[1]) ;
|
||||
this._face_list.push( this._cube.children[3].children[3].children[0]) ;
|
||||
this._face_list.push( this._cube.children[3].children[3].children[1]) ;
|
||||
this._face_list.push( this._cube.children[4].children[0].children[0]) ;
|
||||
this._face_list.push( this._cube.children[4].children[0].children[1]) ;
|
||||
this._face_list.push( this._cube.children[4].children[1].children[0]) ;
|
||||
this._face_list.push( this._cube.children[4].children[1].children[1]) ;
|
||||
this._face_list.push( this._cube.children[4].children[2].children[0]) ;
|
||||
this._face_list.push( this._cube.children[4].children[2].children[1]) ;
|
||||
this._face_list.push( this._cube.children[4].children[3].children[0]) ;
|
||||
this._face_list.push( this._cube.children[4].children[3].children[1]) ;
|
||||
this._face_list.push( this._cube.children[5].children[0].children[0]) ;
|
||||
this._face_list.push( this._cube.children[5].children[0].children[1]) ;
|
||||
this._face_list.push( this._cube.children[5].children[1].children[0]) ;
|
||||
this._face_list.push( this._cube.children[5].children[1].children[1]) ;
|
||||
this._face_list.push( this._cube.children[5].children[2].children[0]) ;
|
||||
this._face_list.push( this._cube.children[5].children[2].children[1]) ;
|
||||
this._face_list.push( this._cube.children[5].children[3].children[0]) ;
|
||||
this._face_list.push( this._cube.children[5].children[3].children[1]) ;
|
||||
}
|
||||
|
||||
_setVersorAndRotation() {
|
||||
switch ( this._name) {
|
||||
case 2: // RIGHT
|
||||
this._vers = new THREE1.Vector3( 1, 0, 0) ;
|
||||
this._rot = new THREE1.Vector3( 0 * toRad, 90 * toRad, 0 * toRad) ;
|
||||
break ;
|
||||
case 4: // LEFT
|
||||
this._vers = new THREE1.Vector3( -1, 0, 0) ;
|
||||
this._rot = new THREE1.Vector3( 0 * toRad, -90 * toRad, 0 * toRad) ;
|
||||
break ;
|
||||
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
|
||||
this._vers = new THREE1.Vector3( 0, -1, 0) ;
|
||||
this._rot = new THREE1.Vector3( -90 * toRad, 0 * toRad, 0 * toRad) ;
|
||||
break ;
|
||||
|
||||
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, -315 * toRad, 0 * toRad) ;
|
||||
break ;
|
||||
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: // 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: // 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 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 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 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 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, -135 * toRad, 0 * toRad) ;
|
||||
break ;
|
||||
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) ;
|
||||
break ;
|
||||
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 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( 135 * toRad, -45 * toRad, 0 * toRad);
|
||||
break ;
|
||||
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( 135 * toRad, - 135 * toRad, 0 * toRad) ;
|
||||
break ;
|
||||
}
|
||||
}
|
||||
|
||||
setQuaternion( quaternion) {
|
||||
this._cube.setRotationFromQuaternion( quaternion) ;
|
||||
}
|
||||
|
||||
getObject() {
|
||||
return this._cube ;
|
||||
}
|
||||
}
|
||||
|
||||
class ViewCube extends THREE1.Object3D {
|
||||
constructor({
|
||||
size = 60,
|
||||
edge = 5,
|
||||
outline = true,
|
||||
bgColor = 0xCCCCCC,
|
||||
hoverColor = 0xFFFFFF,
|
||||
outlineColor = 0x999999
|
||||
}) {
|
||||
super() ;
|
||||
this._cubeSize = size ;
|
||||
this._edgeSize = edge ;
|
||||
this._outline = outline ;
|
||||
this._bgColor = bgColor ;
|
||||
this._hoverColor = hoverColor ;
|
||||
this._outlineColor = outlineColor ;
|
||||
this._build() ;
|
||||
}
|
||||
_build() {
|
||||
const faceSize = this._cubeSize - this._edgeSize * 2 ;
|
||||
const faceOffset = this._cubeSize / 2 ;
|
||||
const borderSize = this._edgeSize ;
|
||||
|
||||
/* faces: front, right, back, left, top, bottom */
|
||||
const cubeFaces = this._createCubeFaces( faceSize, faceOffset);
|
||||
|
||||
for ( let [i, props] of BOX_FACES.entries()) {
|
||||
cubeFaces.children[i].name = props.name ;
|
||||
cubeFaces.children[i].material.color.setHex( this._bgColor) ;
|
||||
cubeFaces.children[i].material.map = props.map ;
|
||||
}
|
||||
this.add( cubeFaces) ;
|
||||
|
||||
/* corners: top, bottom */
|
||||
const corners = [] ;
|
||||
for ( let [i, props] of CORNER_FACES.entries()) {
|
||||
const corner = this._createCornerFaces( borderSize, faceOffset, props.name, { color: this._bgColor}) ;
|
||||
corner.rotateOnAxis( new THREE1.Vector3( 0, 1, 0), ( i % 4) * 90 * toRad) ;
|
||||
corners.push( corner) ;
|
||||
}
|
||||
const topCorners = new THREE1.Group() ;
|
||||
const bottomCorners = new THREE1.Group() ;
|
||||
this.add( topCorners.add( ...corners.slice(0, 4))) ;
|
||||
this.add( bottomCorners.add( ...corners.slice(4)).rotateOnAxis( new THREE1.Vector3( 1, 0, 0), 180 * toRad)) ;
|
||||
|
||||
/* edges: top + bottom */
|
||||
const edges = [] ;
|
||||
for ( let [i, props] of EDGE_FACES.entries()) {
|
||||
const edge = this._createHorzEdgeFaces( faceSize, borderSize, faceOffset, props.name, { color: this._bgColor}) ;
|
||||
edge.rotateOnAxis( new THREE1.Vector3(0, 1, 0), (i % 4) * 90 * toRad) ;
|
||||
edges.push( edge) ;
|
||||
}
|
||||
const topEdges = new THREE1.Group() ;
|
||||
const bottomEdges = new THREE1.Group() ;
|
||||
this.add( topEdges.add( ...edges.slice(0, 4))) ;
|
||||
this.add( bottomEdges.add( ...edges.slice(4)).rotateOnAxis( new THREE1.Vector3(1, 0, 0), 180 * toRad)) ;
|
||||
|
||||
/* edges on the side */
|
||||
const sideEdges = new THREE1.Group() ;
|
||||
for ( let [i, props] of EDGE_FACES_SIDE.entries()) {
|
||||
const edge = this._createVertEdgeFaces( borderSize, faceSize, faceOffset, props.name, { color: this._bgColor}) ;
|
||||
edge.rotateOnAxis( new THREE1.Vector3( 0, 1, 0), i * 90 * toRad) ;
|
||||
sideEdges.add( edge) ;
|
||||
}
|
||||
this.add( sideEdges) ;
|
||||
|
||||
if ( this._outline) {
|
||||
this.add( this._createCubeOutline( this._cubeSize)) ;
|
||||
}
|
||||
}
|
||||
_createFace( size, position, { axis = [0, 1, 0], angle = 0, name = "", matProps = {} } = {}) {
|
||||
if ( ! Array.isArray( size)) size = [size, size] ;
|
||||
const material = new THREE1.MeshBasicMaterial( matProps) ;
|
||||
const geometry = new THREE1.PlaneGeometry( size[0], size[1]) ;
|
||||
const face = new THREE1.Mesh( geometry, material) ;
|
||||
face.name = name ;
|
||||
face.rotateOnAxis( new THREE1.Vector3( ...axis), angle * toRad) ;
|
||||
face.position.set( ...position);
|
||||
return face ;
|
||||
}
|
||||
_createCubeFaces( faceSize, offset) {
|
||||
const faces = new THREE1.Object3D() ;
|
||||
faces.add( this._createFace( faceSize, [0, 0, offset], { axis: [0, 1, 0], angle: 0 }));
|
||||
faces.add( this._createFace( faceSize, [offset, 0, 0], { axis: [0, 1, 0], angle: 90 }));
|
||||
faces.add( this._createFace( faceSize, [0, 0, -offset], { axis: [0, 1, 0], angle: 180 }));
|
||||
faces.add( this._createFace( faceSize, [-offset, 0, 0], { axis: [0, 1, 0], angle: 270 }));
|
||||
faces.add(( this._createFace( faceSize, [0, offset, 0], { axis: [1, 0, 0], angle: -90 })).rotateOnAxis( new THREE1.Vector3(0,0,1), -Math.PI / 2)) ;
|
||||
faces.add( this._createFace( faceSize, [0, -offset, 0], { axis: [1, 0, 0], angle: 90 }).rotateOnAxis( new THREE1.Vector3(0,0,1), Math.PI / 2)) ;
|
||||
return faces;
|
||||
}
|
||||
_createCornerFaces( faceSize, offset, name = "", matProps = {}) {
|
||||
const corner = new THREE1.Object3D() ;
|
||||
const borderOffset = offset - faceSize / 2 ;
|
||||
corner.add(this._createFace( faceSize, [borderOffset, borderOffset, offset], { axis: [0, 1, 0], angle: 0, matProps, name })) ;
|
||||
corner.add( this._createFace( faceSize, [offset, borderOffset, borderOffset], { axis: [0, 1, 0], angle: 90, matProps, name })) ;
|
||||
corner.add( this._createFace( faceSize, [borderOffset, offset, borderOffset], { axis: [1, 0, 0], angle: -90, matProps, name })) ;
|
||||
return corner ;
|
||||
}
|
||||
_createHorzEdgeFaces( w, h, offset, name = "", matProps = {}) {
|
||||
const edge = new THREE1.Object3D() ;
|
||||
const borderOffset = offset - h / 2 ;
|
||||
edge.add( this._createFace( [w, h], [0, borderOffset, offset], { axis: [0, 1, 0], angle: 0, name, matProps })) ;
|
||||
edge.add( this._createFace( [w, h], [0, offset, borderOffset], { axis: [1, 0, 0], angle: -90, name, matProps })) ;
|
||||
return edge ;
|
||||
}
|
||||
_createVertEdgeFaces( w, h, offset, name = "", matProps = {}) {
|
||||
const edge = new THREE1.Object3D() ;
|
||||
const borderOffset = offset - w / 2 ;
|
||||
edge.add( this._createFace([w, h], [borderOffset, 0, offset], { axis: [0, 1, 0], angle: 0, name, matProps })) ;
|
||||
edge.add( this._createFace([w, h], [offset, 0, borderOffset], { axis: [0, 1, 0], angle: 90, name, matProps })) ;
|
||||
return edge;
|
||||
}
|
||||
_createCubeOutline( size) {
|
||||
const geometry = new THREE1.BoxGeometry( size, size, size) ;
|
||||
const geo = new THREE1.EdgesGeometry( geometry);
|
||||
const mat = new THREE1.LineBasicMaterial({ color: this._outlineColor, linewidth: 1 }) ;
|
||||
const wireframe = new THREE1.LineSegments( geo, mat) ;
|
||||
return wireframe ;
|
||||
}
|
||||
}
|
||||
|
||||
var toRad = Math.PI / 180 ;
|
||||
var TWOPI = 2 * Math.PI ;
|
||||
|
||||
function calculateAngleDelta( from, to, axis) {
|
||||
|
||||
const direct = to - from ;
|
||||
const altA = direct - TWOPI ;
|
||||
const altB = direct + TWOPI ;
|
||||
|
||||
if ( Math.abs( direct) > Math.abs( altA))
|
||||
return altA ;
|
||||
else if ( Math.abs( direct) > Math.abs( altB))
|
||||
return altB ;
|
||||
|
||||
// direction always between [-PI, +PI]
|
||||
return direct ;
|
||||
}
|
||||
|
||||
function createTextSprite( text, props) {
|
||||
const fontface = props.font || 'Helvetica' ;
|
||||
const fontsize = props.fontSize || 30 ;
|
||||
const width = props.width || 200 ;
|
||||
const height = props.height || 200 ;
|
||||
const bgColor = props.color ? props.bgColor.join(', ') : "255, 255, 255, 1.0" ;
|
||||
const fgColor = props.color ? props.color.join(', ') : "0, 0, 0, 1.0" ;
|
||||
const canvas = document.createElement( 'canvas') ;
|
||||
canvas.width = width ;
|
||||
canvas.height = height ;
|
||||
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 textWidth = metrics.width ;
|
||||
// text color
|
||||
context.fillStyle = `rgba(${fgColor})`;
|
||||
context.fillText( text, width / 2 - textWidth / 2, height / 2 + fontsize / 2 - 2) ;
|
||||
// canvas contents will be used for a texture
|
||||
const texture = new THREE1.Texture( canvas)
|
||||
texture.minFilter = THREE1.LinearFilter ;
|
||||
texture.needsUpdate = true ;
|
||||
return texture ;
|
||||
}
|
||||
|
||||
var FACES = {
|
||||
TOP: 1,
|
||||
FRONT: 2,
|
||||
RIGHT: 3,
|
||||
BACK: 4,
|
||||
LEFT: 5,
|
||||
BOTTOM: 6,
|
||||
|
||||
TOP_FRONT_EDGE: 7,
|
||||
TOP_RIGHT_EDGE: 8,
|
||||
TOP_BACK_EDGE: 9,
|
||||
TOP_LEFT_EDGE: 10,
|
||||
|
||||
FRONT_RIGHT_EDGE: 11,
|
||||
BACK_RIGHT_EDGE: 12,
|
||||
BACK_LEFT_EDGE: 13,
|
||||
FRONT_LEFT_EDGE: 14,
|
||||
|
||||
BOTTOM_FRONT_EDGE: 15,
|
||||
BOTTOM_RIGHT_EDGE: 16,
|
||||
BOTTOM_BACK_EDGE: 17,
|
||||
BOTTOM_LEFT_EDGE: 18,
|
||||
|
||||
TOP_FRONT_RIGHT_CORNER: 19,
|
||||
TOP_BACK_RIGHT_CORNER: 20,
|
||||
TOP_BACK_LEFT_CORNER: 21,
|
||||
TOP_FRONT_LEFT_CORNER: 22,
|
||||
|
||||
BOTTOM_FRONT_RIGHT_CORNER: 23,
|
||||
BOTTOM_BACK_RIGHT_CORNER: 24,
|
||||
BOTTOM_BACK_LEFT_CORNER: 25,
|
||||
BOTTOM_FRONT_LEFT_CORNER: 26
|
||||
};
|
||||
|
||||
var BOX_FACES = [
|
||||
{
|
||||
name: FACES.FRONT,
|
||||
map: createTextSprite( "RIGHT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
|
||||
},
|
||||
{
|
||||
name: FACES.RIGHT,
|
||||
map: createTextSprite( "BACK", { fontSize: 60, font: "Arial Narrow, sans-serif" })
|
||||
},
|
||||
{
|
||||
name: FACES.BACK,
|
||||
map: createTextSprite( "LEFT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
|
||||
},
|
||||
{
|
||||
name: FACES.LEFT,
|
||||
map: createTextSprite( "FRONT", { fontSize: 60, font: "Arial Narrow, sans-serif" })
|
||||
},
|
||||
{
|
||||
name: FACES.TOP,
|
||||
map: createTextSprite( "TOP", { fontSize: 60, font: "Arial Narrow, sans-serif" })
|
||||
},
|
||||
{
|
||||
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 },
|
||||
{ name: FACES.TOP_BACK_LEFT_CORNER },
|
||||
{ name: FACES.TOP_FRONT_LEFT_CORNER },
|
||||
{ name: FACES.BOTTOM_BACK_RIGHT_CORNER },
|
||||
{ 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 },
|
||||
{ name: FACES.TOP_BACK_EDGE },
|
||||
{ name: FACES.TOP_LEFT_EDGE },
|
||||
// flip back and front bottom edges
|
||||
{ name: FACES.BOTTOM_BACK_EDGE },
|
||||
{ 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] ;
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
import * as THREE1 from "../three.module.js";
|
||||
|
||||
export function getStaticRef( thick, length) {
|
||||
// color definition
|
||||
const RED = 0xd9534f ;
|
||||
const DARK_RED = 0xAE423F ;
|
||||
const GREEN = 0x5cb85c ;
|
||||
const DARK_GREEN = 0x4A934A ;
|
||||
const BLUE = 0x0275d8 ;
|
||||
const DARK_BLUE = 0x025EAD ;
|
||||
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 x_darkMaterial = new THREE1.MeshBasicMaterial({ color : DARK_RED}) ;
|
||||
const y_material = new THREE1.MeshBasicMaterial({ color: GREEN}) ;
|
||||
const y_darkMaterial = new THREE1.MeshBasicMaterial({ color: DARK_GREEN}) ;
|
||||
const z_material = new THREE1.MeshBasicMaterial({ color: BLUE}) ;
|
||||
const z_darkMaterial = new THREE1.MeshBasicMaterial({ color : DARK_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_darkMaterial) ;
|
||||
const y_cylinder_arrow = new THREE1.Mesh( arrow_geometry, y_darkMaterial) ;
|
||||
const z_cylinder_arrow = new THREE1.Mesh( arrow_geometry, z_darkMaterial) ;
|
||||
// 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, myCamera, 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) ;
|
||||
myCamera.updateMatrix() ;
|
||||
}
|
||||
+20
@@ -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);
|
||||
Generated
Vendored
+1533
File diff suppressed because it is too large
Load Diff
+2474
File diff suppressed because it is too large
Load Diff
Generated
Vendored
+21
File diff suppressed because one or more lines are too long
Generated
Vendored
+16
File diff suppressed because one or more lines are too long
Generated
Vendored
BIN
Binary file not shown.
+1764
File diff suppressed because it is too large
Load Diff
+2309
File diff suppressed because it is too large
Load Diff
+53411
File diff suppressed because one or more lines are too long
+393
@@ -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) ;
|
||||
// }
|
||||
Generated
+17
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "THREEJS_DOORS",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"three": "^0.162.0"
|
||||
}
|
||||
},
|
||||
"node_modules/three": {
|
||||
"version": "0.162.0",
|
||||
"resolved": "https://registry.npmjs.org/three/-/three-0.162.0.tgz",
|
||||
"integrity": "sha512-xfCYj4RnlozReCmUd+XQzj6/5OjDNHBy5nT6rVwrOKGENAvpXe2z1jL+DZYaMu4/9pNsjH/4Os/VvS9IrH7IOQ=="
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "webgl-door-visualizer",
|
||||
"dependencies": {
|
||||
"three": "^0.162.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"registry": "https://nexus.steamware.net/repository/npm-hosted/"
|
||||
},
|
||||
"version": ".24062212",
|
||||
"description": "3D WebDoor visualizer ",
|
||||
"main": "draw_call.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"keywords": [
|
||||
"3D",
|
||||
"WebGl",
|
||||
"WebDoor"
|
||||
],
|
||||
"author": "R.E., S.E.L",
|
||||
"license": "ISC"
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
body {
|
||||
margin: 0 ;
|
||||
overflow: hidden ;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block ;
|
||||
}
|
||||
|
||||
#DoorRender {
|
||||
width : 100% ;
|
||||
height: 100% ;
|
||||
}
|
||||
|
||||
#divMenu {
|
||||
position: fixed ;
|
||||
top: 10px ;
|
||||
right: 10px ;
|
||||
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 ;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
width: 100% ;
|
||||
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 ;
|
||||
background-color: transparent ;
|
||||
/*border: 1px solid black ;*/
|
||||
}
|
||||
Reference in New Issue
Block a user