JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
JavaScript
let scene, camera, renderer, controls, particlePivot,
windowHalfX = window.innerWidth / 2, windowHalfY = window.innerHeight / 2;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(6, 6, 0);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x808080);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);
window.addEventListener('resize', onWindowResize, false);
/*========================================================*/
/* Black Hole */
const blackHoleGeometry = new THREE.SphereGeometry(10, 64, 64);
const blackHoleMaterial = new THREE.MeshBasicMaterial({
color: 0x000000
});
const blackHole = new THREE.Mesh(blackHoleGeometry, blackHoleMaterial);
scene.add(blackHole);
/* ========== */
/* Particles */
const particles = new THREE.PointsMaterial({
color: 0xffffff
});
const geometry = new THREE.Geometry();
const particleCount = 1000;
const radius = 750;
const height = 15;
for(let i = 0; i < particleCount; i++) {
const rand = Math.random();
const theta = Math.random() * (2 * Math.PI);
const randHeight = Math.random() * height;
const r = Math.sqrt(rand) * radius;
const x = r * Math.cos(theta);
const y = r * Math.sin(theta);
const z = randHeight;
geometry.vertices.push(new THREE.Vector3(x, y + 1, z));
}
const pointCloud = new THREE.Points(geometry, particles);
pointCloud.rotation.x = Math.PI / 2;
scene.add(pointCloud);
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
...