AnimeshShaw · June 14, 2015 10:36
diff --git a/3DSquareRotationThreeJS.html b/3DSquareRotationThreeJS.html
 <!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>
	<!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>
No results found