Skip to content

Instantly share code, notes, and snippets.

@enjalot
Created May 3, 2013 18:43
Show Gist options
  • Save enjalot/5512651 to your computer and use it in GitHub Desktop.
Save enjalot/5512651 to your computer and use it in GitHub Desktop.
#333 Deep space cartography part N

[ Launch: #333 Deep space cartography part N ] 5512651 by enjalot
[ Launch: webgl spring coil 4wgrid ] 5509977 by zeffii
[ Launch: webgl spring coil 3wgrid ] 5478586 by zeffii
[ Launch: webgl spring coil 3wgrid ] 5478195 by zeffii
[ Launch: webgl spring coil 3 ] 5478168 by zeffii
[ Launch: webgl spring coil 2 ] 5477928 by zeffii
[ Launch: webgl spring coil ] 5477822 by zeffii
[ Launch: minimal_webgl ] 5477538 by zeffii
[ Launch: gnomesayin _wat ] 5472636 by zeffii
[ Launch: gnomesayin _wat ] 5469567 by zeffii
[ Launch: gnomesayin _wat ] 5469562 by enjalot
[ Launch: gnomesayin 4 ] 5469477 by zeffii
[ Launch: gnomesayin 2 ] 5461140 by zeffii
[ Launch: gnomesayin ] 5331716 by zeffii
[ Launch: Tributary inlet ] 5330989 by zeffii

See Previous Inlet [ Gist ]

{"description":"#333 Deep space cartography part N","endpoint":"","display":"webgl","public":true,"require":[{"name":"trackballcontrols","url":"https://raw.github.com/mrdoob/three.js/master/examples/js/controls/TrackballControls.js"}],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"tough.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":347,"height":323,"hide":false},"thumbnail":"http://i.imgur.com/OhJNeVG.png"}
// learning THREE.js
// #333 Deep space cartography part II
// after @tilman
// http://geometrydaily.tumblr.com/post/36739162154/
var container,
camera,
cameraControls,
scene,
renderer,
mesh,
light;
var mouseX = 0,
mouseY = 0;
var gridWireMaterial, gridFaceMaterial, gridMixMaterial, ballMaterial;
init();
function init() {
container = document.getElementById( 'container' );
scene = tributary.scene;
camera = tributary.camera;
camera.position.set(0,0,5);
scene.add( camera );
cameraControls = new THREE.TrackballControls( camera );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 0, 1 ).normalize();
scene.add( light );
ballMaterial = new THREE.MeshBasicMaterial( {color: 0x488967, transparent: true, opacity: 0.8, blending: THREE.AdditiveyBlending } );
// declaration of materials and then joining them in an array, for multimaterials
gridWireMaterial = new THREE.MeshBasicMaterial( {color: 0xeeeeee, wireframe: true});
gridFaceMaterial = new THREE.MeshBasicMaterial( { color: 0x443f21, transparent: false, wireframe: false } );
gridMixMaterial = [gridWireMaterial, gridFaceMaterial];
createScene()
renderer = tributary.renderer;
}
function createScene() {
// add a grid
var grid = generate_grid();
var gridWire = new THREE.Mesh( grid, gridWireMaterial );
gridWire.position.z = 0.005;
scene.add( gridWire );
var gridFace = new THREE.Mesh( grid, gridFaceMaterial );
scene.add( gridFace );
// avoid zfighting with wireframe, draw mesh wire slightly higher than face material..
var ball_1_geom = new THREE.SphereGeometry(0.1, 32, 32);
var ball_1 = new THREE.Mesh(ball_1_geom, ballMaterial);
ball_1.position.z = 1.5;
scene.add( ball_1);
var ball_2_geom = new THREE.SphereGeometry(0.3, 32, 32);
var ball_2 = new THREE.Mesh(ball_2_geom, ballMaterial);
ball_2.position.z = 0.7;
ball_2.position.x = 0.5;
ball_2.position.y = 1.2;
scene.add( ball_2);
var ball_3_geom = new THREE.SphereGeometry(0.3, 32, 32);
var ball_3 = new THREE.Mesh(ball_3_geom, ballMaterial);
ball_3.position.z = 0.2;
ball_3.position.x = 1.5;
ball_3.position.y = 1.1;
scene.add( ball_3);
var ball_4_geom = new THREE.SphereGeometry(0.2, 32, 32);
var ball_4 = new THREE.Mesh(ball_4_geom, ballMaterial);
ball_4.position.z = 0.5;
ball_4.position.x = -1.5;
ball_4.position.y = -1.1;
scene.add( ball_4);
}
tributary.run = function(scene, t) {
render();
}
function render() {
cameraControls.update();
renderer.render( scene, camera );
}
function generate_grid(){
var geometry = new THREE.Geometry();
var two_pi = 2 * Math.PI,
edge_length = 0.4,
x_pos, y_pos,
num_points,
xy_val = get_point(2/3*-Math.PI, {x:0, y:0}, edge_length),
even, x_offset,
y_shift = 5 * xy_val[1],
x_shift = 8 * edge_length / 2;
// console.log("----")
var index = 0, faces = [], verts = [];
var items_high = 11;
for (var i = 0; i < items_high; i+=1){
even = (i%2===0)
num_points = even? 9 : 10
x_pos = 0;
for( var j = 0; j < num_points; j +=1){
x_offset = even? 0 : xy_val[0]
y_pos = i * xy_val[1] - y_shift;
x_pos = j * edge_length + x_offset - x_shift;
geometry.vertices.push( new THREE.Vector3( x_pos, y_pos, 0.0 ) );
// hitch a ride on the loop to fill the face indices array
if (even && i < items_high-2) {
geometry.faces.push( new THREE.Face3( index, index + 9, index+10) );
}
if (j < num_points-1 && i < items_high-1) {
geometry.faces.push( new THREE.Face3( index, index + 10, index+1) );
}
if (even && i > 1 && j < num_points-1) {
geometry.faces.push( new THREE.Face3( index, index + 1, index-9) );
}
if (even && i === items_high-2){
if (j < num_points-2) {
geometry.faces.push( new THREE.Face3( index+1, index + 10, index + 11) );
}
}
index += 1;
}
}
return geometry
}
function get_point(angle, cp, amp){
var x = (Math.cos(angle) * amp) + cp.x
var y = (Math.sin(angle) * amp) + cp.y
return [x,y]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment