JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://mrdoob.github.com/three.js/build/three.min.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/js/controls/OrbitControls.js"></script>
<script src="http://mrdoob.github.com/three.js/examples/textures/sprites/ball.png"></script>
<div id="container"></div>
JavaScript
var container;
var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size;
var mouseX = 0, mouseY = 0;
var controls;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1400;
scene = new THREE.Scene();
sprite = THREE.ImageUtils.loadTexture( "textures/sprites/ball.png" );
/*geometry = new THREE.Geometry();
for ( i = 0; i < 1000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = 1000 * Math.random() - 500;
vertex.y = 1000 * Math.random() - 500;
vertex.z = 1000 * Math.random() - 500;
geometry.vertices.push( vertex );
colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSL( ( vertex.x + 1000 ) / 2000, 1, 0.5 );
}
geometry.colors = colors;*/
var geometry = new THREE.BufferGeometry();
geometry.attributes = {
position: {
itemSize: 3,
array: new Float32Array( 3000 )
},
color: {
itemSize: 3,
array: new Float32Array( 3000 )
}
};
var positions = geometry.attributes.position.array;
var colors = geometry.attributes.color.array;
for(var j=0; j<3000; j+=3){
var v = new THREE.Vector3();
v.x = 1000 * Math.random() - 500;
v.y = 1000 * Math.random() - 500;
v.z = 1000 * Math.random() - 500;
positions[ j ] = v.x;
positions[ j + 1 ] = v.y;
positions[ j + 2 ] = v.z;
var c = new THREE.Color( 0x00ff00);
c.setHSL( ( v.x + 1000 ) / 2000, 1, 0.5 )
colors[ j ] = c.r;
colors[ j + 1 ] = c.g;
colors[ j + 2 ] = c.b;
}
material = new THREE.ParticleBasicMaterial( { size: 85, map: sprite, vertexColors:...