Sprite example
part 1
HTML
<div id="info">Sprite Example
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
CSS
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
text-align: center;
color: #ffff00
}
body {
overflow: hidden;
background: #333;
}
JavaScript
var container, scene, camera, renderer, controls;
var clock = new THREE.Clock();
var cube;
var particleGroup, particleAttributes;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / innerHeight, 0.1, 20000);
scene.add(camera);
camera.position.set(0, 150, 400);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x222222);
controls = new THREE.OrbitControls(camera, renderer.domElement);
document.body.appendChild(renderer.domElement);
///////////////////////////////////////////////////////////////////
THREE.ImageUtils.crossOrigin = '';
var floorTexture = THREE.ImageUtils.loadTexture('http://i.imgur.com/p8CRm9W.jpg');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10, 10);
var floorMaterial = new THREE.MeshBasicMaterial({
map: floorTexture,
side: THREE.DoubleSide
});
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
scene.add(floor);
///////////////////////////////////////////////////////////
/// sprites
// star: http://i.imgur.com/QePyNi7.png
// spark: http://i.imgur.com/m1peX08.png
// smoke particle: http://i.imgur.com/IdJcX5m.png
/////////////////////////////////////////////////////////////
var particleTexture = THREE.ImageUtils.loadTexture('http://i.imgur.com/IdJcX5m.png');
particleGroup = new THREE.Object3D();
particleAttributes = {
startSize: [],
startPosition: [],
randomness: []
};
var totalParticles = 200;
var radiusRange = 150;
for (var i = 0; i < totalParticles; i++) {
var spriteMaterial = new...