Circular Ripples

three.js + orbit

by hzhang307

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

JavaScript

//... SteveOW Simple Ripple
//... based on answer by Mattblang at 
//... http://stackoverflow.com/questions/13756112/draw-a-circle-not-shaded-with-three-js
var camera, scene, renderer;

var lpos_x = -60,
  lpos_y = 20,
  lpos_z = 100;
var mz = 1,
  dirn = 1;
var Ring;
var CumScaleFactor = 1;
var radius = 0;
//var Circle2, C2geometry, C2material;

init();
animate();

function init() {

  scene = new THREE.Scene();
  scene.add(new THREE.AmbientLight(0x222222));

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 500;
  camera.lookAt(0, 0, 0);
  scene.add(camera);

  //CIRCLE1
  var material = new THREE.MeshBasicMaterial({
    color: 0x0000ff
  });
  var radius = 5;
  var segments = 32;
  var circleGeometry = new THREE.CircleGeometry(radius, segments);
  var circle = new THREE.Mesh(circleGeometry, material);
  scene.add(circle);
  circle.wireframe = true;

  //RING
  var geometry = new THREE.RingGeometry(14, 15, 32);
  material = new THREE.MeshBasicMaterial({
    color: 0xffaa00,
    side: THREE.DoubleSide
  });
  Ring = new THREE.Mesh(geometry, material);
  scene.add(Ring);


  //CIRCLE2

  var segmentCount = 64;
  var radius_init = 1;
  C2geometry = new THREE.Geometry();
  C2material = new THREE.LineBasicMaterial({
    color: 0xaaaaff,
    opacity: 0.99
  });
  C2material.transparent = true; //... required to activate opacity.

  for (var i = 0; i <= segmentCount; i++) {
    var theta = (i / segmentCount) * Math.PI * 2;
    C2geometry.vertices.push(
      new THREE.Vector3(
        Math.cos(theta) * radius_init,
        Math.sin(theta) * radius_init,
        0));
  }
  Circle2 = new THREE.Line(C2geometry, C2material);
  scene.add(Circle2);



  //POINT LIGHT|
  PL_color = 0xffaaff;
  PL_intensity = 2;
  PL_range_to_zero_intensity = 230;
  PL = new THREE.PointLight(PL_color, PL_intensity, PL_range_to_zero_intensity);
  scene.add(PL);
  PL_pos_x =...