// 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 shape = [ new THREE.Vector3(-970.82, 970.82, 970.82), new THREE.Vector3( 970.82, -970.82, 970.82), new THREE.Vector3( 970.82, 970.82, -970.82), new THREE.Vector3( 970.82, -970.82, -970.82), new THREE.Vector3(-970.82, 970.82, -970.82), new THREE.Vector3(-970.82, -970.82, 970.82), new THREE.Vector3( 970.82, 970.82, 970.82), new THREE.Vector3(-970.82, -970.82, -970.82), new THREE.Vector3( 0, 970.82^2, 600), new THREE.Vector3( 0, 970.82^2, -600), new THREE.Vector3( 0, -970.82^2, 600), new THREE.Vector3( 0, -970.82^2, 600), new THREE.Vector3( 970.82^2, 600, 0), new THREE.Vector3( 970.82^2, -600, 0), new THREE.Vector3(-970.82^2, 600, 0), new THREE.Vector3(-970.82^2, -600, 0), new THREE.Vector3( 600, 0, 970.82^2), new THREE.Vector3(-600, 0, 970.82^2), new THREE.Vector3( 600, 0, -970.82^2), new THREE.Vector3(-600, 0, -970.82^2), ]; let t = 0.32; let size = 400; let focus = new THREE.Vector3(0, 0, 0); function getCol(pRat) { return new THREE.Color(0, pRat - 0.8, pRat + 0.8); } let particleCount = 200000; let jump = size / 20; // -------------------------------------- let prev = new THREE.Vector3(); let vertices = []; let colors = []; 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); 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);