three.proton
Version:
three.Proton is an easily customizable html5 particle engine for three.js
155 lines (129 loc) • 4.5 kB
HTML
<html>
<head>
<title>SpriteRender - colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
body {
font-family: Monospace;
background-color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="../lib/stats.min.js"></script>
<script src="../lib/three.min.js"></script>
<script src="../build/three.proton.min.js"></script>
<script src="./js/lib/TrackballControls.js"></script>
<script>
var proton, emitter;
var camera, scene, renderer, stats, clock, spring, controls;
init();
function init() {
addScene();
addControls();
addLights();
addProton();
addStats();
animate();
}
function addScene() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xffffff, 1, 10000);
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);
clock = new THREE.Clock();
renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function addControls() {
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
}
function addLights() {
var ambientLight = new THREE.AmbientLight(0x101010);
scene.add(ambientLight);
var pointLight = new THREE.PointLight(0xffffff, 2, 1000, 1);
pointLight.position.set(0, 200, 200);
scene.add(pointLight);
}
function addStats() {
stats = new Stats();
stats.showPanel(0);
stats.dom.style.position = 'absolute';
stats.dom.style.left = '0px';
stats.dom.style.top = '0px';
container.appendChild(stats.dom);
}
function addProton() {
proton = new Proton();
proton.addEmitter(createEmitter());
proton.addRender(new Proton.SpriteRender(scene));
}
function createBox() {
var geometry = new THREE.DodecahedronGeometry(20);
var material = new THREE.MeshLambertMaterial({
color: "#00ffcc"
});
return new THREE.Mesh(geometry, material);
}
function createEmitter() {
var colors = ['#529B88', '#CDD180', '#FFFA32', '#FB6255', '#FB4A53', '#FF4E50', '#F9D423'];
emitter = new Proton.Emitter();
emitter.rate = new Proton.Rate(new Proton.Span(3, 6), new Proton.Span(.05, .2));
emitter.addInitialize(new Proton.Mass(1));
emitter.addInitialize(new Proton.Radius(200, 400));
emitter.addInitialize(new Proton.Life(2, 4));
emitter.addInitialize(new Proton.Body(createSprite()));
emitter.addInitialize(new Proton.Position(new Proton.ScreenZone(camera, renderer)));
emitter.addBehaviour(new Proton.Alpha(0, 1, Infinity, Proton.easeOutCubic));
emitter.addBehaviour(new Proton.Scale(2, 0, Infinity, Proton.easeOutCubic));
emitter.addBehaviour(new Proton.Color(colors, 'random'));
emitter.emit();
return emitter;
}
function createSprite() {
var map = new THREE.TextureLoader().load("./img/dot.png");
var material = new THREE.SpriteMaterial({
map: map,
color: 0xff0000,
blending: THREE.AdditiveBlending,
fog: true
});
return new THREE.Sprite(material);
}
function animate() {
stats.begin();
requestAnimationFrame(animate);
render();
stats.end();
}
function render() {
proton.update();
renderer.render(scene, camera);
controls.update();
Proton.Debug.renderInfo(proton, 3);
}
function onWindowResize() {
}
</script>
</body>
</html>