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;
 ...