はじめに
たまに趣味でBlenderを使ったCGモデリングを楽しんでいるんですけど、ある日、
「WebでCGできないのか？」
と思って、調べたらThree.jsとかいう革命的なライブラリを見つけてしまいました。
ただ、時間がなくてずっとやろうやろうと思ってやっていなくて、ついこの間やってみたので記事を書いてみます。
(もしかしたら、後日追記するかも？)
とりあえずQiitaで調べる
Three.jsのチュートリアルを書いてる人がいないかなと思い、いつも通りQiitaで調べたところ、
これを発見しやってみることにしました。
この方のチュートリアル、分かりやすくてとても良かったのですが、記事が少し古く最新バージョンでは使えないコードがあったので、修正点を以下に載せます。また、補足も載せておきます。
修正点
-
<script src="three.js"></script>を削除 -
<script src="index.js"></script>を<script type="module" src="index.js"></script>に変更 - index.jsの一番上に
import * as THREE from "./three.js-master/build/three.module.js";を追加 -
AxisHelperをAxesHelperに変更
補足
- この記事で作ったカメラから見ると、右がx軸、上がy軸、手前がz軸になっている
次は...
公式ドキュメントで練習しようと思います。
と言って、まだほぼやっていない
やっぱり先ほどの記事が古かったのか、ドキュメントの方のやり方は記事とは違うものでした。
Qiitaの記事だとこれも良いかも？