はじめてのthree.js

巷でWebGLってやつが流行っているらしいので、three.jsを勉強しはじめました。

Three.js – JavaScript 3D Library

jsdo.itで試す分には Add Libraryボタンから three.jsを読み込むだけで簡単につかいはじめることができます。便利ですね。

今回は立方体をぐるぐるまわしてみましょう。
レンダラーをつくって、シーンをつくって、カメラをつくって、立方体をつくって、フレーム毎にぐるぐる回すだけで完成です。

JavaScript

(function(win, doc) {

    "use strict";
    
    var renderer = new THREE.WebGLRenderer(),
        scene = new THREE.Scene(),
        camera = new THREE.PerspectiveCamera(
            60, // 視野角
            465 / 465, // アスペクト比
            1, // near clip
            100 // far clip
        ),
        geometry = new THREE.BoxGeometry(1, 1, 1),
        material = new THREE.MeshLambertMaterial({
            color: 0xcccccc
        }),
        box = new THREE.Mesh(geometry, material),
        light = new THREE.PointLight();
    
    camera.position.set(3, 3, 3);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    
    light.position.set(0, 1, 2);
    
    scene.add(box);
    scene.add(light);
    
    renderer.setSize(465, 465);
    document.body.appendChild(renderer.domElement);
    
    (function render() {
        box.rotation.x += 0.01;
        box.rotation.y += 0.01;
        box.rotation.z+= 0.01;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    })();
    
})(this, document);

DEMO

表面に画像を貼ることもできます。

// forked from kimmy's "はじめてthree.js" http://jsdo.it/kimmy/6eWM
(function(win, doc) {

    "use strict";
    
    var renderer = new THREE.WebGLRenderer(),
        scene = new THREE.Scene(),
        camera = new THREE.PerspectiveCamera(
            60, // 視野角
            465 / 465, // アスペクト比
            1, // near clip
            100 // far clip
        ),
        geometry = new THREE.BoxGeometry(1, 1, 1),
        material = new THREE.MeshBasicMaterial({
            // マテリアルを用意
            map:THREE.ImageUtils.loadTexture("http://jsrun.it/assets/9/A/T/u/9ATun.jpeg")
        }),
        box = new THREE.Mesh(geometry, material),
        light = new THREE.PointLight();
    
    camera.position.set(3, 3, 3);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    
    light.position.set(0, 1, 2);
    
    scene.add(box);
    scene.add(light);
    
    renderer.setSize(465, 465);
    document.body.appendChild(renderer.domElement);
    
    (function render() {
        box.rotation.x += 0.01;
        box.rotation.y += 0.01;
        box.rotation.z+= 0.01;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    })();
    
})(this, document);

DEMO

簡単なコードでいろいろ試せそうですね。