Output Image (Compressed with GFYCAT) :- http://gfycat.com/WiltedReasonableFirefly
Full Screen Demo :- http://jsbin.com/hemaxe/1
Code (With Output) (Hosted in JSBin) :- http://jsbin.com/hemaxe/1/edit?html,output
In the live demo the image is not shown. Its a proxy problem with the
Three.js library. When it will be fixed it will be done. If you the
image you see above with the image is when I run the code in my
localhost. The code for that is given below.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="js/libs/three.js/three.js" type="text/javascript"></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, 1); | |
| scene.add(light); | |
| /* | |
| * Create a shaded texture map using an image and | |
| * add it to the scene. | |
| * * | |
| */ | |
| var mapURL = "images/buddhabrot.png"; | |
| var map = THREE.ImageUtils.loadTexture(mapURL); | |
| /* | |
| * Create a MeshPhongMaterial for Shiny surface to show shading | |
| * with the texture added above. | |
| */ | |
| var material = new THREE.MeshPhongMaterial({specular: 0x555555, map: map}); | |
| /* | |
| * 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 / 5; | |
| cube.rotation.y = Math.PI / 5; | |
| /* | |
| * 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 Image Texture in Three.js<br /><br /></h2></center> | |
| <div id="container" ></div> | |
| <br /> | |
| <center><h2>Click inside canvas to Toggle Animation.</h2></center> | |
| </body> | |
| </html> |
Replace the image url in the above code with any image you like. Make sure you give the right path else it won't work.
