Mechanic Noteをリニューアルしました.

こんにちは、今日も神山は空気も水も美味しいです。

Mechanic Noteでは、WordPressのデフォルトテーマのTwenty Fifteenをそのまま使っていましたが、弊社定期開発MTGメンバーから、一覧性を上げたいという要望が上がっていました。

本来ならテーマを自作して、全部僕らの思い通りにしたいところですが、時間がかかりそうなので暫定的にTwentyFifteenを改造して課題を解決することにしました。

今回行った改修は以下の2点

• Flexboxを使って、記事一覧をタイル状に配置 (一覧性の向上)
• PC版のサイドバーでオートジャイロを飛ばす (遊び)

前者の話は書いてもつまらないので後者の話をします。

普通のWebページにさりげなく3D表現が混じってるのって面白いんじゃないかと思って、いくつか実験をしています。 神山ラボのページや、FUJIROCK EXPRESSの背景など。

今回は、もう少し複雑な3Dモデルを作ってみました。弊社名PILOTにちなんで飛行機、それもちょっと変わったオートジャイロを作ってみました。

モデリングはずぶの素人なのですが、職場の仲間にBlenderの使い方を聞いたりしながら、なんとかそれっぽく見えるモデルを作ったら、JSON形式でジオメトリを書き出して、Three.jsのJSON Loaderを使ってモデルをThree.jsのシーンに読み込みます。JavaScript — External models in Three.jsを参照しました。このとき、ボディーと可動部(ローターとプロペラ)は別々に書き出します。

マテリアルや位置の設定を行ったら、あとはスクロールに合わせてローターとプロペラを回して、機体を前に進ませてカメラに追わせれば、完成です。

var theta = 0;
window.addEventListener("scroll", function () {
  theta = window.scrollY / 500;
  gyro.rotor.rotation.y = -theta * 5;
  gyro.propella.rotation.y = theta * 20;
  grp.position.z = window.scrollY / 30;
  camera.lookAt(grp.position);

  renderer.render(scene, camera);
});

スクロールイベントのリスナ

目立ちすぎると邪魔になるので背景色に溶け込む色で描画しました。

Mechanic Noteはまたいいことを思いつく度に改修していく予定です。お楽しみに！