Code Playground

console.log("Event Fired")
let spiralMaterial;
let spiralMesh;
let time = 0;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
composer.addPass(renderPass);

const bloomPass = new THREE.UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  2.0, 
  0.3, 
  0.1
);
composer.addPass(bloomPass);

function resizeRendererToDisplaySize() {
  const canvas = renderer.domElement;
  const width = window.innerWidth;
  const height = window.innerHeight;
  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height, false);
    composer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;

camera.position.set(0, -0.0875, 700);
camera.lookAt(0, 0, 0);

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

const pointLight = new THREE.PointLight(0xff0fff, 1.0);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

function createBaseTriangle() {
  const baseGeometry = new THREE.ConeGeometry(8, 24, 30);
  const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x44afa4 });
  const baseCliff = new THREE.Mesh(baseGeometry, baseMaterial);

baseCliff.rotation.z = Math.PI;
  baseCliff.position.set(0, -10, -10);
  scene.add(baseCliff);

const tipGeometry = new THREE.ConeGeometry(20, 25, 3);
  const tipMaterial = new THREE.MeshStandardMaterial({ color: 0xafa8f8, flatShading: true });
  const tipCliff = new THREE.Mesh(tipGeometry, tipMaterial);

tipCliff.rotation.z = Math.PI;
  tipCliff.position.set(0, 12, 0);
  baseCliff.add(tipCliff);

spiralMesh = createFibonacciSpiral();
  spiralMesh.position.set(0, 5, 0);
}

function createFibonacciSpiral(scaleFactor = 16.2, sqrtValue = 5) {
  const spiralGeometry = new THREE.BufferGeometry();
  const positions = [];
  const numPoints = 2000;
  const goldenRatio = (1 + Math.sqrt(sqrtValue)) / 2;

for (let i = 0; i < numPoints; i++) {
    const angle = i * Math.PI * 2 * goldenRatio;
    const radius = scaleFactor * Math.sqrt(i);
    const x = radius * Math.cos(angle);
    const y = radius * Math.sin(angle);
    const z = i * 0.39;
    positions.push(x, y, z);
  }

const positionAttribute = new THREE.Float32BufferAttribute(positions, 3);
  spiralGeometry.setAttribute('position', positionAttribute);

spiralMaterial = new THREE.LineBasicMaterial({ color: 0xffaaf0 });
  const spiralLine = new THREE.Line(spiralGeometry, spiralMaterial);

return spiralLine;
}

// Create random particles in the scene
function createParticles() {
  const particleGroup = new THREE.Group();

for (let i = 0; i < 300; i++) {
    const size = Math.random() * 2 + 0.5;
    const particleGeometry = new THREE.CircleGeometry(size, 16);
    const particleMaterial = new THREE.MeshBasicMaterial({
      color: new THREE.Color(`hsl(${Math.random() * 180}, 100%, 50%)`),
      side: THREE.DoubleSide,
    });
    const particle = new THREE.Mesh(particleGeometry, particleMaterial);

particle.position.set(
      (Math.random() - 0.5) * 1000,
      (Math.random() - 0.5) * 1000,
      (Math.random() - 0.5) * 1000
    );

particleGroup.add(particle);
  }

scene.add(particleGroup);
}

createBaseTriangle();
createParticles();

function animate() {
  const scaleFactor = (Math.sin(time) + 1) * 4 + 0.2;
  const sqrtValue = 5 + (Math.sin(time * 0.002) + 1) * (15 - 5) / 2;
  scene.remove(spiralMesh);
  spiralMesh = createFibonacciSpiral(scaleFactor, sqrtValue);
  spiralMesh.position.set(0, 5, 0);

const color = new THREE.Color(`hsl(${(time * 150) % 1080}, 100%, 50%)`);
  spiralMaterial.color.set(color);
  scene.add(spiralMesh);

bloomPass.strength = 0.5 + Math.sin(time * 0.2) * 0.2; 
  bloomPass.radius = 0.1 + Math.sin(time * 0.1) * 0.1;

time += 0.004;

resizeRendererToDisplaySize();
  controls.update();

composer.render();

requestAnimationFrame(animate);
}

animate();

Frontend Forever App