Three.js ~ Hello World
See https://github.com/mrdoob/three.js
CSS
body {
margin: 0px;
overflow: hidden;
background-color: #f0f0f0;
}
JavaScript
// Hello World1 from https://github.com/mrdoob/three.js
<script>
// global variables
var renderer;
var scene;
var camera;
var sphere;
var orbit;
var control;
var avgVertexNormals = [];
var avgVertexCount = [];
var doExplode = true;
function init() {
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render, sets the background color and the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
// position and point the camera to the center of the scene
camera.position.x = 15;
camera.position.y = 16;
camera.position.z = 13;
camera.lookAt(scene.position);
orbit = new THREE.OrbitControls(camera);
control = new function () {
this.explode = function () {
doExplode = true;
}
this.implode = function () {
doExplode = false;
}
this.scale = 0.02;
};
addControls(control);
// add the output of the renderer to the html element
document.body.appendChild(renderer.domElement);
sphere = new THREE.BoxGeometry(4, 6, 4, 20, 20, 20);
sphere.vertices.forEach(function (v) {
v.velocity = Math.random();
});
createParticleSystemFromGeometry(sphere);
// call the render function
render();
}
function explode(outwards) {
var dir = outwards === true ? 1 : -1;
var count = 0;
sphere.vertices.forEach(function (v) {
v.x += (avgVertexNormals[count].x * v.velocity * control.scale) * dir;
v.y +=...