Herdy Penguins

Three.js

by steveow

HTML

<script src="http://www.html5canvastutorials.com/libraries/three.min.js"></script>
<div id="container"></div>

CSS

#container {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    margin: 10px auto;
    padding: 0px;
}
<style> body {
    font-family: Monospace;
    font-weight: bold;
    background-color: #ccccff;
    margin: 0px;
    overflow: hidden;
    padding:0
}

JavaScript

//Script for Array of Re-Usable, Re-Scalable 3D Cylinders 

  // revolutions per second
  var angularSpeed = 0.2;
  var lastTime = 0;
  // renderer
  var container = document.getElementById("container");
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(container.offsetWidth, container.offsetHeight);
  //renderer.setSize(container.width, container.height);
  container.appendChild(renderer.domElement);

  // camera
  //var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  //var camera = new THREE.PerspectiveCamera(50, 1/1, 1, 1000);
  //var camera = new THREE.PerspectiveCamera(50, container.width / container.height, 1, 1000);
  var camera = new THREE.OrthographicCamera(400 / -2, 400 / 2, 400 / 2, 400 / -2, 1, 1000);
  camera.position.z = 700;

  // scene
  var scene = new THREE.Scene();
  var cylinder = null;
  var Num_Rays = 80;

  var MyCylinders = []; //...defines it as an array
  geometry = new THREE.CylinderGeometry(9, 9, 1, 40, 10, false);
  geometry.applyMatrix(
  new THREE.Matrix4().makeTranslation(0, 0.5, 0));
  geometry.dynamic = true; // thankyou mrdoob
  //material = new THREE.MeshBasicMaterial({color: '#00ff00'});
  material = new THREE.MeshNormalMaterial()

   for (var iii = 1; iii <= Num_Rays; iii++) {
      cylinder = new THREE.Mesh(geometry, material);
      cylinder.position.x = 0;
      cylinder.position.y = 0;
      cylinder.position.z = 0;
      MyCylinders[iii] = cylinder;
      scene.add(MyCylinders[iii]);
  }

  // static sphere for scale & perspective checking
  var sphereGeometry01 = new THREE.SphereGeometry(160, 32, 16);
  var sphereMaterial01 = new THREE.MeshNormalMaterial({
      color: 0x8888ff
  });
  ob_sphere01 = new THREE.Mesh(sphereGeometry01, sphereMaterial01);
  ob_sphere01.position.set(0, 0, 0);
  ob_sphere01.name = "ob_sphere01";
  scene.add(ob_sphere01);

  // add subtle ambient lighting
  var ambientLight = new THREE.AmbientLight(0x444444);
  scene.add(ambientLight);

...