WebGL

by tedbeer

HTML

<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://evanw.github.io/lightgl.js/lightgl.js"></script>
<img id="tex1" style="display:none" src="http://evanw.github.io/lightgl.js/tests/texture.png" />
<img id="tex2" style="display:none" src="http://evanw.github.io/lightgl.js/tests/texture2.png" />
<div id="container" />

JavaScript

// set the scene size
var width = 400,
  height = 300;

// set some camera attributes
var viewAngle = 45,
  aspect = width / height,
  near = 0.1,
  far = 10000;

// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');

// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
    
var camera =
  new THREE.PerspectiveCamera(
    viewAngle,
    aspect,
    near,
    far);

var scene = new THREE.Scene();

// add the camera to the scene
scene.add(camera);

// the camera starts at 0,0,0
// so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(width, height);

// attach the render-supplied DOM element
$container.append(renderer.domElement);


var material = new THREE.MeshBasicMaterial({
      color: 0xCC0000,
      side: THREE.DoubleSide,
      wireframe: true
    }), m2 = new THREE.MeshBasicMaterial({
      color: 0x336699,
      side: THREE.DoubleSide,
      wireframe: true
    });

var paperSheet = new THREE.Mesh(
    new THREE.PlaneGeometry(
      200, 200, //size
      4,4 //12,12
    ),
    material
);

//initial position
var mx = new THREE.Matrix4(),
    mxZ = new THREE.Matrix4(),
    axis = new THREE.Vector3( 1, 0, 0 ),
    axisZ = new THREE.Vector3( 0, 0, 1 );

axis.normalize();
axisZ.normalize();
mx.makeRotationAxis(axis, Math.PI / 1.5);
mxZ.makeRotationAxis(axisZ, Math.PI / 8);
mx.multiply( mxZ);

paperSheet.applyMatrix(mx);
// add the paperSheet to the scene
scene.add(paperSheet);

//paperSheet.geometry.vertices
//paperSheet.geometry.faces
var v = paperSheet.geometry.vertices,
    f = paperSheet.geometry.faces[0],
  facets = [];

console.info(f.prototype);

var g = new THREE.Geometry();
g.vertices = [v[f.a], v[f.b], v[f.c]];
g.faces.push(new THREE.Face3(0, 1, 2));
facets.push(new THREE.Mesh(g, m2));
var mxTrans = (new THREE.Matrix4()).makeTranslation(0,0,-10);

facets.forEach(function(f){
    //f.applyMatrix(mx.multiply(mxTrans));
   ...