Three js play

by jonnyc

HTML

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>three.js particle tutorial</title>
        <meta charset="utf-8">

        <style type="text/css">
            body {
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }
        </style>
        
        <script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
    </head>
    <body>

    <body>

        <div id="container">


        </div>

    </body>
</html>

CSS

<!--
psuedo for elastic collision

var v1 = p1.v;
var v2 = p2.v;

var m1 = p1.m;
var m2 = p2.m;

var combinedMass = m1 + m2;


// Calculate new v1

var newV1 = ((v1*(m1 - m2)) + (2*(m2*v2))) / combinedMass;
var newV2 = ((v2*(m2 - m1)) + (2*(m1*v1))) / combinedMass;

-->

JavaScript

function loadMyScene() {
    // set the scene size
    var WIDTH = 700,
        HEIGHT = 600;

    // set some camera attributes
    var VIEW_ANGLE = 45,
        ASPECT = WIDTH / HEIGHT,
        NEAR = 0.1,
        FAR = 10000;

    var bounds = 400;

    var particleRadius = 10;
    var constDistance = Math.pow((particleRadius * 2), 2);
    var noCollisionDistance = particleRadius * 2;
    var gravity = true;
    var collisions = true;
    var particleCount = 200;
    var useZAxis = false;
    var maxVel = 10;
    
            var sphereMaterial = new THREE.MeshLambertMaterial(
    {
        color: 0xFF0000
    });

    // set up the sphere vars
    var segments = 50, rings = 50;

    // 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(VIEW_ANGLE,
                                    ASPECT,
                                    NEAR,
                                    FAR);
    var scene = new THREE.Scene();

    var ambientLight = new THREE.AmbientLight(0x111111);
    scene.add(ambientLight);

    // the camera starts at 0,0,0 so pull it back
    camera.position.z = 1000;
    camera.position.x = bounds / 2;
    camera.position.y = bounds / 2;

    // start the renderer
    renderer.setSize(WIDTH, HEIGHT);

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

    var groundNormal = new THREE.Vector3(0, 1, 0);
    groundNormal = groundNormal.normalize();

    function Particle(sphere) {
        // Set the initial velocity
        this.velocity = new THREE.Vector3();
        this.position = new THREE.Vector3();

        this.sphere = sphere;

        // Set the radius
        this.radius = particleRadius;

        this.mass = 1;

        this.accel = -0.4;

        this.bounce = 0.7;

        var axes = new...