[Javascript]Three.js trial

Three.js allows us to draw 3D CG on browser.
threejs.org I’ll draw cube using it.
Reference page is here. First is download.
I’ll use three.min.js in build directory.

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

Next is html file.
Three.js seems to make canvas element.

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

Next is main.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);
}

Result is like this.
Easy to write 🙂
Demo

zuqqhi2