はてなブックマーク

three.jsはjavascriptで簡単に3D表現を行うためのライブラリです。 今回はこれを使って、立方体を転がすアニメーションを作っていきます。 ※説明の都合上GIFアニメを多用するためご注意ください。 作成したもの はじめに 使用するライブラリ three.js(r86) OrbitControls.js(three.jsのプラグイン) CDNには上がってなかったのでGistから直接参照 es6-tween(v3.6.0) 1. 初期設定 以下の記事を参考にThree.jsの初期設定を行います。 【Qiita】three.jsで3Dを作りたい！ 以降は、今回追加する設定です。 グリッド配置 cubeのサイズに合わせてグリッド(床部分)を表示します。 var cube_size = 1; // cubeのサイズ var grid_count = 10; // グリッドの分割数 var