示例
HTML
< div class = " interface" >
< div class = " switcher" >
< a href = " #" class = " switcher-button" id = " button2d" > 2D</ a>
< a href = " #" class = " switcher-button is-active" id = " button3d" > 3D</ a>
</ div>
< div class = " text text-made" > Made with < span class = " love" > < svg version = " 1.1" xmlns = " http://www.w3.org/2000/svg" xmlns: xlink= " http://www.w3.org/1999/xlink" x = " 0px" y = " 0px" width = " 512px" height = " 512px" viewBox = " 0 0 512 512" enable-background = " new 0 0 512 512" xml: space= " preserve" > < path id = " favorite-2-icon" d = " M450.703,124.225C410.233,41.419,287.288,47.821,256,119.967c-31.288-72.146-154.233-78.548-194.703,4.257C13.59,221.837,124.309,314.82,256,448.014C387.691,314.82,498.41,221.837,450.703,124.225z" /> </ svg>
</ span> by < a href = " https://twitter.com/nicolasdnl" target = " _blank" class = " text-link" > Nicolas Daniel</ a> </ div>
< div class = " text text-inspiration" > Inspired by < a href = " https://vimeo.com/52798481" target = " _blank" class = " text-link" > Humans Since 1982</ a> </ div>
</ div>
CSS
@import "lesshat" ;
@black : #000;
@grey : #f0f0f0;
@mediumgrey : #a0a0a0;
@indigo : #3F51B5;
@red : #F44336;
.opensans {
font-family : "Open Sans" ;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}
html, body {
width : 100%;
height : 100%;
overflow : hidden;
background-color : @grey ;
}
.interface {
position : relative;
width : 100%;
height : 100%;
z-index : 999;
}
canvas {
position : absolute;
top : 50%;
left : 50%;
.translate ( -50%, -50%) ;
}
.switcher {
position : absolute;
bottom : 48px;
left : 50%;
.translate ( -50%, 0) ;
}
.switcher-button {
display : inline-block;
margin : 0 6px;
.opensans;
font-size : 18px;
color : @mediumgrey ;
text-decoration : none;
.transition ( color 0.2s ease-out) ;
&:hover, &.is-active {
color : @black ;
font-weight : bold;
.transition ( color 0.2s ease-in) ;
}
}
.text {
.opensans;
font-size : 14px;
color : @black ;
}
.text-made {
position : absolute;
bottom : 24px;
left : 24px;
}
.text-inspiration {
position : absolute;
bottom : 24px;
right : 24px;
}
.text-link {
position : relative;
color : @indigo ;
text-decoration : none;
&:after {
content : "" ;
position : absolute;
bottom : 0;
left : 0;
width : 0;
height : 1px;
background-color : @indigo ;
.transition ( width 0.2s ease-out) ;
}
&:hover {
&:after {
width : 100%;
}
}
}
.love svg {
width : 12px;
height : 12px;
fill : @red ;
}
JS
document. addEventListener ( 'DOMContentLoaded' , function ( ) {
var App = function ( ) { } ;
var p = App. prototype;
p. canvas2d = null ;
p. canvas3d = null ;
p. btn2d = null ;
p. btn3d = null ;
p. animationDuration = 0.6 ;
p. init = function ( ) {
console. log ( '%c Hi developers! %c http://nicolasdaniel.fr ' , 'background: #121212; color: #fff;' , 'background: #EEEEEE; color: #121212;' ) ;
p. clock2d = new Clock2d ( ) ;
p. clock3d = new Clock3d ( function ( ) {
p. initParameters ( ) ;
p. btn2d. addEventListener ( 'click' , p. onClick2d) ;
p. btn3d. addEventListener ( 'click' , p. onClick3d) ;
} ) ;
} ;
p. initParameters = function ( ) {
p. canvas2d = document. getElementById ( 'canvas2d' ) ;
p. canvas3d = document. getElementById ( 'canvas3d' ) ;
p. btn2d = document. getElementById ( 'button2d' ) ;
p. btn3d = document. getElementById ( 'button3d' ) ;
} ;
p. onClick2d = function ( e) {
e. preventDefault ( ) ;
p. btn3d. className = "switcher-button" ;
p. btn2d. className += " is-active" ;
TweenMax. to ( p. canvas3d, p. animationDuration, { opacity: 0 , onComplete: function ( ) {
p. canvas3d. style. display = "none" ;
} } ) ;
p. canvas2d. style. display = "block" ;
TweenMax. to ( p. canvas2d, p. animationDuration, { opacity: 1 , delay: p. animationDuration- 0.2 } ) ;
return false ;
} ;
p. onClick3d = function ( e) {
e. preventDefault ( ) ;
p. btn2d. className = "switcher-button" ;
p. btn3d. className += " is-active" ;
TweenMax. to ( p. canvas2d, p. animationDuration, { opacity: 0 , onComplete: function ( ) {
p. canvas2d. style. display = "none" ;
} } ) ;
p. canvas3d. style. display = "block" ;
TweenMax. to ( p. canvas3d, p. animationDuration, { opacity: 1 , delay: p. animationDuration- 0.2 } ) ;
return false ;
} ;
window. app = new App ( ) ;
app. init ( ) ;
} ) ;
( function ( ) {
'use strict' ;
var Clock2d = function ( ) { this . init ( ) ; } ;
var p = Clock2d. prototype;
p. minuteSpeed = 0.04 ;
p. hourSpeed = 0.02 ;
p. firstHourArray = [ ] ;
p. secondHourArray = [ ] ;
p. firstMinuteArray = [ ] ;
p. secondMinuteArray = [ ] ;
p. currentFirstMinute = 0 ;
p. currentSecondMinute = 0 ;
p. currentFirstHour = 0 ;
p. currentSecondHour = 0 ;
p. init = function ( ) {
p. initPixi ( ) ;
} ;
p. initPixi = function ( ) {
p. stage = new PIXI. Stage ( 0xF0F0F0 , true ) ;
p. renderer = PIXI . autoDetectRenderer ( 800 , 300 , { antialias: true } ) ;
p. renderer. view. id = "canvas2d" ;
p. renderer. view. style. display = "none" ;
p. renderer. view. style. opacity = 0 ;
document. body. appendChild ( p. renderer. view) ;
p. createClockGroup ( 50 , 50 , p. firstHourArray) ;
p. createClockGroup ( 250 , 50 , p. secondHourArray) ;
p. createClockGroup ( 450 , 50 , p. firstMinuteArray) ;
p. createClockGroup ( 650 , 50 , p. secondMinuteArray) ;
requestAnimFrame ( p. animate) ;
} ;
p. createClockGroup = function ( x, y, array) {
p. clockGroup = new PIXI. DisplayObjectContainer ( ) ;
p. clockGroup. x = x;
p. clockGroup. y = y;
p. stage. addChild ( p. clockGroup) ;
for ( var j= 0 ; j< 3 ; ++ j ) {
for ( var i= 0 ; i< 2 ; ++ i ) {
p. createClock ( p. clockGroup, i, j, array) ;
}
}
}
p. createClock = function ( container, i, j, array) {
p. clock = new PIXI. DisplayObjectContainer ( ) ;
p. clock. x = 100 * i;
p. clock. y = 100 * j;
container. addChild ( p. clock) ;
p. base = new PIXI. Graphics ( ) ;
p. base. beginFill ( 0xffffff ) ;
p. base. drawCircle ( 0 , 0 , 50 ) ;
p. clock. addChild ( p. base) ;
p. minuteHand = new PIXI. Graphics ( ) ;
p. minuteHand. beginFill ( 0x000000 ) ;
p. minuteHand. drawRect ( 2 , 0 , 46 , 10 ) ;
p. minuteHand. pivot = new PIXI. Point ( 0 , 5 ) ;
p. minuteHand. rotation = ( 3 / 4 ) * Math. PI ;
p. clock. addChild ( p. minuteHand) ;
p. hourHand = new PIXI. Graphics ( ) ;
p. hourHand. beginFill ( 0x000000 ) ;
p. hourHand. drawRect ( 2 , 0 , 40 , 10 ) ;
p. hourHand. pivot = new PIXI. Point ( 0 , 5 ) ;
p. hourHand. rotation = ( 3 / 4 ) * Math. PI ;
p. clock. addChild ( p. hourHand) ;
p. centralScrew = new PIXI. Graphics ( ) ;
p. centralScrew. beginFill ( 0x000000 ) ;
p. centralScrew. drawCircle ( 0 , 0 , 5 ) ;
p. clock. addChild ( p. centralScrew) ;
array. push ( {
minute: {
object: p. minuteHand,
speed: p. minuteSpeed,
isMoved: true ,
round: 2 ,
index: 1
} ,
hour: {
object: p. hourHand,
speed: p. hourSpeed,
isMoved: true ,
round: 1 ,
index: 1
}
} ) ;
}
p. animate = function ( ) {
requestAnimFrame ( p. animate) ;
p. updateTime ( ) ;
p. renderer. render ( p. stage) ;
} ;
p. updateTime = function ( ) {
p. time = new Date ( ) ;
p. minutes = p. time. getMinutes ( ) ;
p. hours = p. time. getHours ( ) ;
if ( p. minutes !== p. currentMinute ) {
p. currentMinute = p. minutes;
if ( p. minutes. toString ( ) . length > 1 ) {
p. currentFirstMinute = parseInt ( p. minutes. toString ( ) . slice ( 0 , 1 ) ) ;
p. currentSecondMinute = parseInt ( p. minutes. toString ( ) . slice ( 1 , 2 ) ) ;
} else {
if ( p. minutes == 0 ) {
p. currentFirstMinute = p. minutes;
}
p. currentSecondMinute = p. minutes;
}
for ( var i= 0 ; i< 6 ; ++ i ) {
p. secondMinuteArray[ i] . minute. isMoved = true ;
p. secondMinuteArray[ i] . hour. isMoved = true ;
p. firstMinuteArray[ i] . minute. isMoved = true ;
p. firstMinuteArray[ i] . hour. isMoved = true ;
p. secondHourArray[ i] . minute. isMoved = true ;
p. secondHourArray[ i] . hour. isMoved = true ;
p. firstHourArray[ i] . minute. isMoved = true ;
p. firstHourArray[ i] . hour. isMoved = true ;
}
}
if ( p. hours !== p. currentHour ) {
p. currentHour = p. hours;
if ( p. hours. toString ( ) . length > 1 ) {
p. currentFirstHour = parseInt ( p. hours. toString ( ) . slice ( 0 , 1 ) ) ;
p. currentSecondHour = parseInt ( p. hours. toString ( ) . slice ( 1 , 2 ) ) ;
} else {
if ( p. hours == 0 ) {
p. currentFirstHour = p. hours;
}
p. currentSecondHour = p. hours;
}
for ( var i= 0 ; i< 6 ; ++ i ) {
p. secondMinuteArray[ i] . minute. isMoved = true ;
p. secondMinuteArray[ i] . hour. isMoved = true ;
p. firstMinuteArray[ i] . minute. isMoved = true ;
p. firstMinuteArray[ i] . hour. isMoved = true ;
p. secondHourArray[ i] . minute. isMoved = true ;
p. secondHourArray[ i] . hour. isMoved = true ;
p. firstHourArray[ i] . minute. isMoved = true ;
p. firstHourArray[ i] . hour. isMoved = true ;
}
}
p. setNumber ( p. currentFirstMinute, p. firstMinuteArray) ;
p. setNumber ( p. currentSecondMinute, p. secondMinuteArray) ;
p. setNumber ( p. currentFirstHour, p. firstHourArray) ;
p. setNumber ( p. currentSecondHour, p. secondHourArray) ;
} ;
p. setDirection = function ( clock, formule) {
if ( clock. isMoved && clock. object. rotation < 2 * ( clock. index + clock. round - 1 ) * Math. PI + formule ) {
clock. object. rotation += clock. speed;
} else {
if ( clock. isMoved ) {
clock. object. rotation = 2 * clock. index * Math. PI + formule;
clock. index++ ;
}
clock. isMoved = false ;
}
}
p. setEastDirection = function ( clock) {
p. setDirection ( clock, 0 ) ;
}
p. setSouthDirection = function ( clock) {
p. setDirection ( clock, Math. PI / 2 ) ;
}
p. setWestDirection = function ( clock) {
p. setDirection ( clock, Math. PI ) ;
}
p. setNorthDirection = function ( clock) {
p. setDirection ( clock, ( 3 / 2 ) * Math. PI ) ;
}
p. setSouthWestDirection = function ( clock) {
p. setDirection ( clock, ( 3 / 4 ) * Math. PI ) ;
}
p. setNumber = function ( number, array) {
if ( number == 0 ) p. setNumberZero ( array) ;
if ( number == 1 ) p. setNumberOne ( array) ;
if ( number == 2 ) p. setNumberTwo ( array) ;
if ( number == 3 ) p. setNumberThree ( array) ;
if ( number == 4 ) p. setNumberFour ( array) ;
if ( number == 5 ) p. setNumberFive ( array) ;
if ( number == 6 ) p. setNumberSix ( array) ;
if ( number == 7 ) p. setNumberSeven ( array) ;
if ( number == 8 ) p. setNumberEight ( array) ;
if ( number == 9 ) p. setNumberNine ( array) ;
}
p. setNumberZero = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberOne = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 || i == 2 || i == 4 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setNorthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberTwo = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
}
}
p. setNumberThree = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberFour = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setNorthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberFive = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberSix = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberSeven = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setNorthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberEight = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberNine = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
window. Clock2d = Clock2d;
} ) ( ) ;
( function ( ) {
'use strict' ;
var Clock3d = function ( callback) { this . init ( function ( ) { callback ( ) ; } ) ; } ;
var p = Clock3d. prototype;
p. minuteSpeed = 0.04 ;
p. hourSpeed = 0.02 ;
p. firstHourArray = [ ] ;
p. secondHourArray = [ ] ;
p. firstMinuteArray = [ ] ;
p. secondMinuteArray = [ ] ;
p. currentFirstMinute = 0 ;
p. currentSecondMinute = 0 ;
p. currentFirstHour = 0 ;
p. currentSecondHour = 0 ;
p. init = function ( callback) {
p. initScene ( function ( ) { callback ( ) ; } ) ;
p. initEventListeners ( ) ;
} ;
p. initEventListeners = function ( ) {
document. addEventListener ( 'mousedown' , p. onMouseDown) ;
document. addEventListener ( 'mousemove' , p. onMouseMove) ;
document. addEventListener ( 'mouseup' , p. onMouseUp) ;
window. addEventListener ( 'DOMMouseScroll' , p. mousewheel, false ) ;
window. addEventListener ( 'mousewheel' , p. mousewheel, false ) ;
}
p. initScene = function ( callback) {
p. scene = new THREE. Scene ( ) ;
p. initCamera ( ) ;
p. initLights ( ) ;
p. initRenderer ( function ( ) { callback ( ) ; } ) ;
p. createClockGroup ( - 360 , 0 , p. firstHourArray) ;
p. createClockGroup ( - 120 , 0 , p. secondHourArray) ;
p. createClockGroup ( 120 , 0 , p. firstMinuteArray) ;
p. createClockGroup ( 360 , 0 , p. secondMinuteArray) ;
p. render ( ) ;
} ;
p. initCamera = function ( ) {
p. camera = new THREE. PerspectiveCamera ( 75 , window. innerWidth / window. innerHeight, 0.1 , 1000 ) ;
p. camera. position. y = 50 ;
p. camera. position. z = 650 ;
p. camera. updateProjectionMatrix ( ) ;
p. camera. lookAt ( this . scene. position) ;
} ;
p. initRenderer = function ( callback) {
p. renderer = new THREE. WebGLRenderer ( { antialias: true } ) ;
p. renderer. setSize ( window. innerWidth, window. innerHeight ) ;
p. renderer. setClearColor ( 0xf0f0f0 , 1 ) ;
p. renderer. domElement. id = "canvas3d" ;
document. body. appendChild ( p. renderer. domElement) ;
callback ( ) ;
} ;
p. initLights = function ( ) {
var light = new THREE. DirectionalLight ( 0xffffff , 1.2 ) ;
light. position. set ( - 55 , 10 , 40 ) ;
p. scene. add ( light ) ;
var light = new THREE. DirectionalLight ( 0xffffff , 0.6 ) ;
light. position. set ( 55 , - 55 , 55 ) ;
p. scene. add ( light ) ;
var light = new THREE. DirectionalLight ( 0xffffff , 0.8 ) ;
light. position. set ( 0 , 0 , - 100 ) ;
p. scene. add ( light ) ;
} ;
p. createClockGroup = function ( x, y, array) {
p. clockGroup = new THREE. Group ( ) ;
p. clockGroup. position. x = x;
p. clockGroup. position. y = y;
p. scene. add ( p. clockGroup) ;
for ( var j= 0 ; j< 3 ; ++ j ) {
for ( var i= 0 ; i< 2 ; ++ i ) {
p. createClock ( p. clockGroup, i, j, array) ;
}
}
}
p. createClock = function ( container, i, j, array) {
p. clock = new THREE. Group ( ) ;
p. clock. position. x = ( i- 0.5 ) * 120 ;
p. clock. position. y = ( j- 1 ) * ( - 120 ) ;
container. add ( p. clock) ;
p. geometry = new THREE. CylinderGeometry ( 60 , 60 , 40 , 20 ) ;
p. material = new THREE. MeshPhongMaterial ( { color : 0xf6f6f6 , shading: THREE . FlatShading} ) ;
p. base = new THREE. Mesh ( p. geometry, p. material) ;
p. base. rotation. x = Math. PI / 2 ;
p. clock. add ( p. base) ;
var pts = [
new THREE. Vector3 ( 60 , 0 , 6 ) ,
new THREE. Vector3 ( 56 , 0 , 6 ) ,
new THREE. Vector3 ( 56 , 0 , - 6 ) ,
new THREE. Vector3 ( 60 , 0 , - 6 ) ,
new THREE. Vector3 ( 60 , 0 , 6 )
] ;
p. geometry = new THREE. LatheGeometry ( pts, 20 ) ;
p. material = new THREE. MeshPhongMaterial ( { color : 0xffffff , shading: THREE . FlatShading} ) ;
p. ring = new THREE. Mesh ( p. geometry, p. material) ;
p. ring. position. z = 24 ;
p. ring. overdraw = true ;
p. ring. doubleSided = true ;
p. clock. add ( p. ring) ;
p. geometry = new THREE. BoxGeometry ( 50 , 10 , 2 ) ;
p. material = new THREE. MeshPhongMaterial ( { color : 0x000000 , shading: THREE . FlatShading} ) ;
p. minuteHand = new THREE. Mesh ( p. geometry, p. material) ;
p. minuteHand. position. z = 24 ;
p. minuteHand. position. x = 25 ;
p. clock. add ( p. minuteHand) ;
p. geometry = new THREE. CylinderGeometry ( 5 , 5 , 2 , 10 ) ;
p. material = new THREE. MeshPhongMaterial ( { color : 0x000000 , shading: THREE . FlatShading} ) ;
p. minuteHandBase = new THREE. Mesh ( p. geometry, p. material) ;
p. minuteHandBase. rotation. x = Math. PI / 2 ;
p. minuteHandBase. position. z = 24 ;
p. clock. add ( p. minuteHandBase) ;
p. minuteHandPivot = new THREE. Object3D ( ) ;
p. clock. add ( p. minuteHandPivot ) ;
p. minuteHandPivot. add ( p. minuteHand) ;
p. minuteHandPivot. rotation. z = ( 3 / 2 ) * Math. PI ;
p. geometry = new THREE. BoxGeometry ( 46 , 10 , 2 ) ;
p. hourHand = new THREE. Mesh ( p. geometry, p. material) ;
p. hourHand. position. z = 26 ;
p. hourHand. position. x = 23 ;
p. clock. add ( p. hourHand) ;
p. geometry = new THREE. CylinderGeometry ( 5 , 5 , 2 , 10 ) ;
p. material = new THREE. MeshPhongMaterial ( { color : 0x000000 , shading: THREE . FlatShading} ) ;
p. hourHandBase = new THREE. Mesh ( p. geometry, p. material) ;
p. hourHandBase. rotation. x = Math. PI / 2 ;
p. hourHandBase. position. z = 26 ;
p. clock. add ( p. hourHandBase) ;
p. hourHandPivot = new THREE. Object3D ( ) ;
p. clock. add ( p. hourHandPivot ) ;
p. hourHandPivot. add ( p. hourHand) ;
p. hourHandPivot. rotation. z = Math. PI / 4 ;
p. geometry = new THREE. CylinderGeometry ( 3 , 3 , 2 , 10 ) ;
p. material = new THREE. MeshPhongMaterial ( { color : 0x222222 , shading: THREE . FlatShading} ) ;
p. centralScrew = new THREE. Mesh ( p. geometry, p. material) ;
p. centralScrew. rotation. x = Math. PI / 2 ;
p. centralScrew. position. z = 28 ;
p. clock. add ( p. centralScrew) ;
array. push ( {
minute: {
object: p. minuteHandPivot,
speed: p. minuteSpeed,
isMoved: true ,
round: 2 ,
index: 1
} ,
hour: {
object: p. hourHandPivot,
speed: p. hourSpeed,
isMoved: true ,
round: 1 ,
index: 1
}
} ) ;
}
p. render = function ( ) {
requestAnimationFrame ( p. render) ;
p. updateTime ( ) ;
p. renderer. render ( p. scene, p. camera) ;
} ;
p. updateTime = function ( ) {
p. time = new Date ( ) ;
p. minutes = p. time. getMinutes ( ) ;
p. hours = p. time. getHours ( ) ;
if ( p. minutes !== p. currentMinute ) {
p. currentMinute = p. minutes;
if ( p. minutes. toString ( ) . length > 1 ) {
p. currentFirstMinute = parseInt ( p. minutes. toString ( ) . slice ( 0 , 1 ) ) ;
p. currentSecondMinute = parseInt ( p. minutes. toString ( ) . slice ( 1 , 2 ) ) ;
} else {
if ( p. minutes == 0 ) {
p. currentFirstMinute = p. minutes;
}
p. currentSecondMinute = p. minutes;
}
for ( var i= 0 ; i< 6 ; ++ i ) {
p. secondMinuteArray[ i] . minute. isMoved = true ;
p. secondMinuteArray[ i] . hour. isMoved = true ;
p. firstMinuteArray[ i] . minute. isMoved = true ;
p. firstMinuteArray[ i] . hour. isMoved = true ;
p. secondHourArray[ i] . minute. isMoved = true ;
p. secondHourArray[ i] . hour. isMoved = true ;
p. firstHourArray[ i] . minute. isMoved = true ;
p. firstHourArray[ i] . hour. isMoved = true ;
}
}
if ( p. hours !== p. currentHour ) {
p. currentHour = p. hours;
if ( p. hours. toString ( ) . length > 1 ) {
p. currentFirstHour = parseInt ( p. hours. toString ( ) . slice ( 0 , 1 ) ) ;
p. currentSecondHour = parseInt ( p. hours. toString ( ) . slice ( 1 , 2 ) ) ;
} else {
if ( p. hours == 0 ) {
p. currentFirstHour = p. hours;
}
p. currentSecondHour = p. hours;
}
for ( var i= 0 ; i< 6 ; ++ i ) {
p. secondMinuteArray[ i] . minute. isMoved = true ;
p. secondMinuteArray[ i] . hour. isMoved = true ;
p. firstMinuteArray[ i] . minute. isMoved = true ;
p. firstMinuteArray[ i] . hour. isMoved = true ;
p. secondHourArray[ i] . minute. isMoved = true ;
p. secondHourArray[ i] . hour. isMoved = true ;
p. firstHourArray[ i] . minute. isMoved = true ;
p. firstHourArray[ i] . hour. isMoved = true ;
}
}
p. setNumber ( p. currentFirstMinute, p. firstMinuteArray) ;
p. setNumber ( p. currentSecondMinute, p. secondMinuteArray) ;
p. setNumber ( p. currentFirstHour, p. firstHourArray) ;
p. setNumber ( p. currentSecondHour, p. secondHourArray) ;
} ;
p. setDirection = function ( clock, formule) {
if ( clock. isMoved && clock. object. rotation. z > - ( 2 * ( clock. index + clock. round - 1 ) * Math. PI + formule ) ) {
clock. object. rotation. z -= clock. speed;
} else {
if ( clock. isMoved ) {
clock. object. rotation. z = - ( 2 * clock. index * Math. PI + formule ) ;
clock. index++ ;
}
clock. isMoved = false ;
}
}
p. setEastDirection = function ( clock) {
p. setDirection ( clock, 0 ) ;
}
p. setSouthDirection = function ( clock) {
p. setDirection ( clock, Math. PI / 2 ) ;
}
p. setWestDirection = function ( clock) {
p. setDirection ( clock, Math. PI ) ;
}
p. setNorthDirection = function ( clock) {
p. setDirection ( clock, ( 3 / 2 ) * Math. PI ) ;
}
p. setSouthWestDirection = function ( clock) {
p. setDirection ( clock, ( 3 / 4 ) * Math. PI ) ;
}
p. setNumber = function ( number, array) {
if ( number == 0 ) p. setNumberZero ( array) ;
if ( number == 1 ) p. setNumberOne ( array) ;
if ( number == 2 ) p. setNumberTwo ( array) ;
if ( number == 3 ) p. setNumberThree ( array) ;
if ( number == 4 ) p. setNumberFour ( array) ;
if ( number == 5 ) p. setNumberFive ( array) ;
if ( number == 6 ) p. setNumberSix ( array) ;
if ( number == 7 ) p. setNumberSeven ( array) ;
if ( number == 8 ) p. setNumberEight ( array) ;
if ( number == 9 ) p. setNumberNine ( array) ;
}
p. setNumberZero = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberOne = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 || i == 2 || i == 4 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setNorthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberTwo = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
}
}
p. setNumberThree = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberFour = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setNorthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberFive = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberSix = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberSeven = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setSouthWestDirection ( array[ i] . hour) ;
p. setSouthWestDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setNorthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberEight = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. setNumberNine = function ( array) {
for ( var i= 0 ; i< array. length ; ++ i ) {
if ( i == 0 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setSouthDirection ( array[ i] . minute) ;
}
if ( i == 1 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setWestDirection ( array[ i] . minute) ;
}
if ( i == 2 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 3 ) {
p. setSouthDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
if ( i == 4 ) {
p. setEastDirection ( array[ i] . hour) ;
p. setEastDirection ( array[ i] . minute) ;
}
if ( i == 5 ) {
p. setWestDirection ( array[ i] . hour) ;
p. setNorthDirection ( array[ i] . minute) ;
}
}
}
p. onMouseMove = function ( e) {
if ( ! p. mouseDown) {
return ;
}
e. preventDefault ( ) ;
var deltaX = e. clientX - p. mouseX,
deltaY = e. clientY - p. mouseY;
p. mouseX = e. clientX;
p. mouseY = e. clientY;
p. rotateScene ( deltaX, deltaY) ;
}
p. onMouseDown = function ( e) {
e. preventDefault ( ) ;
p. mouseDown = true ;
p. mouseX = e. clientX;
p. mouseY = e. clientY;
}
p. onMouseUp = function ( e) {
e. preventDefault ( ) ;
p. mouseDown = false ;
}
p. rotateScene = function ( deltaX, deltaY) {
p. scene. rotation. y += deltaX / 100 ;
p. scene. rotation. x += deltaY / 100 ;
}
p. mousewheel = function ( e) {
var fovMAX = 160 ;
var fovMIN = 1 ;
p. camera. fov -= event. wheelDeltaY * 0.05 ;
p. camera. fov = Math. max ( Math. min ( p. camera. fov, fovMAX ) , fovMIN ) ;
p. camera. projectionMatrix = new THREE. Matrix4 ( ) . makePerspective ( p. camera. fov, window. innerWidth / window. innerHeight, p. camera. near, p. camera. far) ;
}
window. Clock3d = Clock3d;
} ) ( ) ;