1function updateClock(){
 2  timeParts = new Date().toLocaleTimeString().split(" ")
 3  document.getElementById("clock").innerHTML = timeParts[0];
 4  const timeSuffixDiv = document.createElement("div");
 5  timeSuffixDiv.id = "time-suffix"
 6  timeSuffixDiv.innerHTML = timeParts[1]
 7  document.getElementById("clock").appendChild(timeSuffixDiv);
 8  const dateDiv = document.createElement("div");
 9  dateDiv.id = "clock-date"
10  dateDiv.innerHTML = String(new Date()).split(" ").slice(0,4).join(" ")
11  document.getElementById("clock").appendChild(dateDiv);
12}
13
14setInterval(updateClock,1000);
15
16var bgColor = 0x000000;
17// 参考：
18// Processingで三角関数を使って球体を作る - Processing中毒者の嘔吐物
19// http://p5aholic.hatenablog.com/entry/2015/06/15/194250
20// シーン作るぞ
21var scene = new THREE.Scene();
22// scene.fog = new THREE.FogExp2(bgColor, 0.004);
23
24// カメラ作る
25var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
26camera.position.set(0,0,250);
27
28// レンダラ作る
29var renderer = new THREE.WebGLRenderer({
30  antialias:true
31});
32renderer.setClearColor( bgColor );
33renderer.setSize(window.innerWidth, window.innerHeight);
34renderer.domElement.id = "globe-render";
35document.getElementById("container").appendChild(renderer.domElement);
36
37// グループつくる
38var group = new THREE.Object3D();
39
40// 半径
41var radius = 120;
42var separation = 20;
43var globeSpeed = 0.1;
44
45for ( var s = 0; s <= 180; s+=separation ) {
46  // 0 <= s <= 180, なんで -1 <= Math.cos(radianS) <= 1
47  // なんで zが -radius <= z <= radius
48  var radianS = s*Math.PI / 180;
49  var pZ = radius * Math.cos(radianS);
50
51  // 円に沿って点描く
52  for ( var t = 0; t < 360; t+=separation ) {
53    // 角度をラジアンに
54    var radianT = t*Math.PI / 180;
55    // 点の座標を計算
56    // sin(radianS)は0→1→0の順で変化する
57    // radius * sin(radianS)は0→200→0になる
58    var pX = radius* Math.sin(radianS) * Math.cos(radianT);
59    var pY = radius* Math.sin(radianS) * Math.sin(radianT);
60
61    var geometory = new THREE.SphereGeometry(1.5,6,6);
62    var material = new THREE.MeshBasicMaterial({
63      color: 0xf5f5f5
64    });
65    var mesh = new THREE.Mesh(geometory, material);
66    mesh.position.x = pX;
67    mesh.position.y = pY;
68    mesh.position.z = pZ;
69    group.add(mesh);
70  }
71
72}
73
74scene.add(group);
75
76// 毎フレームアップデートするぞ
77function update() {
78  // グループを回転
79  var rotateX = group.rotation.x + 0.002*globeSpeed;
80  var rotateY = group.rotation.y + 0.005*globeSpeed;
81  var rotateZ = group.rotation.z + 0.01*globeSpeed;
82  group.rotation.set( rotateX, rotateY, rotateZ );
83
84  // レンダリング
85  camera.lookAt(scene.position);
86  renderer.render(scene,camera);
87
88  // 次のアニメーション呼び出す
89  requestAnimationFrame(update);
90}
91update();