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;
var line,lineM;
init();
animate();
function init() {
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(27, window.innerWidth / window.innerHeight, 5, 3500);
camera.position.z = 350;
camera.position.y = 35;
scene = new THREE.Scene();
raycaster = new THREE.Raycaster();
raycaster.params.PointCloud.threshold = 3;
var particles = 100;
var particlesGeometry = new THREE.Geometry();
var n = 200, n2 = n / 2; // particles spread in the cube
for (var i = 0; i < particles; i++) {
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
particlesGeometry.vertices.push(
new THREE.Vector3( x, y, z )
);
}
var particlesMaterial = new THREE.PointCloudMaterial({
map : THREE.ImageUtils.loadTexture('http://i.imgur.com/cxUw2NL.png'),
size : 70,
sizeAttenuation : true,
transparent : true,
opacity : 0.6
});
particleSystem = new THREE.PointCloud(particlesGeometry, particlesMaterial);
particleSystem.sortParticles = true;
scene.add(particleSystem);
sphereG = new THREE.SphereGeometry(50);
sphereM = new THREE.MeshNormalMaterial();
sphere = new THREE.Mesh(sphereG,sphereM);
sphere.position.z = -300;
scene.add(sphere);
lineG = new THREE.Geometry();
lineG.vertices.push(new THREE.Vector3(-100,30,120));
lineG.vertices.push(new THREE.Vector3(100,30,120));
lineM = new THREE.LineBasicMaterial({color: 0xeeeeee, linewidth:1, transparent:true});
lineM.opacity=0.8;
line = new THREE.Line(lineG, lineM, THREE.LinePieces);
scene.add(line);
renderer = new THREE.WebGLRenderer({
antialias : false
});
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect =...