コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

3JSに手を出した話

Three.js
3年JS

はい。おはようございます。僕です。今日も手を出してしまった話をしていこうと思います。やっぱりこのブログの読者層はそういうアレな感じな話好きだと思うのですよ（偏見）。ですので、手を出した話をしていこうと思います。ちなみになんですが、はてなブログはアダルトな話はアウトなのでとても健全な話をします。いいね？


はい。僕がここんとこいじっている某学習サイトでいつかいじろうと思ってたライブラリの講座やってたんでそれの話とかしたりしなかったりしようと思います。

コレ
threejs.org
今日はコレの話です。

three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリ及びアプリケーションプログラミングインタフェースである。

Wikiより

これが何かといいますとこんなやつです。ブラウザに3Dを描画してくれるやつです。今までずっと3D触りたいなーって思ってたんですけど、立方体いじってばっかでそれ以上先に進む機会なかったんですよね……。


これを使うと例えばこんなんできます。


以下ソースコード

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

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

やっているノリとしては、全体のシーンを作って、オブジェクト置いてカメラと照明*1を置いてやるとかそんなことやってます。

ちょうどBlenderの下の画面にあるようなことをコードでなんやかんややっている感じですね。
f:id:andron:20200501230738p:plain


んで、ここまではいいんですよ……。ここから自分で作ったモデルとか読み込ませたいじゃないですか。そこで僕は挫折というか面倒くせーってなって全然いじってなかったんですよね。

何が面倒なのかといいますと、モデルをつくる場合は自作しないといけない。よそから借りてくる場合規約が面倒くさい。といった感じです。あとThree.js バージョンによって差異が激しくて少し古いバージョンでもうまく読み込んでくれないとかあったり、普通のブラウザで確認で確認しようにもCORSエラー出すのでサーバー立てないとローカルで確認できないとかそういうのがあったりでなかなかちゃんと入門する機会なかったんですよ。


けども丁度いい機会ができたので手を出してみたのでした。んで、MMDとか取り込んでこんなんできるようになった。
MMD動かしてみた
f:id:andron:20200501232252p:plain
こんな画面でてきます。めちゃくちゃ重いので閲覧の際は覚悟してみてください。コレ、surgeに投げれば完璧じゃねとか思ったけどもデータでかすぎてあげることできなかった…。

利用させてもらったやつ。
「ニコニ立体ちゃん」 / ニコニ立体 さんの作品 - ニコニ立体
MMDって色々面倒くさいものだとばかり思ってた……。


とりあえず僕はこれだけやって満足したのでこれにて終了です。

本来は、もう少しごりごりとやっていくものなんだけどコード書いてカメラいじったりちゃんと動くモデル作ったりとかそういったこともろもろ考えると今の色々手を出している感じだとしんどいのでここら辺がブログで投げられる精いっぱいです。ただ僕が今後触りたい方針として3Dよりなんで、今色々手を出しているのが落ち着いたらやっていこうと思います。


おわり

*1:上のソースコードに照明をつくるとかそんな記述が見当たらないとかそんな突っ込みをしてはいけない

[トップへ]