PBM

by jmchen

HTML

<div id="info">PBM</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var camera, scene, renderer, geometry, material, mesh, light, controls;

var p1;


var Particle = function () {
    this.pos = new THREE.Vector3();
    this.force = new THREE.Vector3();
    this.vel = new THREE.Vector3();
};

Particle.prototype.update = function (dt) {
    this.vel.add(this.force.clone().multiplyScalar(dt));
    this.pos.add(this.vel.clone().multiplyScalar(dt));
};

Particle.prototype.accumForce = function () {
    this.force.copy(new THREE.Vector3(0, -10, 0));
};


function initPBM() {
    p1 = new Particle();
}

init();
animate();

function drawBoundary() {
    var lineGeometry = new THREE.Geometry();
    var vertArray = lineGeometry.vertices;
    vertArray.push(new THREE.Vector3(-18, -18, 0), new THREE.Vector3(-18, 18, 0), new THREE.Vector3(18, 18, 0), new THREE.Vector3(18, -18, 0), new THREE.Vector3(-18, -18, 0));
    var lineMaterial = new THREE.LineBasicMaterial({
        color: 0x00cc00
    });
    var line = new THREE.Line(lineGeometry, lineMaterial);
    scene.add (line);
}

function init() {
    initPBM();

    scene = new THREE.Scene();
    drawBoundary();
    
    camera = new THREE.OrthographicCamera(-20, 20, 20, -20, 2, 100);
    camera.position.z = 50;
    scene.add(camera);

    geometry = new THREE.SphereGeometry(0.5);
    material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);

    document.body.appendChild(renderer.domElement);
}

function animate() {
    dt = 0.1;
    p1.accumForce();
    p1.update(dt);

    // collision detection (finish other 3 walls)
    if (p1.pos.y < -18) {
        p1.pos.y = -18;
        p1.vel.multiplyScalar(-1);
    }

    console.log(p1.pos);

    mesh.position.copy(p1.pos);

    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene,...