示例

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;// ------------------------------// @function init()// ------------------------------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;/*** DOM elements*//*** Parameters*/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;/*** Initialisation*/p.init = function() {p.initPixi();};/*** Initialisation of pixi*/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);// create first h ([h]h:mm) : firstHourp.createClockGroup(50, 50, p.firstHourArray);// create second h (h[h]:mm) : secondHourp.createClockGroup(250, 50, p.secondHourArray);// create first m (hh:[m]m) : firstMinutep.createClockGroup(450, 50, p.firstMinuteArray);// create second m (hh:m[m]) : secondMinutep.createClockGroup(650, 50, p.secondMinuteArray);requestAnimFrame(p.animate);};/*** Create clock group (2x3 clocks to make 1 number) */p.createClockGroup = function(x, y, array) {// clock group containerp.clockGroup = new PIXI.DisplayObjectContainer();p.clockGroup.x = x;p.clockGroup.y = y;p.stage.addChild(p.clockGroup);// create 2x3 clocksfor ( var j=0 ; j<3 ; ++j ) {for ( var i=0 ; i<2 ; ++i ) {p.createClock(p.clockGroup, i, j, array);}}}/*** Create clock*/p.createClock = function(container, i, j, array) {// clock containerp.clock = new PIXI.DisplayObjectContainer();p.clock.x = 100 * i;p.clock.y = 100 * j;container.addChild(p.clock);// clock basep.base = new PIXI.Graphics();p.base.beginFill(0xffffff);p.base.drawCircle(0, 0, 50);p.clock.addChild(p.base);// minute handp.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);// hour handp.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);// central screwp.centralScrew = new PIXI.Graphics();p.centralScrew.beginFill(0x000000);p.centralScrew.drawCircle(0, 0, 5);p.clock.addChild(p.centralScrew);// add minute hand and hour hand into clocks array// object     : (PIXI Graphics Object)// speed    : (Float) speed coef// isMoved  : (Boolean) true if needle curently rotating// round    : (Integer) number of clock round before stop rotating// index  : (Integer) current number of animationarray.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}});}/*** Animate*/p.animate = function() {requestAnimFrame(p.animate);p.updateTime();p.renderer.render(p.stage);};/*** Update time*/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);};   /*** Set direction of the needle*/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;}  }/*** Set direction to East*/p.setEastDirection = function(clock) {p.setDirection(clock, 0);}/*** Set direction to South*/p.setSouthDirection = function(clock) {p.setDirection(clock, Math.PI / 2);}/*** Set direction to West*/p.setWestDirection = function(clock) {p.setDirection(clock, Math.PI);}/*** Set direction to North*/p.setNorthDirection = function(clock) {p.setDirection(clock, (3/2)*Math.PI);}/*** Set direction to South-West*/p.setSouthWestDirection = function(clock) {p.setDirection(clock, (3/4)*Math.PI);}/*** Set number*/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);}/*** Set number 0*/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);}}}/*** Set number 1*/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);}}}/*** Set number 2*/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);}}}/*** Set number 3*/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);}}}/*** Set number 4*/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);}}}/*** Set number 5*/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);}}}/*** Set number 6*/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);}}}/*** Set number 7*/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);}}}/*** Set number 8*/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);}}}/*** Set number 9*/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;/*** Parameters*/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;/*** Initialisation*/p.init = function(callback) {p.initScene(function(){callback();});p.initEventListeners();};/*** Initialisation of event listeners*/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);}/*** Init scene*/p.initScene = function(callback) {p.scene = new THREE.Scene();p.initCamera();p.initLights();p.initRenderer(function(){callback();});// create first h ([h]h:mm) : firstHourp.createClockGroup(-360, 0, p.firstHourArray);// create second h (h[h]:mm) : secondHourp.createClockGroup(-120, 0, p.secondHourArray);// create first m (hh:[m]m) : firstMinutep.createClockGroup(120, 0, p.firstMinuteArray);// create second m (hh:m[m]) : secondMinutep.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 );};/*** Create clock group (2x3 clocks to make 1 number) */p.createClockGroup = function(x, y, array) {// clock group containerp.clockGroup = new THREE.Group();p.clockGroup.position.x = x;p.clockGroup.position.y = y;p.scene.add(p.clockGroup);// create 2x3 clocksfor ( var j=0 ; j<3 ; ++j ) {for ( var i=0 ; i<2 ; ++i ) {p.createClock(p.clockGroup, i, j, array);}}}/*** Create clock*/p.createClock = function(container, i, j, array) {// clock containerp.clock = new THREE.Group();p.clock.position.x = (i-0.5) * 120;p.clock.position.y = (j-1) * (-120);container.add(p.clock);// clock basep.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);// clock ringvar pts = [new THREE.Vector3(60,0,6),//top leftnew THREE.Vector3(56,0,6),//top rightnew THREE.Vector3(56,0,-6),//bottom rightnew THREE.Vector3(60,0,-6),//bottom leftnew THREE.Vector3(60,0,6)//back to top left - close square path];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);// minute handp.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);// minute hand rotation pivotp.minuteHandPivot = new THREE.Object3D();p.clock.add( p.minuteHandPivot );p.minuteHandPivot.add(p.minuteHand);p.minuteHandPivot.rotation.z = (3/2)*Math.PI;// hour handp.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);// hour hand rotation pivotp.hourHandPivot = new THREE.Object3D();p.clock.add( p.hourHandPivot );p.hourHandPivot.add(p.hourHand);p.hourHandPivot.rotation.z = Math.PI/4;// central screwp.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);// add minute hand and hour hand into clocks array// object     : (PIXI Graphics Object)// speed    : (Float) speed coef// isMoved  : (Boolean) true if needle curently rotating// round    : (Integer) number of clock round before stop rotating// index  : (Integer) current number of animationarray.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);};/*** Update time*/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);};   /*** Set direction of the needle*/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;} }/*** Set direction to East*/p.setEastDirection = function(clock) {p.setDirection(clock, 0);}/*** Set direction to South*/p.setSouthDirection = function(clock) {p.setDirection(clock, Math.PI / 2);}/*** Set direction to West*/p.setWestDirection = function(clock) {p.setDirection(clock, Math.PI);}/*** Set direction to North*/p.setNorthDirection = function(clock) {p.setDirection(clock, (3/2)*Math.PI);}/*** Set direction to South-West*/p.setSouthWestDirection = function(clock) {p.setDirection(clock, (3/4)*Math.PI);}/*** Set number*/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);}/*** Set number 0*/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);}}}/*** Set number 1*/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);}}}/*** Set number 2*/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);}}}/*** Set number 3*/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);}}}/*** Set number 4*/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);}}}/*** Set number 5*/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);}}}/*** Set number 6*/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);}}}/*** Set number 7*/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);}}}/*** Set number 8*/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);}}}/*** Set number 9*/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);}}}/*** Event listener mouse move*/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);}/*** Event listener mouse down*/p.onMouseDown = function(e) {e.preventDefault();p.mouseDown = true;p.mouseX = e.clientX;p.mouseY = e.clientY;}/*** Event listener mouse up*/p.onMouseUp = function(e) {e.preventDefault();p.mouseDown = false;}/*** Rotate scene*/p.rotateScene = function(deltaX, deltaY) {p.scene.rotation.y += deltaX / 100;p.scene.rotation.x += deltaY / 100;}/*** Event listener mouse wheel*/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;
})();

闹钟（Alarm Clock）相关推荐

社区奖品之Alarm Clock逃跑闹钟
Alarm Clock逃跑闹钟特点: 1.闹钟会一直朝前跑,请放在床头柜朝外的角落里: 2.闹钟能从3英尺高的床头柜上掉下来,所以不要放的太高.柜子最好不要超过3英尺: 3.闹钟能在木地板和多数 ...
《101 Windows Phone 7 Apps》读书笔记-ALARM CLOCK
课程内容 Ø 隔离存储空间 Ø 设置 Ø 设置页面向导 Ø Toggle Switch控件 Ø 使用自定义字体 Alarm Clock模仿的是一种有点复古的数字闹钟.它具有固定的显示,上面的分段可以根 ...
计算机闹铃音乐在线听,电脑闹钟提醒(Free Alarm Clock)
用于计算机的闹钟工具,还可以方便的提醒您的日程安排.使用完全免费滴.日程和闹钟分为平日和节假日,区别设定,每天也可以单独设定.闹钟独有的"赖床"功能,绝对值得您一试... 特点: ...
linux闹钟alarm
linux内部的alarm是通过设定参数long sec的指进行设定内核态的时间每次相隔当前系统时间的下一次的时间到达之后内部的计数器会进行加一然后返回SIGALRM 信号一般我们所用的是lin ...
android闹钟的需求分析,手机小闹钟需求分析
Android 手机小闹钟日常生活工作中,时常会有一些重要事情或日程安排,而闹钟作为一种提醒人们的工具,成为很多人生活中不可或缺的一部分. 本软件包括的功能有闹钟设置.闹钟创建.闹钟关闭等模块.本应 ...
android闹钟测评,时间就是一切 Android闹钟应用推荐
超级系统闹钟超级系统闹钟 ALARM CLOCK PLUS是一款全功能.最稳定的ANDROID闹钟! 完全自由不受限! 下载已经超过100万次! Alarm Clock Plus的功能包括: -无限 ...
Linux时间编程三大步骤
一.Linux时间类型在Linux系统当中,时间分为两种类型:格林威治时间和日历时间. Coordinated Universal Time(UTC)是世界标准的时间,即常说的格林威治标准时间(Gr ...
教你玩转安卓Android手机50招秘籍
虽然Android操作系统的用户界面和交互经过两年的发展已经非常人性化,但是有些操作和使用还是让很多刚接触的菜鸟用户感到复杂和困惑.我们整理出Android系统的50大必备秘籍供用户参考,适合各种阶段 ...
Android系统的50大必备秘籍（仅限初级用户）
虽然Android 操作系统的用户界面和交互经过两年的发展已经非常人性化,但是有些操作和使用还是让很多刚接触的菜鸟用户感到复杂和困惑.我们整理出Android系统的50大必备秘籍供用户参考,适合各种阶 ...
Android系统操作的50个实用技巧
请意这些技巧和秘籍大部分针对目前最主流的Android2.1 及以上系统,不过绝大部分在其他版本的Android系统上同样适用. 1.使用Android电源管理widget 从Android2.1系统 ...

闹钟（Alarm Clock）

闹钟（Alarm Clock）

示例

HTML

CSS

JS

闹钟（Alarm Clock）相关推荐

最新文章

热门文章