THREE.js Example

by retorillo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>

JavaScript

$(function() {

  var t = THREE;
  var width = window.innerWidth;
  var height = window.innerHeight;
  var color = 0x880000;
  var aspect = width / height;
  var scene = new t.Scene();
  var camera = new t.PerspectiveCamera(75, aspect);

  var light = new t.AmbientLight(0xffffff);
  scene.add(light);

  var dlight = new t.DirectionalLight(0xffffff);
  dlight.position.set(-1.0, 0.5, 0.5);
  scene.add(dlight);

  var renderer = new t.WebGLRenderer();
  renderer.setSize(width, height);
  $(renderer.domElement).appendTo(document.body);

  function getColorSolidGeometry(innerRadius, outerRadius, segments, height, thetaStart, thetaLength) {
    if (thetaLength >= Math.PI * 2) throw new Error("thetaLength must be smaller than 2PI");
    var g = new THREE.Geometry();
    var v = g.vertices;
    var f = g.faces;
    innerRadius = innerRadius != undefined ? innerRadius : 0;
    thetaStart = thetaStart != undefined ? thetaStart : 0;
    thetaLength = thetaLength != undefined ? thetaLength : Math.PI * 2;
    var ts = thetaLength / segments;
    for (var c = 0; c <= segments; c++) {
      var t = thetaStart + ts * c;
      var cost = Math.cos(t);
      var sint = Math.sin(t);
      var ix = cost * innerRadius;
      var iy = sint * innerRadius;
      var ox = cost * outerRadius;
      var oy = sint * outerRadius;
      v.push(new THREE.Vector3(ix, iy, 0)); // 0 / -4 / -8 / inner bottom
      v.push(new THREE.Vector3(ox, oy, 0)); // 1 / -3 / -7 / outer bottom
      v.push(new THREE.Vector3(ix, iy, height)); // 2 / -2 / -6 / inner top
      v.push(new THREE.Vector3(ox, oy, height)); // 3 / -1 / -5 / outer top
      var len = g.vertices.length;
      if (len >= 8) {
        f.push(new THREE.Face3(len - 1, len - 2, len - 5)); // bottom
        f.push(new THREE.Face3(len - 6, len - 5, len - 2)); // bottom
        f.push(new THREE.Face3(len - 3, len - 4, len - 7)); // top
        f.push(new THREE.Face3(len - 8, len - 7, len - 4)); // top
        f.push(new THREE.Face3(len - 5, len...