import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer, controls; let lineGroup; // Group to hold individual line segments (Inner Cube) let outerLineGroup; // Group to hold individual line segments (Outer Cube) let innerParticles; // Particle system for the dots in the inner cube let outerParticles; // Particle system for the dots in the outer cube let currentLineIndex = 0; let outerCurrentLineIndex = 0; const MAX_LINES = 12; // A cube has 12 edges let frameCounter = 0; let innerCubeFormed = false; let outerCubeFormed = false; // Inner Cube size const INNER_SIZE = 1; // Outer Cube size const OUTER_SIZE = 3; // Define the 8 vertices of the inner cube const vInner = [ new THREE.Vector3(-INNER_SIZE, -INNER_SIZE, -INNER_SIZE), // V0 new THREE.Vector3( INNER_SIZE, -INNER_SIZE, -INNER_SIZE), // V1 new THREE.Vector3( INNER_SIZE, INNER_SIZE, -INNER_SIZE), // V2 new THREE.Vector3(-INNER_SIZE, INNER_SIZE, -INNER_SIZE), // V3 new THREE.Vector3(-INNER_SIZE, -INNER_SIZE, INNER_SIZE), // V4 new THREE.Vector3( INNER_SIZE, -INNER_SIZE, INNER_SIZE), // V5 new THREE.Vector3( INNER_SIZE, INNER_SIZE, INNER_SIZE), // V6 new THREE.Vector3(-INNER_SIZE, INNER_SIZE, INNER_SIZE) // V7 ]; // Define the 8 vertices of the outer cube const vOuter = [ new THREE.Vector3(-OUTER_SIZE, -OUTER_SIZE, -OUTER_SIZE), new THREE.Vector3( OUTER_SIZE, -OUTER_SIZE, -OUTER_SIZE), new THREE.Vector3( OUTER_SIZE, OUTER_SIZE, -OUTER_SIZE), new THREE.Vector3(-OUTER_SIZE, OUTER_SIZE, -OUTER_SIZE), new THREE.Vector3(-OUTER_SIZE, -OUTER_SIZE, OUTER_SIZE), new THREE.Vector3( OUTER_SIZE, -OUTER_SIZE, OUTER_SIZE), new THREE.Vector3( OUTER_SIZE, OUTER_SIZE, OUTER_SIZE), new THREE.Vector3(-OUTER_SIZE, OUTER_SIZE, OUTER_SIZE) ]; // Define the 12 edges (pairs of vertex indices) - same for both cubes const edges = [ [0, 1], [1, 2], [2, 3], [3, 0], // Bottom face [4, 5], [5, 6], [6, 7], [7, 4], // Top face [0, 4], [1, 5], [2, 6], [3, 7] // Connecting edges ]; // Inner Particle system constants const INNER_MAX_PARTICLES = 3; const INNER_PARTICLE_ADD_RATE = 1; // How many particles to add per frame until 3 are reached const REPULSION_RADIUS = 0.5; const REPULSION_STRENGTH = 0.0005; // Outer Particle system constants const OUTER_MAX_PARTICLES = 2; const OUTER_PARTICLE_ADD_RATE = 1; // Array to store particle velocities for both systems const innerParticleVelocities = []; const outerParticleVelocities = []; function init() { scene = new THREE.Scene(); scene.background = new THREE.Color(0x111111); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 8; renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.outputColorSpace = THREE.SRGBColorSpace; document.body.appendChild(renderer.domElement); controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // Inner Cube Group (contains lines and particles) lineGroup = new THREE.Group(); scene.add(lineGroup); // Outer Cube Group outerLineGroup = new THREE.Group(); scene.add(outerLineGroup); // --- Initialize Inner Particle system (3 dots) --- innerParticles = createParticleSystem(INNER_MAX_PARTICLES, innerParticleVelocities); lineGroup.add(innerParticles); // Add particles to the inner cube group // --- Initialize Outer Particle system (2 dots) --- outerParticles = createParticleSystem(OUTER_MAX_PARTICLES, outerParticleVelocities); outerLineGroup.add(outerParticles); // Add particles to the outer cube group window.addEventListener('resize', onWindowResize); } function createParticleSystem(maxParticles, velocitiesArray) { const geometry = new THREE.BufferGeometry(); const positions = new Float32Array(maxParticles * 3); const colors = new Float32Array(maxParticles * 3); geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); geometry.setDrawRange(0, 0); // Start with 0 particles const material = new THREE.PointsMaterial({ size: 0.1, // Slightly larger dots for better visibility vertexColors: true, transparent: true, blending: THREE.AdditiveBlending, sizeAttenuation: true }); // Initialize particle velocities for (let i = 0; i < maxParticles; i++) { velocitiesArray.push(new THREE.Vector3(0, 0, 0)); } return new THREE.Points(geometry, material); } function addLineSegment(startIndex, vertices, group) { const startVertex = vertices[edges[startIndex][0]]; const endVertex = vertices[edges[startIndex][1]]; const geometry = new THREE.BufferGeometry().setFromPoints([startVertex, endVertex]); // Generate a random color for the new line const randomColor = new THREE.Color(Math.random(), Math.random(), Math.random()); const material = new THREE.LineBasicMaterial({ color: randomColor, linewidth: 2 }); const line = new THREE.LineSegments(geometry, material); group.add(line); } function addParticle(pointsMesh, maxCount, size, velocitiesArray) { const positions = pointsMesh.geometry.attributes.position.array; let drawCount = pointsMesh.geometry.drawRange.count / 3; if (drawCount < maxCount) { // Calculate the starting index for the new particle const i = drawCount; // Random position within the specified cube boundaries positions[i * 3 + 0] = Math.random() * 2 * size - size; positions[i * 3 + 1] = Math.random() * 2 * size - size; positions[i * 3 + 2] = Math.random() * 2 * size - size; // Random color pointsMesh.geometry.attributes.color.array[i * 3 + 0] = Math.random(); pointsMesh.geometry.attributes.color.array[i * 3 + 1] = Math.random(); pointsMesh.geometry.attributes.color.array[i * 3 + 2] = Math.random(); // Initialize particle velocity velocitiesArray[i].set(0, 0, 0); // Update draw range pointsMesh.geometry.setDrawRange(0, (drawCount + 1) * 3); pointsMesh.geometry.attributes.position.needsUpdate = true; pointsMesh.geometry.attributes.color.needsUpdate = true; } } function updateParticles(pointsMesh, size, velocitiesArray) { const positions = pointsMesh.geometry.attributes.position.array; const count = pointsMesh.geometry.drawRange.count / 3; for (let i = 0; i < count; i++) { const i3 = i * 3; const posI = new THREE.Vector3(positions[i3], positions[i3 + 1], positions[i3 + 2]); let force = new THREE.Vector3(0, 0, 0); // Apply repulsion only if it's the inner cube's particles if (pointsMesh === innerParticles) { for (let j = 0; j < count; j++) { if (i === j) continue; const j3 = j * 3; const posJ = new THREE.Vector3(positions[j3], positions[j3 + 1], positions[j3 + 2]); const distance = posI.distanceTo(posJ); if (distance < REPULSION_RADIUS && distance > 0.01) { // Calculate repulsion vector const repulsion = posI.clone().sub(posJ); // Inverse square law for repulsion strength const strength = REPULSION_STRENGTH / (distance * distance); // Add force to the total force vector force.add(repulsion.normalize().multiplyScalar(strength)); } } } // Apply force to velocity (simple Euler integration) velocitiesArray[i].add(force); // Apply friction/drag to velocity velocitiesArray[i].multiplyScalar(0.98); // Update position posI.add(velocitiesArray[i]); // Keep particles within the cube boundaries posI.x = THREE.MathUtils.clamp(posI.x, -size, size); posI.y = THREE.MathUtils.clamp(posI.y, -size, size); posI.z = THREE.MathUtils.clamp(posI.z, -size, size); // Update positions array positions[i3] = posI.x; positions[i3 + 1] = posI.y; positions[i3 + 2] = posI.z; } pointsMesh.geometry.attributes.position.needsUpdate = true; } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); controls.update(); // Rotate the cube/particle groups slowly lineGroup.rotation.x += 0.005; lineGroup.rotation.y += 0.008; outerLineGroup.rotation.x -= 0.001; outerLineGroup.rotation.y -= 0.003; if (!innerCubeFormed) { // Add a new line every 30 frames (about 0.5 second at 60fps) if (currentLineIndex < MAX_LINES && frameCounter % 30 === 0) { addLineSegment(currentLineIndex, vInner, lineGroup); currentLineIndex++; } if (currentLineIndex >= MAX_LINES) { innerCubeFormed = true; } } else { // 1. Once the inner cube is formed, start filling it with dots and updating repulsion const innerDotCount = innerParticles.geometry.drawRange.count / 3; if (innerDotCount < INNER_MAX_PARTICLES) { for (let i = 0; i < INNER_PARTICLE_ADD_RATE; i++) { addParticle(innerParticles, INNER_MAX_PARTICLES, INNER_SIZE, innerParticleVelocities); } } updateParticles(innerParticles, INNER_SIZE, innerParticleVelocities); // 2. Start building the outer cube if (!outerCubeFormed) { if (outerCurrentLineIndex < MAX_LINES && frameCounter % 60 === 0) { addLineSegment(outerCurrentLineIndex, vOuter, outerLineGroup); outerCurrentLineIndex++; } if (outerCurrentLineIndex >= MAX_LINES) { outerCubeFormed = true; } } else { // 3. Outer cube is formed, add 2 dots to it const outerDotCount = outerParticles.geometry.drawRange.count / 3; if (outerDotCount < OUTER_MAX_PARTICLES) { for (let i = 0; i < OUTER_PARTICLE_ADD_RATE; i++) { // Add dots to the outer cube volume addParticle(outerParticles, OUTER_MAX_PARTICLES, OUTER_SIZE, outerParticleVelocities); } } // Keep the outer dots moving slightly (no repulsion needed, just the drag/friction) updateParticles(outerParticles, OUTER_SIZE, outerParticleVelocities); } } frameCounter++; renderer.render(scene, camera); } init(); animate();

Thev

Cubitry

Cubitry