// Simple three.js example // https://www.jsdelivr.com/package/npm/three import * as THREE from "https://cdn.skypack.dev/[email protected]/build/three.module.js"; import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js"; let renderer, scene, camera, controls; init(); animate(); function init() { renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100000000 ); camera.position.set( 800, 800, 800 ); controls = new OrbitControls( camera, renderer.domElement ); scene.add( new THREE.AmbientLight( 0x222222 ) ); let light = new THREE.DirectionalLight( 0xffffff, 1 ); light.position.set( 20, 20, 0 ); scene.add( light ); scene.add( new THREE.AxesHelper( 20 ) ); //document.addEventListener('keypress', onKeyPress, true); window.addEventListener( 'resize', onWindowResize, false ); } function animate() { requestAnimationFrame( animate ); renderer.render( scene, camera ); } function onWindowResize(){ camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize( window.innerWidth, window.innerHeight ); } // -------------------------------------- function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function getPointInBetweenByT(a, b, t=0.5) { let pp = new THREE.Vector3((a.x+b.x) * t, (a.y+b.y) * t, (a.z+b.z) * t); return pp; } // -------------------------------------- let radius = 300; function getRandomPtOnSphere() { let u = Math.random(); let v = Math.random(); let phi = 2 * Math.PI * u; let theta = Math.acos((2 * v) - 1); let pt = new THREE.Vector3(); pt.x = radius * Math.sin(phi) * Math.cos(theta); pt.y = radius * Math.cos(phi); pt.z = radius * Math.sin(phi) * Math.sin(theta); return pt; } let t = 0.42; let size = 800; let focus = new THREE.Vector3(0, 300, 0); function getCol(pRat) { return new THREE.Color(0.4 + pRat, 0 + pRat, 0.2 + pRat); } let particleCount = 200000; let jump = size / 20; let prev = new THREE.Vector3(); let vertices = []; let colors = []; for (let p = 0; p < particleCount; p++) { let pP = prev.clone(); let rP = getRandomPtOnSphere(); let np = getPointInBetweenByT(pP, rP, t); let particle = new THREE.Vector3(np.x, np.y, np.z); prev = np; vertices.push(np.x, np.y, np.z); let pRat = particle.distanceTo(focus) / size; let col = getCol(pRat); colors.push(col.r, col.g, col.b); } let particles = new THREE.BufferGeometry(); let pMaterial = new THREE.PointsMaterial({ size: 2, vertexColors: true }); let v = Float32Array.from(vertices); particles.setAttribute("position", new THREE.BufferAttribute(v, 3)); let c = Float32Array.from(colors); particles.setAttribute("color", new THREE.Float32BufferAttribute(c, 3)); let particleSystem = new THREE.Points(particles, pMaterial); scene.add(particleSystem);