Three.js入門 3 - Three.jsとCANNON.jsを組み合わせて、地面を作ってみる

なにはともあれ地面を作ってみます。

参考にするのは👇 blog.codecamp.jp

three.jsとcannon.jsを組み合わせて、地面を作ってみます。

Download

three.js

👇らへんから落としてきます。 three.js - Javascript 3D library

pugファイルに追記します。

script(src='vendor/js/three.min.js')

npm scriptを追加

cpxを yarn add cpx -D して入れます。そして、three.jsを適当な場所に配置したら、それらをpublic以下にコピーするようにします。

"build:copy": "cpx \"./src/vendor/**/{*.html,*.js,*.eot,*.svg,*.ttf,*.woff,package.json}\" ./public/vendor/",

また👆はyarn startに追記します。

cannon.js

👇を見ていれます。 基本的にはthree.jsと同じことをします。 www.cannonjs.org

yarn startして、three.min.jsやcannon.min.jsがDLされていたらOKです。

なんやかんやでできたもの

空間に地面を設置出来ました！

詳しくはまた。