Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
    <head>
        <title>3D Rotating Square in WebGL using Three.js</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
​
        <style type="text/css">
            *{
                margin: 0;
            }
            body{
                background-color:#1a1a1a;
                color:#ffffff;
            }
            h2{
                margin: 0 auto 0 auto;
            }
            #container{
                margin: 0 auto 0 auto;
                z-index:-1;
                width: 640px;
                height: 480px;
                background-color: #99b907;                
            }
        </style>
​
        <script type="text/javascript">
​
            var renderer = null,
                    scene = null,
                    camera = null,
                    cube = null,
                    animating = false;
​
            function onLoad() {
                /*
                 * Get the container where we draw the Square
                 * @type @exp;document@call;getElementById
                 */
                var container = document.getElementById("container");
​
                /*
                 * Creates a THREE.js renderer and add it to the container.
                 */
                renderer = new THREE.WebGLRenderer({antialias: true});
                renderer.setSize(container.offsetWidth, container.offsetHeight);
                container.appendChild(renderer.domElement);
​
                /*
                 * Create a THREE.js Scene
                 */
                scene = new THREE.Scene();
​
                /*
                 * Create a Perspective camera and add it to the Scene
                 */
                camera = new THREE.PerspectiveCamera(45, container.offsetWidth / container.offsetHeight, 1, 4000);
                camera.position.set(0, 0, 3);
                scene.add(camera);
​
                /*
                 * Create a Directional Light to show off the object
                 */
                var light = new THREE.DirectionalLight(0xffffff, 1.5);
                light.position.set(0, 0, 5);
                scene.add(light);
​
                /*
                 * Create a MeshPhongMaterial for Shiny surface to show shading 
                 * with the texture added above.
                 */
                var material = new THREE.MeshPhongMaterial({specular: 0xffffff, color:0xff5888});
​
                /*
                 * Create a Cube Geometry.
                 */
                var geometry = new THREE.CubeGeometry(1, 1, 1);
​
                /*
                 * Add the geometry and material to mesh.
                 */
                cube = new THREE.Mesh(geometry, material);
​
                cube.rotation.x = Math.PI / 10;
                cube.rotation.y = Math.PI / 10;
​
                /*
                 * Add the Cube to the Scene.
                 */
                scene.add(cube);
​
                /*
                 * Add a mouse up handler to toggle the animation
                 */
                addMouseHandler();
​
                /*
                 *  Run our render loop
                 */
                runRenderLoop();
            }
​
            function runRenderLoop() {
                /*
                 * Render the Scene
                 */
                renderer.render(scene, camera);
​
                /*
                 * Spin the cube for next animation frame
                 */
                if (animating) {
                    cube.rotation.y -= 0.01;
                    cube.rotation.z -= 0.01;
                }
                /*
                 * Ask for another frame.
                 */
                requestAnimationFrame(runRenderLoop);
            }
​
            function addMouseHandler() {
                var domEle = renderer.domElement;
                domEle.addEventListener("mouseup", onMouseUp, false);
            }
​
            function onMouseUp(event) {
                event.preventDefault();
                animating = !animating;
            }
​
        </script>
    </head>
    <body onLoad="onLoad();">
    <center><h2>3D Rotating Square with in Three.js<br /><br /></h2></center>
    <div id="container" ></div>
    <br />
    <center><h2>Click inside canvas to Toggle Animation.</h2></center>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
PsychoCoderHCpro
0viewers