JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/examples/textures/sprites/ball.png"></script>
<body>
<div id="container"></div>
<!--<img src="http://threejs.org/examples/textures/sprites/ball.png"></img>-->
<script src="http://threejs.org/build/three.js"></script>
</body>
CSS
body {
color: #cccccc;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #050505;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
JavaScript
THREE.ImageUtils.crossOrigin = '';
var container;
var camera, scene, renderer;
var particleSystem;
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500);
camera.position.z = 350;
scene = new THREE.Scene();
raycaster = new THREE.Raycaster();
raycaster.params.PointCloud.threshold = 3;
var particles = 10000;
var particlesGeometry = new THREE.BufferGeometry();
var particlesPositions = new Float32Array(particles * 3);
var n = 200, n2 = n / 2; // particles spread in the cube
for (var i = 0; i < particlesPositions.length; i += 3) {
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
particlesPositions[i] = x;
particlesPositions[i + 1] = y;
particlesPositions[i + 2] = z;
}
particlesGeometry.addAttribute('position', new THREE.BufferAttribute(particlesPositions, 3));
var particlesMaterial = new THREE.PointCloudMaterial({
map : THREE.ImageUtils.loadTexture('http://i.imgur.com/cxUw2NL.png'),
size : 100,
sizeAttenuation : true,
transparent : true,
opacity:1,
depthWrite:false,
depthTest:false
});
particlesMaterial.color.setHSL(0, 1, 0.6);
particleSystem = new THREE.PointCloud(particlesGeometry, particlesMaterial);
particleSystem.sortParticles = true;
scene.add(particleSystem);
renderer = new THREE.WebGLRenderer({
antialias : false
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xeeeeee, 1);
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var time = Date.now() *...