HTML 5 - canvas - Part IX

Introduction
Three.js含有與3D效果有關的物件

Note

• Geometries: 3D的幾何圖
• Lighting: 光影設定
• Textures: 圖像材質

Usage

window.requestAnimFrame = (function(callback)
{
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback)
    {
        window.setTimeout(callback, 1000 / 60);
        };
    })();
 
// Draw the frame
function animate(lastTime, angularSpeed, three)
{
    // update
    
    // render
    three.renderer.render(three.scene, three.camera);

    // request new frame
    requestAnimFrame(function(){
        animate(lastTime, angularSpeed, three);
    });
}

window.onload = function()
{  
    // Initial the renderer
 
    // camera
         
    // scene
 
    // shape

    // Add the shape to the scene
 
    // create wrapper object that contains three.js objects
    var three = {
        renderer: renderer,
        camera: camera,
        scene: scene,
        plane: plane
    };
 
    animate(lastTime, angularSpeed, three);
};

Reference: HTML5 Tutorial