Three.js を簡単に使ってみる

- Contents -

1 コードはたったのこれだけ。。。
2 ブラウザで実行してみる
3 ヘルパー
4 おしまい

このブログのPVをあげたくて、色々試してみてはいるものの、
まだまだ記事の数が少ないのでこれからも頑張って書いていきたい。

また、最低限でも2000字以上の記事にしておかないと、
Googleの検索エンジンに有益な情報として認識されないという噂を耳にした。

なので、頑張ってた2000字以上は書くように心がけようと思います。

2000字かぁ〜

より丁寧に書く事を意識したら、なんとかいけるんじゃなかろうかと。

ということで、
今回はThree.js を使って3D表示をやってみようと思います。
さっそくですが、

コードはたったのこれだけ。。。

まず、適当にローカルにHTMLファイルを作ろう。(test.htmlとかね)

最低限必要なコードはこれだけ！

<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.2.0.min.js"
            integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
            crossorigin="anonymous"></script>

    <!-- Three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js" ></script>

    <script>
    // ドキュメントロード後の処理
    $(function(){
        $mainFrame = $("#main-frame");

        // シーン、カメラ、レンダラを生成
        var scene    = new THREE.Scene();
        var camera   = new THREE.PerspectiveCamera( 75, $mainFrame.width()  / $mainFrame.height(), 0.1, 1000 );
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( $mainFrame.width(), $mainFrame.height() );
        camera.position.z = 5;
                camera.position.y = 1;

        // 自動生成されたcanvas要素をdivへ追加する。
        $mainFrame.append(  renderer.domElement )

        // ここらへんは好きなオブジェクトをシーンに突っ込んじゃってください。
        var geometry = new THREE.BoxGeometry( 1, 1, 1 );
        var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
        var cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        // コールバック関数 render をrequestAnimationFrameに渡して、
        // 繰り返し呼び出してもらう。
        var render = function () {
            window.requestAnimationFrame( render );
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };
        render();
    });
    </script>
</head>

<body>
    <h2>Three.js TEST</h2>
    <div id="main-frame" style="width:600px; height:400px; background-color:lightskyblue"></div>
</body>
</html>

jQueryはなくてもいいけど、あると便利なので自分はいつも追加します。

three.js もスクリプトタグで埋め込んでいますが、
CDNを利用しているので、HTMLファイル単体で実行できます。

とても簡素ですね。

threejsの処理は、HTMLドキュメントが読み込まれた後に処理を実行させます。

jQueryを使うのであれば、
$( ~ ) 内にファンクションを書けば、HTMLドキュメント読み込み後に実行されるものとなります。

前回の記事でも紹介したとおり (Three.js の基本)
レンダラー、シーン、カメラを生成して、
3D空間に配置したいオブジェクトをシーンに追加する。
さらにレンダラーにシーンとカメラを渡してレンダリングしています。

あと、レンダラーが内部で自動にcanvas要素を生成してくれています。
renderer.domElement というのが自動生成されたcanvasのDOM要素となります。
この要素を好きなところにappendするのです。

今回はDiv要素に追加しているが、Boby要素に追加する事もできる為、
実装によってはBodyに何も記述する必要がないですよ。

詳細は、threejs.org のドキュメントに簡単なコードが書かれているので試してみるのがよかです。

ブラウザで実行してみる

ローカルに作成したHTMLファイルは、
Chromeで実行すると問題なく動作するはずです。

必要なライブラリは、CDNを使って、scriptに埋め込んでいるので、単体のファイルだけで動作します。

今回は、そのままで動作するはずですが、
もし、テクスチャ画像を読み込む必要があるような場合は、以下のようなエラーが発生するかと思います。

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Webサーバーを立てるか、Chromeに下記のオプションをつけて起動すれば、動作はします。

ブラウザの起動オプションを変更して対応する
--allow-file-access-form-files

Macならこっち
sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args -allow-file-access-from-files

個人的には、PythonとかRubyで簡易サーバーたてた方がラクだよね。
python -m SimpleHTTPServer

ヘルパー

デフォルトのシーンでは、
真っ暗な3D空間に何もない状態です。

球体とか、ボックスとか配置していくのですが、
実装していると天地や、距離感がわからなくなってしまう。

threejsでは、xyzの向きを表すAxisHelperと、
空間をわかりやすくする為のGridHelperなどが予め用意されている。

これらはオブジェクトと同じように、シーンに追加する事で描画できる。

// Asixヘルパー
axisHelper = new THREE.AxisHelper(10);
scene.add(axisHelper);

// Gridヘルパー
gridHelper = new THREE.GridHelper(20, 5);
scene.add(gridHelper);

おしまい

ソースコード載せると余裕で2000文字超えるんだねｗ

まだまだ続くよ〜。。。

tyablog.net

Three.js を簡単に使ってみる

コードはたったのこれだけ。。。

ブラウザで実行してみる

ヘルパー

おしまい

いいね:

1件のコメント

コメントを残すコメントをキャンセル

コードはたったのこれだけ。。。

ブラウザで実行してみる

ヘルパー

おしまい

共有:

いいね:

1件のコメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル