3D Realistic World Clock
How do I make an 3d realistic world clock?
This is a realistic world clock, with day/night simulation. You can also look for locations by looking up the location name, or using latitude and longitude. The time changes based on location. It's HTML5, WebGL and JavaScript.. What is a 3d realistic world clock? How do you make a 3d realistic world clock? This script and codes were developed by Vahid on 16 September 2022, Friday.
3D Realistic World Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3D Realistic World Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
3D Realistic World Clock - Script Codes CSS Codes
/* best viewed in chrome */
3D Realistic World Clock - Script Codes JS Codes
var latInput = document.createElement ( 'input' );
var longInput = document.createElement ( 'input' );
var locInput = document.createElement ( 'input' );
var locSubmit = document.createElement ( 'button' );
var digitalClock = document.createElement ( 'span' );
var hours = document.createElement ( 'span' );
var minutes = document.createElement ( 'span' );
var seconds = document.createElement ( 'span' );
var license = document.createElement ( 'span' );
var renderer;
window.onresize = function () { showEarth ();
}
requestAnimFrame = ( function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function ( callback ) { window.setTimeout(callback, 1000 / 60); };
} ) ();
function doubleDigits ( num ) { if ( num < 10 ) { num = "0" + num } return num;
}
function getCoordinate () { var apiURL = "https://maps.googleapis.com/maps/api/geocode/json?address="; apiURL += locInput.value; var ajax; if ( window.XMLHttpRequest ) { ajax = new XMLHttpRequest (); } else { ajax = new ActiveXObject ( "Microsoft.XMLHTTP" ); } ajax.onreadystatechange = function () { if ( ajax.readyState == 4 && ajax.status == 200 ) { var data = eval ( "(" + ajax.responseText + ")" ); latInput.value = data.results[0].geometry.location.lat; longInput.value = data.results[0].geometry.location.lng; getTime (); } } ajax.open ( "GET", apiURL, true ); ajax.send (); return false;
}
function getTime () { hours.innerHTML = ""; minutes.innerHTML = ""; seconds.innerHTML = ""; digitalClock.style.marginLeft = "-" + digitalClock.offsetWidth / 2 + "px"; if ( ( parseInt ( latInput.value ) >= -90 ) && ( parseInt ( latInput.value ) <= 90 ) && ( parseInt ( longInput.value ) >= -180 ) && ( parseInt ( longInput.value ) <= 180 ) ) { var zone = "https://maps.googleapis.com/maps/api/timezone/json?location=" + latInput.value + "," + longInput.value + "×tamp=" + ( Math.round ( ( new Date ().getTime () ) / 1000 ) ).toString (); var ajax; if ( window.XMLHttpRequest ) { ajax = new XMLHttpRequest (); } else { ajax = new ActiveXObject ( "Microsoft.XMLHTTP" ); } ajax.onreadystatechange = function () { if ( ajax.readyState == 4 && ajax.status == 200 ) { var data = eval ( "(" + ajax.responseText + ")" ); var offset = parseInt ( data.dstOffset ) + parseInt ( data.rawOffset ); var timeStamp = new Date ().getTime () + new Date ().getTimezoneOffset () * 60 * 1000 + offset * 1000; var d = new Date( timeStamp ); var h = doubleDigits ( d.getHours () ); var m = doubleDigits ( d.getMinutes () ); var s = doubleDigits ( d.getSeconds () ); hours.innerHTML = h; minutes.innerHTML = m; seconds.innerHTML = s; digitalClock.style.marginLeft = "-" + digitalClock.offsetWidth / 2 + "px"; } } ajax.open ( "GET", zone, true ); ajax.send (); }
}
function timePass () { seconds.innerHTML = doubleDigits ( parseInt ( seconds.innerHTML ) + 1 ); if ( parseInt ( seconds.innerHTML ) == 60 ) { minutes.innerHTML = doubleDigits ( parseInt ( minutes.innerHTML ) + 1 ); seconds.innerHTML = doubleDigits ( 0 ); } if ( parseInt ( minutes.innerHTML ) == 60 ) { hours.innerHTML = doubleDigits ( parseInt ( hours.innerHTML ) + 1 ); minutes.innerHTML = doubleDigits ( 0 ); } if ( parseInt ( hours.innerHTML ) == 24 ) { hours.innerHTML = doubleDigits ( 0 ); } setTimeout ( timePass, 1000 );
}
longInput.onchange = function () { getTime (); }
latInput.onchange = function () { getTime (); }
window.onload = function () { document.title = "3D World Clock"; document.body.style.margin = 0; document.body.style.overflow = 'hidden'; document.body.setAttribute ( "style", "margin: 0; overflow: hidden; width: 100%; height: 100%; -moz-user-select: -moz-none; -webkit-user-select: none; user-select: none;" ); var bar = document.createElement ( 'div' ); bar.style.width = '100%'; bar.style.minHeight = '30px'; bar.style.background = 'rgba(24,35,41,0.7)'; bar.style.background = '-moz-linear-gradient(0deg, rgba(24,35,41,0.7) 0%, rgba(0,125,92,0.7) 100%)'; bar.style.background = '-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(24,35,41,0.7)), color-stop(100%, rgba(0,125,92,0.7)))'; bar.style.background = '-webkit-linear-gradient(0deg, rgba(24,35,41,0.7) 0%, rgba(0,125,92,0.7) 100%)'; bar.style.background = '-o-linear-gradient(0deg, rgba(24,35,41,0.7) 0%, rgba(0,125,92,0.7) 100%)'; bar.style.background = '-ms-linear-gradient(0deg, rgba(24,35,41,0.7) 0%, rgba(0,125,92,0.7) 100%)'; bar.style.background = 'linear-gradient(90deg, rgba(24,35,41,0.7) 0%, rgba(0,125,92,0.7) 100%)'; bar.style.background = 'linear-gradient(90deg, rgba(24,35,41,0.7) 0%, rgba(0,125,92,0.7) 100%);'; bar.style.borderBottom = '1px solid #4D774B'; bar.style.position = 'fixed'; bar.style.zIndex = 1; bar.style.textAlign = 'center'; document.body.appendChild ( bar ); digitalClock.style.color = "#ffffff"; digitalClock.style.position = 'absolute'; digitalClock.style.textAlign = 'center'; digitalClock.style.zIndex = 2; digitalClock.style.fontFamily = "arial"; digitalClock.style.fontSize = "26px"; digitalClock.style.left = "50%"; digitalClock.style.textShadow = "2px 2px 4px rgba(0,255,224,0.71)"; hours.innerHTML = "00"; minutes.innerHTML = "00"; seconds.innerHTML = "00"; digitalClock.appendChild ( hours ); digitalClock.appendChild ( document.createTextNode( ":" ) ); digitalClock.appendChild ( minutes ); digitalClock.appendChild ( document.createTextNode( ":" ) ); digitalClock.appendChild ( seconds ); bar.appendChild ( digitalClock ); digitalClock.style.marginLeft = "-" + digitalClock.offsetWidth / 2 + "px"; var info = document.createElement ( 'div' ); info.style.position = 'fixed'; info.style.zIndex = 1; info.style.textAlign = 'left'; info.style.color = '#ffffff'; info.style.fontSize = '14px'; info.style.left = '10px'; info.style.top = '50px'; info.style.fontFamily = 'arial'; info.style.lineHeight = '18px'; info.innerHTML = '<p>Look for a location or use Latitude and Longitude.</p><p>Use arrow keys or drag to rotate.</p><p>Double click to zoom.</p><a style="color: #ffffff; text-decoration: none; font-size: 14px;" href="https://twitter.com/vahidseo">@VahidSEO</a>' document.body.appendChild ( info ); license.style.position = "absolute"; license.style.zIndex = 2; license.style.bottom = "5px"; license.style.right = "5px"; license.style.color = "#ffffff"; license.style.fontSize = "11px"; license.style.textAlign = "right"; license.innerHTML = '<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png" /></a><br />This work is licensed under a <a style="color: #ffffff; text-decoration: none; font-size: 11px; border-bottom: 1px dotted #ffffff;" rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.'; document.body.appendChild ( license ); latInput.placeholder = 'Latitude'; longInput.placeholder = 'Longitude'; locInput.placeholder = 'Location'; locInput.style.float = 'left'; locSubmit.style.float = 'left'; latInput.style.float = 'right'; longInput.style.float = 'right'; locSubmit.style.width = locSubmit.style.height = '18px'; locSubmit.style.background = '#ffffff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjMxLjYwM3B4IiBoZWlnaHQ9IjMxLjYwM3B4IiB2aWV3Qm94PSIwIDAgMzEuNjAzIDMxLjYwMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuNjAzIDMxLjYwMzsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik03LjcwMywxNS45NzNjMCwwLDUuNjUxLTUuNjI1LDUuNjUxLTEwLjMyMUMxMy4zNTQsMi41MywxMC44MjQsMCw3LjcwMywwUzIuMDUyLDIuNTMsMi4wNTIsNS42NTINCgkJCUMyLjA1MiwxMC42MTQsNy43MDMsMTUuOTczLDcuNzAzLDE1Ljk3M3ogTTQuNzU4LDUuNjUyYzAtMS42MjgsMS4zMTktMi45NDYsMi45NDUtMi45NDZzMi45NDUsMS4zMTgsMi45NDUsMi45NDYNCgkJCWMwLDEuNjI2LTEuMzE5LDIuOTQ0LTIuOTQ1LDIuOTQ0UzQuNzU4LDcuMjc4LDQuNzU4LDUuNjUyeiIvPg0KCQk8cGF0aCBkPSJNMjguNTksNy42NDNsLTAuNDU5LDAuMTQ2bC0yLjQ1NSwwLjIxOWwtMC42OTIsMS4xMDZsLTAuNTAxLTAuMTZsLTEuOTUzLTEuNzZsLTAuMjg1LTAuOTE1bC0wLjM3Ny0wLjk3N0wyMC42MzksNC4yDQoJCQlsLTEuNDQ2LTAuMjgzTDE5LjE1OSw0LjU4bDEuNDE4LDEuMzg0bDAuNjk0LDAuODE3bC0wLjc4MiwwLjQwOGwtMC42MzYtMC4xODhsLTAuOTUxLTAuMzk2bDAuMDMzLTAuNzY5bC0xLjI1LTAuNTE0TDE3LjI3LDcuMTI2DQoJCQlsLTEuMjU4LDAuMjg2bDAuMTI1LDEuMDA3bDEuNjM4LDAuMzE2bDAuMjg0LTEuNjA5bDEuMzUzLDAuMjAxbDAuNjI5LDAuMzY4aDEuMDExbDAuNjksMS4zODRsMS44MzMsMS44NTlsLTAuMTM0LDAuNzIzDQoJCQlsLTEuNDc4LTAuMTg5bC0yLjU1MywxLjI4OWwtMS44MzgsMi4yMDVsLTAuMjM5LDAuOTc2aC0wLjY2MWwtMS4yMjktMC41NjZsLTEuMTk0LDAuNTY2bDAuMjk3LDEuMjYxbDAuNTItMC42MDJsMC45MTMtMC4wMjcNCgkJCWwtMC4wNjQsMS4xMzJsMC43NTcsMC4yMmwwLjc1NiwwLjg1bDEuMjM0LTAuMzQ3bDEuNDEsMC4yMjJsMS42MzYsMC40NDFsMC44MTksMC4wOTVsMS4zODQsMS41NzNsMi42NzUsMS41NzRsLTEuNzI5LDMuMzA2DQoJCQlsLTEuODI2LDAuODQ5bC0wLjY5MywxLjg4OWwtMi42NDMsMS43NjVsLTAuMjgyLDEuMDE5YzYuNzUzLTEuNjI3LDExLjc3OS03LjY5MywxMS43NzktMTQuOTUNCgkJCUMzMS4xOTQsMTMuMDM4LDMwLjIzNCwxMC4wOSwyOC41OSw3LjY0M3oiLz4NCgkJPHBhdGggZD0iTTE3LjU3MywyNC4yNTNsLTEuMTItMi4wNzhsMS4wMjgtMi4xNDZsLTEuMDI4LTAuMzExbC0xLjE1Ni0xLjE1OWwtMi41Ni0wLjU3M2wtMC44NS0xLjc3OXYxLjA1N2gtMC4zNzVsLTEuNjI1LTIuMjAzDQoJCQljLTAuNzkzLDAuOTQ5LTEuMzk1LDEuNTU1LTEuNDcsMS42MjlMNy43MiwxNy4zODRsLTAuNzEzLTAuNjc3Yy0wLjE4My0wLjE3Ni0zLjQ1OC0zLjMxNS01LjA3Ny03LjEzDQoJCQljLTAuOTY2LDIuMDA5LTEuNTIsNC4yNTItMS41Miw2LjYzYzAsOC41MDIsNi44OTEsMTUuMzk2LDE1LjM5MywxNS4zOTZjMC42NTQsMCwxLjI5Ni0wLjA1NywxLjkzMS0wLjEzNWwtMC4xNjEtMS44NjQNCgkJCWMwLDAsMC43MDctMi43NywwLjcwNy0yLjg2M0MxOC4yOCwyNi42NDYsMTcuNTczLDI0LjI1MywxNy41NzMsMjQuMjUzeiIvPg0KCQk8cGF0aCBkPSJNMTQuNTg2LDMuNzY4bDEuMTMzLDAuMTg3bDIuNzUtMC4yNThsMC43NTYtMC44MzRsMS4wNjgtMC43MTRsMS41MTIsMC4yMjhsMC41NTEtMC4wODMNCgkJCWMtMS45OTEtMC45MzctNC4yMDctMS40NzktNi41NTMtMS40NzljLTEuMDk2LDAtMi4xNiwwLjEyOC0zLjE5MSwwLjM0NWMwLjgwMSwwLjg3NSwxLjM3NywxLjk1OCwxLjYyMiwzLjE2M0wxNC41ODYsMy43Njh6DQoJCQkgTTE2LjQ1MywyLjM0M2wxLjU3My0wLjg2NWwxLjAwOSwwLjU4MmwtMS40NjIsMS4xMTNsLTEuMzk0LDAuMTQxTDE1LjU1LDIuOTA3TDE2LjQ1MywyLjM0M3oiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==)'; locSubmit.style.backgroundSize = 'contain'; locSubmit.style.cursor = 'pointer'; locSubmit.style.margin = locInput.style.margin = longInput.style.margin = latInput.style.margin = '5px 0px'; locInput.style.margin = longInput.style.margin = latInput.style.margin = '5px'; locSubmit.style.border = locInput.style.border = longInput.style.border = latInput.style.border = '1px solid transparent'; locSubmit.style.color = locInput.style.color = longInput.style.color = latInput.style.color = '#1F5A07'; locSubmit.style.borderRadius = locInput.style.borderRadius = longInput.style.borderRadius = latInput.style.borderRadius = '20px'; locInput.value = 'Shiraz, Fars, Iran'; longInput.value = 52.5333; latInput.value = 29.6167; bar.appendChild ( locInput ); bar.appendChild ( locSubmit ); bar.appendChild ( longInput ); bar.appendChild ( latInput ); locSubmit.addEventListener ( "click", getCoordinate ); locInput.addEventListener ( "keypress", function( event ) { key = ( event.keyCode || window.event.keyCode ); if ( key === 13 ){ getCoordinate (); } return false; } ); getTime (); timePass (); showEarth ();
}
showEarth = function () { var dayTexture = new Image(), nightTexture = new Image(), mixedTexture = document.createElement ( 'canvas' ), tmpNight = document.createElement ( 'canvas' ); dayTexture.crossOrigin = 'anonymous'; nightTexture.crossOrigin = 'anonymous'; dayTexture.src = 'https://29d5a8150cbf9415b373b36fddebb3cbffc99e85.googledrive.com/host/0B-0uZjFdGZ8KUGUwektzVjFVVjQ/day.jpg'; nightTexture.src = 'https://29d5a8150cbf9415b373b36fddebb3cbffc99e85.googledrive.com/host/0B-0uZjFdGZ8KUGUwektzVjFVVjQ/night.jpg'; textureCtx = mixedTexture.getContext ( '2d' ); tmpNightCtx = tmpNight.getContext ( '2d' ); var dayReady = false, nightReady = false; dayTexture.onload = function () { mixedTexture.width = dayTexture.width; mixedTexture.height = dayTexture.height; textureCtx.drawImage ( dayTexture, 0, 0 ); dayReady = true; } nightTexture.onload = function () { tmpNight.width = dayTexture.width / 2 + 20; tmpNight.height = dayTexture.height; nightReady = true; } animateTexture (); var xFrame = dayTexture.width; var imgData; var zeroLat, zeroLong, locLat, locLong; function animateTexture () { requestAnimFrame ( animateTexture ); var UTCd = new Date (); var UTCmins = UTCd.getUTCHours () * 60 + UTCd.getUTCMinutes (); if ( nightReady && dayReady ) { //fail-safe mixedTexture.width = dayTexture.width; mixedTexture.height = dayTexture.height; textureCtx.drawImage ( dayTexture, 0, 0 ); tmpNight.width = dayTexture.width / 2 + 20; tmpNight.height = dayTexture.height; xFrame = dayTexture.width - ( ( UTCmins * dayTexture.width / 1440 ) + dayTexture.width * 3 / 4 ); if ( xFrame < 0 ) { xFrame = dayTexture.width + xFrame; } if ( xFrame > dayTexture.width ) { xFrame = xFrame - dayTexture.width; } xFrame = Math.round ( xFrame ); tmpNightCtx.clearRect ( 0, 0, dayTexture.width / 2 + 20, dayTexture.height ); tmpNightCtx.drawImage ( nightTexture, xFrame, 0, dayTexture.width - xFrame, dayTexture.height, 0, 0, dayTexture.width - xFrame, dayTexture.height ); if ( dayTexture.width / 2 - ( dayTexture.width - xFrame ) + 20 >= 0 ) { tmpNightCtx.drawImage ( nightTexture, 0, 0, dayTexture.width / 2 - ( dayTexture.width - xFrame ) + 20, dayTexture.height, dayTexture.width - xFrame, 0, dayTexture.width / 2 - ( dayTexture.width - xFrame ) + 20, dayTexture.height ); } else { tmpNightCtx.drawImage ( nightTexture, 0, 0, dayTexture.width + ( dayTexture.width / 2 - ( dayTexture.width - xFrame ) + 20 ), dayTexture.height, dayTexture.width - xFrame, 0, dayTexture.width + ( dayTexture.width / 2 - ( dayTexture.width - xFrame ) + 20 ), dayTexture.height ); } tmpNightCtx.globalCompositeOperation = "xor"; var leftGradient = tmpNightCtx.createLinearGradient ( 0, 0, 20, 0 ); leftGradient.addColorStop ( 0,"rgba(0,0,0,1)" ); leftGradient.addColorStop ( 1,"rgba(0,0,0,0)" ); tmpNightCtx.fillStyle = leftGradient; tmpNightCtx.fillRect ( 0, 0, 20, dayTexture.height ); var rightGradient = tmpNightCtx.createLinearGradient ( dayTexture.width / 2, 0, dayTexture.width / 2 + 20, 0 ); rightGradient.addColorStop ( 0,"rgba(0,0,0,0)" ); rightGradient.addColorStop ( 1,"rgba(0,0,0,1)" ); tmpNightCtx.fillStyle = rightGradient; tmpNightCtx.fillRect ( dayTexture.width / 2, 0, 20, dayTexture.height ); textureCtx.clearRect ( 0, 0, dayTexture.width, dayTexture.height ); textureCtx.drawImage ( dayTexture, 0, 0 ); textureCtx.drawImage ( tmpNight, xFrame, 0 ); if ( xFrame > dayTexture.width / 2 ) { textureCtx.drawImage ( tmpNight, xFrame - dayTexture.width, 0 ); } zeroLat = dayTexture.height / 2; zeroLong = dayTexture.width / 2; if ( ( parseInt ( latInput.value ) >= -90 ) && ( parseInt ( latInput.value ) <= 90 ) ) { locLat = latInput.value; } else { locLat = 0; } if ( ( parseInt ( longInput.value ) >= -180 ) && ( parseInt ( longInput.value ) <= 180 ) ) { locLong = longInput.value; } else { locLong = 0; } locLat = -locLat * ( dayTexture.height / 2 ) / 90; locLong = locLong * ( dayTexture.width / 2 ) / 180; textureCtx.beginPath(); textureCtx.moveTo ( zeroLong + locLong, zeroLat + locLat - 10 ); textureCtx.lineTo ( zeroLong + locLong, zeroLat + locLat + 10 ); textureCtx.lineWidth = 1; textureCtx.strokeStyle = '#ffffff'; textureCtx.stroke(); textureCtx.beginPath(); textureCtx.moveTo ( zeroLong + locLong - 10, zeroLat + locLat ); textureCtx.lineTo ( zeroLong + locLong + 10, zeroLat + locLat ); textureCtx.lineWidth = 1; textureCtx.strokeStyle = '#ffffff'; textureCtx.stroke(); textureCtx.beginPath(); textureCtx.moveTo ( zeroLong + locLong, zeroLat + locLat - 2 ); textureCtx.lineTo ( zeroLong + locLong, zeroLat + locLat + 3 ); textureCtx.lineWidth = 6; textureCtx.strokeStyle = '#ff0000'; textureCtx.stroke(); textureCtx.closePath() textureCtx.beginPath(); textureCtx.moveTo ( zeroLong + locLong, zeroLat + locLat - 1 ); textureCtx.lineTo ( zeroLong + locLong, zeroLat + locLat + 1 ); textureCtx.lineWidth = 2; textureCtx.strokeStyle = '#ffff00'; textureCtx.stroke(); } } var scene = new THREE.Scene (); var camera = new THREE.PerspectiveCamera ( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 1000; var particleCount = 300, particles = new THREE.Geometry (), pMaterial = new THREE.PointCloudMaterial ( { color: 0xFFFFFF, size: 4 } ); for ( p = 0; p < particleCount; p++ ) { var pX = Math.random() * 3 * window.innerWidth - window.innerWidth * 3 / 2, pY = Math.random() * 3 * window.innerHeight - window.innerHeight * 3 / 2, pZ = Math.random() * 50, particle = new THREE.Vector3 ( pX, pY, pZ ); particles.vertices.push ( particle ); } var particleSystem = new THREE.PointCloud ( particles, pMaterial ); scene.add ( particleSystem ); var geometry = new THREE.SphereGeometry( 350, 100, 100 ); var texture = new THREE.Texture ( mixedTexture ); texture.wrapS = THREE.RepeatWrapping; texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 1, 1 ); var material = new THREE.MeshBasicMaterial ( { map: texture } ); var sphere = new THREE.Mesh ( geometry, material ); scene.add ( sphere ); var light = new THREE.PointLight ( 0xffffee, 1, 100 ); light.position.set ( 500, 1000, 50 ); scene.add ( light ); renderer = new THREE.WebGLRenderer ( { antialias: true } ); renderer.setSize ( window.innerWidth, window.innerHeight ); renderer.setClearColor( 0x000000, 1 ); document.body.appendChild ( renderer.domElement ); renderer.domElement.style.position = 'absolute'; renderer.domElement.zIndex = 0; animate (); sphere.rotation.y = -2.2; sphere.rotation.x = 0.2; stop = false; var zoom = false;; document.ondblclick = function () { if ( zoom ) { zoomOut (); zoom = false; } else { zoomIn (); zoom = true; } } document.onkeydown = function ( event ) { var key = ( event.keyCode || window.event.keyCode ); switch ( key ) { case 38: animateTop ( 1000 ); break; case 39: animateRight ( 1000 ); break; case 40: animateBottom ( 1000 ); break; case 37: animateLeft ( 1000 ); break; } }; document.onkeyup = function () { stopRotationAnimation (); stop = true; }; var clickX, clickY, mouseX, mouseY; var mouseUp = true; function drag () { document.onmousemove = function ( event ) { if( !mouseUp ) { event = event || window.event; var mouseX = event.screenX, mouseY = event.screenY; if ( mouseX - clickX > 0 ) { animateRight ( mouseX - clickX ); } if ( mouseX - clickX < 0 ) { animateLeft ( - mouseX + clickX ); } if ( mouseY - clickY > 0 ) { animateBottom ( mouseY - clickY ); } if ( mouseY - clickY < 0 ) { animateTop ( - mouseY + clickY ); } document.body.style.cursor = 'move'; } } } document.onmousedown = function ( event ) { mouseUp = false; event = event || window.event; clickX = event.screenX, clickY = event.screenY; drag (); } document.onmouseup = function () { stopRotationAnimation (); mouseUp = true; document.body.style.cursor = 'default'; } function zoomIn () { if ( camera.position.z > 700 ) { requestAnimFrame ( zoomIn ); camera.position.z -= 5; } else { camera.position.z = 700; } } function zoomOut () { if ( camera.position.z < 1000 ) { requestAnimFrame ( zoomOut ); camera.position.z += 5; } else { camera.position.z = 1000; } } function stopRotationAnimation () { requestAnimFrame ( stopRotationAnimation ); sphere.rotation.x += 0; sphere.rotation.y += 0; stop = true; } function animate () { requestAnimFrame ( animate ); renderer.render ( scene, camera ); texture.needsUpdate = true; stopRotationAnimation (); } function animateTop ( distance ) { distance = typeof distance !== 'undefined' ? distance : 80; if ( !stop ) { requestAnimFrame ( animateTop ); } sphere.rotation.x -= distance / 10000; } function animateBottom ( distance ) { distance = typeof distance !== 'undefined' ? distance : 80; if ( !stop ) { requestAnimFrame ( animateBottom ); } sphere.rotation.x += distance / 10000; } function animateRight ( distance ) { distance = typeof distance !== 'undefined' ? distance : 80; if ( !stop ) { requestAnimFrame ( animateRight ); } sphere.rotation.y += distance / 10000; } function animateLeft ( distance ) { distance = typeof distance !== 'undefined' ? distance : 80; if ( !stop ) { requestAnimFrame ( animateLeft ); } sphere.rotation.y -= distance / 10000; } stopRotationAnimation ();
}
Developer | Vahid |
Username | vahidseo |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 8,066 Kb |
Views | 24,288 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
3D Electric Guitar Distortion Pedal | 9,023 Kb |
Text masking image with JavaScript | 28,997 Kb |
Mouse movement parallax effect | 2,949 Kb |
HTML5 Canvas Heart Monitor | 2,116 Kb |
Pure CSS3 cocktail and Martini logo | 34,773 Kb |
Simple Extensible Marquee Bar | 2,756 Kb |
Website Loading Screen | 2,943 Kb |
Pure CSS3 rotating Bayern Munich logo | 2,676 Kb |
Shining image | 19,302 Kb |
Optical Glass | 2,660 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 Kb |
The Fantastic Mr Fox | MalZiiirA | 10,435 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
3D flipping card | Ssaakkaa | 2,238 Kb |
A Pen by panstable | Panstable | 2,940 Kb |
Clock Face Idea | Chrisburnell | 3,196 Kb |
Dice | Fraina | 5,026 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!