Three.jsの作品例(サイトトップアニメーション)

当サイトトップのアニメーションです．Three.jsというJavaScriptのライブラリを使っています．

$xyz$ 空間を設定して，THREE.PointsMaterialで宇宙空間に20000個の星屑をランダムに配置させます．

(-450, 0, 0)に(ほぼ原点に)Change the future with mathematicsを配置．

数学にまつわる多面体を，(-1100 + Math.random() * 2200, -300 +Math.random() * 600, 350 + Math.random() * 2000)にランダムに設置．色もランダムに決まります．

カメラは常に原点を見るようにし，カメラは

$\begin{cases} x = 1200\sin(t-0.5) \\ y = 300\sin(1.5t -0.5) \\ z = 2200 + 800\cos(t -0.5)\end{cases}$

で表される曲線上を移動．$xy$ 平面で見るとリサージュ曲線．$xz$ 平面で見ると楕円になっています．