What do I need to change this into a pentagon?
3D Rotating Square in WebGL using Three.js
* {
margin: 0;
}
body {
background-color: #1a1a1a;
color: #ffffff;
}
h2 {
margin: 0 auto 0 auto;
}
#container {
margin: 0 auto 0 auto;
z-index: -56;
width: 640px;
height: 400px;
background-color: #99b907;
}
var renderer = null, scene = null, camera = null, cube = null, animating = true; 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: 0xfff, color:0xfff}); /* * 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; }
3D Rotating Square with in Three.js Click inside canvas to Toggle Animation.
Answers
Answer:
What do I need to change this into a pentagon?
3D Rotating Square in WebGL using Three.js
* {
margin: 0;
}
body {
background-color: #1a1a1a;
color: #ffffff;
}
h2 {
margin: 0 auto 0 auto;
}
#container {
margin: 0 auto 0 auto;
z-index: -56;
width: 640px;
height: 400px;
background-color: #99b907;
}
var renderer = null, scene = null, camera = null, cube = null, animating = true; 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: 0xfff, color:0xfff}); /* * 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; }
3D Rotating Square with in Three.js Click inside canvas to Toggle Animation.