3D Code Library

// Basic Three.js scene setup
const scene = new THREE.Scene();
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);
document.body.appendChild(renderer.domElement);

// Add cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

// Fragment Shader
uniform vec2 u_resolution;
uniform float u_time;

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  
  // Create gradient from bottom to top
  vec3 color = mix(
    vec3(0.2, 0.3, 0.8),  // Blue
    vec3(0.8, 0.2, 0.3),  // Red
    uv.y                   // Vertical position
  );
  
  // Add pulsing effect with time
  float pulse = sin(u_time) * 0.1 + 0.9;
  color *= pulse;
  
  gl_FragColor = vec4(color, 1.0);
}

// Physics setup with Cannon.js
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // Earth gravity

// Create a sphere body
const radius = 1;
const sphereBody = new CANNON.Body({
  mass: 5, // kg
  shape: new CANNON.Sphere(radius),
  position: new CANNON.Vec3(0, 10, 0) // Start 10m high
});
world.addBody(sphereBody);

// Create ground
const groundBody = new CANNON.Body({
  mass: 0, // Static body
  shape: new CANNON.Plane()
});
groundBody.quaternion.setFromAxisAngle(
  new CANNON.Vec3(1, 0, 0), -Math.PI/2
);
world.addBody(groundBody);

// Animation loop
const timeStep = 1/60;
function animatePhysics() {
  world.step(timeStep);
  // Update Three.js mesh to match physics body
  sphereMesh.position.copy(sphereBody.position);
  sphereMesh.quaternion.copy(sphereBody.quaternion);
  requestAnimationFrame(animatePhysics);
}
animatePhysics();

// WebXR VR Setup
import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';

// Initialize renderer with XR support
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

// Add VR button
document.body.appendChild(VRButton.createButton(renderer));

// Create scene
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x505050);

// Add controller models
const controller1 = renderer.xr.getController(0);
controller1.addEventListener('selectstart', onSelectStart);
scene.add(controller1);

// Animation loop
renderer.setAnimationLoop(function() {
  renderer.render(scene, camera);
});

function onSelectStart() {
  // Create sphere where controller points
  const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(0.1, 16, 16),
    new THREE.MeshBasicMaterial({ color: 0xff0000 })
  );
  sphere.position.set(0, 0, -0.5).applyMatrix4(controller1.matrixWorld);
  scene.add(sphere);
}

// Instanced Mesh Example
const COUNT = 10000;
const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.InstancedMesh(geometry, material, COUNT);

// Create matrix for each instance
const matrix = new THREE.Matrix4();
const positions = [];

for (let i = 0; i < COUNT; i++) {
  // Random position
  const x = Math.random() * 100 - 50;
  const y = Math.random() * 100 - 50;
  const z = Math.random() * 100 - 50;
  
  // Random rotation
  matrix.makeRotationFromEuler(
    new THREE.Euler(
      Math.random() * Math.PI,
      Math.random() * Math.PI,
      Math.random() * Math.PI
    )
  );
  
  // Set position
  matrix.setPosition(x, y, z);
  
  // Update instance
  mesh.setMatrixAt(i, matrix);
  
  // Store positions for animation
  positions.push({ x, y, z });
}

scene.add(mesh);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update all instances
  const time = Date.now() * 0.001;
  for (let i = 0; i < COUNT; i++) {
    const position = positions[i];
    matrix.makeRotationFromEuler(
      new THREE.Euler(time + i, time * 0.3 + i, time * 0.7 + i)
    );
    matrix.setPosition(
      position.x,
      position.y + Math.sin(time + i) * 2,
      position.z
    );
    mesh.setMatrixAt(i, matrix);
  }
  
  // Important: Mark as needing update
  mesh.instanceMatrix.needsUpdate = true;
  
  renderer.render(scene, camera);
}
animate();

// Bloom Effect with Three.js
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';

// Standard renderer setup
const renderer = new THREE.WebGLRenderer();
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();

// Create composer
const composer = new EffectComposer(renderer);

// Add render pass
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// Add bloom pass
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength
  0.4, // radius
  0.85 // threshold
);
composer.addPass(bloomPass);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  composer.render();
}
animate();

// GUI controls (optional)
const gui = new GUI();
const bloomFolder = gui.addFolder('Bloom');
bloomFolder.add(bloomPass, 'strength', 0, 3);
bloomFolder.add(bloomPass, 'radius', 0, 1);
bloomFolder.add(bloomPass, 'threshold', 0, 1);
bloomFolder.open();