ズッキーニのプログラミング実験場

プログラミング + アカデミック + 何か面白いこと。 記載されているものは基本的に私が所属する団体とは関係がありません。

   May 29

[Javascript]Three.jsを触る

by zuqqhi2 at 2013年5月29日
Pocket

Three.jsでブラウザ上で3D空間の描画が簡単にできるみたいだ。
threejs.org

簡単に立方体を書いてみる。
以下、ここのまねをして書いてみる。

まずはダウンロード。
ここのbuildディレクトリの中にあるthree.min.jsを使う。

git clone https://github.com/mrdoob/three.js.git

次にhtmlファイルを書く。
どうやらcanvasはthree.jsが作ってくれるみたいですね。

<!DOCTYPE html>
<html>
        <head>
                <title>Cube</title>
                <!-- three.js library -->
                <script src="./three.min.js" type="text/javascript"></script>
                <!-- main processing part -->
                <script src="./main.js" type="text/javascript"></script>
        </head>
        <body>
                <!-- Cube will be drawn here -->
                <div id="canvas"></div>
        </body>
</html>

次はメインのJSを書く。

window.onload = function() {
        // Canvas size
        var width = 640;
        var height = 480;

        // Cube Size
        var geometry = new THREE.CubeGeometry(100, 100, 100);
        // Cube Material Info(not metal)
        var material = new THREE.MeshLambertMaterial({color: 0x0000aa});
        // Create Cube
        var mesh = new THREE.Mesh(geometry, material);
        // Rotate Cube
        mesh.rotation = {x: 0.5, y: 0.5, z: 0.0};

        // Setting Camera
        var camera = new THREE.PerspectiveCamera(40, width / height, 1, 1000);
        // Camera Position
        camera.position.z = -400;
        // Camera Angle
        camera.lookAt(mesh.position);

        // Create Space
        var scene = new THREE.Scene();
        // Add cube to Space
        scene.add(mesh);

        // Create Light element
        var light    = new THREE.DirectionalLight(0xffffff, 1.5);
        // Light element position
        light.position = {x: 0, y: 0.2, z: -1};
        // Add light element to the space
        scene.add(light);

        // Create renderer
        var renderer = new THREE.WebGLRenderer();
        // Set canvas size
        renderer.setSize(width, height);

        // Set canvas to div element
        document.getElementById('canvas').appendChild(renderer.domElement);
        renderer.render(scene, camera);
}

結果はこんな感じ。
結構簡単に書ける♪

Related Posts

  • 2013年5月30日 [Javascript][Three.js]マウス操作 前回の記事のindex.htmlに新規部分を追加した以下のmain.jsを読みこませる。 結果は次のようになる。ドラッグで立方体が回転する。 Three.js面白いな。何か作ってみよう。 I make html file which is previous […]
  • 2013年6月2日 [Backbonejs][Javascript]インストール Backbone.jsの準備 まずは必要なライブラリのダウンロード。 次は、テスト用のhtmlとjsを作成。 動作確認して準備OK! coffee scriptを加えてみる ここを 参考にしてnpmを入れる。 […]
  • <!--:ja-->[node.js]jQuery Deferred を使ってみる<!--:--><!--:en-->[node.js]Try to use jQuery Deferred<!--:-->2013年9月8日 [node.js]jQuery Deferred を使ってみる やりたいこと jQuery […]
  • 2013年5月14日 [Parser][PEG]PEG.jsで遊んでみる 最近、文脈自由文法よりも扱える範囲が広いかもしれないと言われている 分析的形式文法(PEG)に興味があって、リッチなコンフィグファイル用言語を作成するのに使用している。 PEG.jsというPEG用のパーサを生成してくれるjsがgithub上に公開されていて、 これを使 […]
  • 2013年8月18日 [node.js]webサイトのクローリング用ライブラリ cheerio 以下のライブラリを利用する。 requestは対象URLからのデータ取得に用いて、 cheerioはその取得したデータをDOM解析するために使用する。 例えばこんな感じで使用出来る。 I'll use libraries which are […]
  • <!--:ja-->[Javascript][Meteor.js]インストールとHello World<!--:--><!--:en-->[Javascript][Meteor.js]Install and Hello World<!--:-->2015年2月15日 [Javascript][Meteor.js]インストールとHello World Meteor.js Meteor.jsはJavascriptのサーバサイドフレームワークの1つ。 Node.jsをベースにしているが、いろいろと違う。 面白いところは、クライアントとサーバ間でソースコードやDBの内容を共有できるところ。 これのおかげで簡単にWe […]
Pocket

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.