Luminacid_IDE

Multi-Engine Creative Coding Environment

ANALYZING...

// Interactive Wormhole Tunnel - Three.js
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.02);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

// Create wormhole tunnel
const tunnelGeometry = new THREE.CylinderGeometry(5, 5, 200, 32, 1, true);
const tunnelMaterial = new THREE.MeshBasicMaterial({
  color: 0x00ffff,
  wireframe: true,
  transparent: true,
  opacity: 0.3
});
const tunnel = new THREE.Mesh(tunnelGeometry, tunnelMaterial);
tunnel.rotation.z = Math.PI / 2;
scene.add(tunnel);

// Particle system
const particlesGeometry = new THREE.BufferGeometry();
const particlesCount = 2000;
const posArray = new Float32Array(particlesCount * 3);
const speedArray = new Float32Array(particlesCount);

for(let i = 0; i < particlesCount * 3; i += 3) {
  posArray[i] = (Math.random() - 0.5) * 100;
  posArray[i+1] = (Math.random() - 0.5) * 100;
  posArray[i+2] = (Math.random() - 0.5) * 200;
  speedArray[i/3] = Math.random() * 0.5 + 0.1;
}

particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
const particlesMaterial = new THREE.PointsMaterial({
  size: 0.5,
  color: 0xff00ff,
  transparent: true,
  opacity: 0.8,
  blending: THREE.AdditiveBlending
});
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);

// Lighting
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const pointLight = new THREE.PointLight(0x00ffff, 1, 100);
pointLight.position.set(0, 0, 0);
scene.add(pointLight);

camera.position.z = 5;

// Mouse interaction
let mouseX = 0;
let mouseY = 0;
document.addEventListener('mousemove', (event) => {
  mouseX = (event.clientX / window.innerWidth) * 2 - 1;
  mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
});

// Animation
let time = 0;
function animate() {
  requestAnimationFrame(animate);
  time += 0.01;
  
  // Rotate tunnel
  tunnel.rotation.x += 0.005;
  tunnel.rotation.y += 0.01;
  
  // Animate particles
  const positions = particles.geometry.attributes.position.array;
  for(let i = 0; i < particlesCount; i++) {
    positions[i * 3 + 2] += speedArray[i];
    if(positions[i * 3 + 2] > 100) {
      positions[i * 3 + 2] = -100;
    }
  }
  particles.geometry.attributes.position.needsUpdate = true;
  particles.rotation.z = time * 0.1;
  
  // Camera movement based on mouse
  camera.position.x += (mouseX * 2 - camera.position.x) * 0.05;
  camera.position.y += (mouseY * 2 - camera.position.y) * 0.05;
  camera.lookAt(0, 0, -50);
  
  // Color cycling
  const hue = (time * 0.1) % 1;
  tunnelMaterial.color.setHSL(hue, 1, 0.5);
  particlesMaterial.color.setHSL((hue + 0.5) % 1, 1, 0.5);
  
  renderer.render(scene, camera);
}

// Resize handler
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

animate();

Engine: threejs

History: 1/1Engine: threejs

Ctrl+Enter to RunCtrl+S to ExportCtrl+Z to Undo