// Simple three.js example // https://www.jsdelivr.com/package/npm/three 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 THREE.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 shape = [ new THREE.Vector3(0, 600, 970.82), new THREE.Vector3(0, 600, -970.82), new THREE.Vector3(0, -600, -970.82), new THREE.Vector3(0, -600, 970.82), new THREE.Vector3(600, 970.82, 0), new THREE.Vector3(600, -970.82, 0), new THREE.Vector3(-600, -970.82, 0), new THREE.Vector3(-600, 970.82, 0), new THREE.Vector3(970.82, 0, 600), new THREE.Vector3(970.82, 0, -600), new THREE.Vector3(-970.82, 0, -600), new THREE.Vector3(-970.82, 0, 600), ]; let t = 0.42; let size = 1000; let focus = new THREE.Vector3(0, 0, 0); function getCol(pRat) { return new THREE.Color(pRat, 0, 1 - pRat); } let particleCount = 200000; let jump = size / 20; // -------------------------------------- let particles = null; let originalPos = []; let outwardVecs = []; let prev = new THREE.Vector3(); function onKeyPress(e) { particles = new THREE.Geometry(); let pMaterial = new THREE.PointsMaterial({ size: 2, vertexColors: THREE.VertexColors }); for (let p = 0; p < particleCount; p++) { let i = getRandomInt(shape.length); let pP = prev.clone(); let rP = shape[i].clone(); let np = getPointInBetweenByT(pP, rP, t); particle = new THREE.Vector3(np.x, np.y, np.z); prev = np; let pRat = particle.distanceTo(focus) / size; particles.vertices.push(particle); let col = getCol(pRat); particles.colors.push(col); originalPos.push(particle.clone()); outwardVecs.push(particle.clone().normalize().multiplyScalar(jump * Math.random())); } let particleSystem = new THREE.Points(particles, pMaterial); scene.add(particleSystem); } onKeyPress();