JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.min.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
CSS
html,
body {
margin: 0;
padding: 0;
}
JavaScript
const DIMENSION = 1;
const PARTICLE_SIZE = 0.0035;
const PARTICLE_COUNT = 50;
const PARTICLE_VELOCITY_MAX = DIMENSION / 128;
const PARTICLE_VELOCITY_MIN = DIMENSION / 1280;
const TIMING = 10;
const MAX_POINTS = 5000;
let particles = [];
let camera, scene, controls, renderer, sphere, trail, drawCount;
let initThree = function () {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = DIMENSION * 2;
camera.position.x = DIMENSION * 0.4;
camera.position.y = DIMENSION * 0.7;
camera.updateProjectionMatrix();
scene.add(camera);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera,renderer.domElement);
}
let setupSphere = function () {
sphere = new THREE.Mesh(
new THREE.SphereBufferGeometry(DIMENSION * 0.5, DIMENSION * 20, DIMENSION * 20),
new THREE.MeshBasicMaterial({
color: new THREE.Color('gray'),
wireframe: true,
transparent: true,
opacity: 0.2
})
);
sphere.geometry.computeBoundingSphere();
scene.add(sphere);
};
let getVelocity = function (negative) {
return new THREE.Vector3(
getRandomAxisVelocity(negative),
getRandomAxisVelocity(negative),
getRandomAxisVelocity(negative)
);
};
let getRandomAxisVelocity = function (negative) {
let velocity = Math.random() * 0.5 * (PARTICLE_VELOCITY_MAX - PARTICLE_VELOCITY_MIN) + PARTICLE_VELOCITY_MIN;
if (Math.random() < 0.5) {
velocity = -velocity;
}
if (negative) {
velocity = -Math.abs(velocity);
}
return velocity;
};
let movement = function (mesh) {
mesh.velocity = getVelocity();
setTimeout(()=>{
movement(mesh);
}, Math.random() * TIMING);
};
let checkCollision = function (particle) {
if...