へっぽこエンジニアのへっぽこ道場

サービス作りたいエンジニアが色々見て体験したことを発信

初心者VR・3Dチャレンジ1

何をやるのか

javascriptで3Dをやってみたい

やってみた

参考情報

ics.media

three.jsとは

Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリ

threejs.org

基本的な考え方

  • 3Dモデルを置くキャンバスを作成
  • 立体的に見るためにどこの視点(x,y,z軸)から撮影するか設定
  • 光源の設定
  • 3dオブジェクト生成
  • アニメーションの設定

なんか作ってみた

https://codepen.io/tagajun0303/pen/WNRybEx

https://codepen.io/tagajun0303/pen/OJWEVyb

他にもいろいろできるよ

1からいろいろ学べる

ics.media

blender + three.js

入門

qiita.com

liginc.co.jp

3dデザイン参考サイト

sankoudesign.com

www.awwwards.com

問題

3d作って色々やるにはちょっとハードルが高い....

ちょっと自由に障るためには、色々と学ばないといけないことが多い.....

いい方法はないものか.....

解決策:Cables.gl

note.com

ノーコード(ローコード)で3dアニメーションなどを作成できるツール

ドキュメントが一番情報がわかりやすかった

メリット

  • 学習コストが低そう
  • 手軽に作れる
  • htmlに変換できる(monacaでも利用できるかも)

デメリット

  • 日本語の情報がほぼない....
    • UGに参加したほうがいいのかも

少し利用してみた

  • 左の枠に設定を追加して、何に対してどういう順番で行うのかつなげていくとアニメーションやゲームなどが作成できる

ics.media

  • エクスポートするとhtmlとjsファイルが出力されるのでmonacaでも利用できそう
    • htmlとjdファイルを取り込めば行けそう( 他のファイルは関係なさそうなファイルなので無視していいと思う )