38687-vm/assets/js/game.js

import React, { useState, useEffect, useRef, useMemo, Suspense } from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom/client';
import * as THREE from 'https://esm.sh/three';
import { Canvas, useFrame, useThree } from 'https://esm.sh/@react-three/fiber';
import { useGLTF, useAnimations, PerspectiveCamera, Environment, Stars, Float } from 'https://esm.sh/@react-three/drei';

const MODEL_URL = 'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/gltf/Horse.glb';

function Animal({ velocity }) {
  const group = useRef();
  const { scene, animations } = useGLTF(MODEL_URL);
  const { actions } = useAnimations(animations, group);

  useEffect(() => {
    // Horse model usually has an animation named 'run' or the first one is the run loop
    const animationName = animations[0]?.name;
    if (actions[animationName]) {
      actions[animationName].play();
    }
    return () => actions[animationName]?.stop();
  }, [actions, animations]);

  useFrame((state, delta) => {
    const animationName = animations[0]?.name;
    if (actions[animationName]) {
      const animScale = 0.2 + (velocity * 3.5);
      actions[animationName].setEffectiveTimeScale(animScale);
    }
    
    if (group.current) {
      group.current.rotation.z = THREE.MathUtils.lerp(group.current.rotation.z, (velocity * 0.1), 0.1);
      group.current.position.y = Math.sin(state.clock.elapsedTime * 15 * velocity) * 0.1 * velocity;
    }
  });

  return (
    <group ref={group} dispose={null} scale={[0.012, 0.012, 0.012]} position={[0, 0, 0]}>
      <primitive object={scene} rotation={[0, Math.PI, 0]} />
    </group>
  );
}

function InfiniteGround({ velocity }) {
  const meshRef = useRef();
  const texture = useMemo(() => {
    const canvas = document.createElement('canvas');
    canvas.width = 512;
    canvas.height = 512;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = '#050505';
    ctx.fillRect(0, 0, 512, 512);
    ctx.strokeStyle = '#39FF1444';
    ctx.lineWidth = 1;
    ctx.strokeRect(0, 0, 512, 512);
    const tex = new THREE.CanvasTexture(canvas);
    tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
    tex.repeat.set(100, 100);
    return tex;
  }, []);

  useFrame((state, delta) => {
    const speed = velocity * 25 * delta;
    meshRef.current.material.map.offset.y += speed;
  });

  return (
    <mesh ref={meshRef} rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.01, 0]} receiveShadow>
      <planeGeometry args={[1000, 1000]} />
      <meshStandardMaterial map={texture} roughness={0.8} metalness={0.2} />
    </mesh>
  );
}

function Trees({ velocity }) {
  const count = 40;
  const trees = useMemo(() => {
    const arr = [];
    for (let i = 0; i < count; i++) {
      arr.push({
        id: i,
        position: [
          (Math.random() - 0.5) * 60 + (Math.random() > 0.5 ? 15 : -15),
          0,
          -Math.random() * 200
        ],
        scale: 0.5 + Math.random() * 2
      });
    }
    return arr;
  }, []);

  const groupRef = useRef();

  useFrame((state, delta) => {
    const speed = velocity * 25 * delta;
    groupRef.current.children.forEach((child) => {
      child.position.z += speed;
      if (child.position.z > 20) {
        child.position.z = -180;
      }
    });
  });

  return (
    <group ref={groupRef}>
      {trees.map((tree) => (
        <group key={tree.id} position={tree.position} scale={tree.scale}>
          <mesh position={[0, 1.5, 0]} castShadow>
            <coneGeometry args={[0.5, 3, 8]} />
            <meshStandardMaterial color="#1a2e1a" />
          </mesh>
          <mesh position={[0, 0.2, 0]} castShadow>
            <cylinderGeometry args={[0.15, 0.15, 0.5, 8]} />
            <meshStandardMaterial color="#3d2b1f" />
          </mesh>
        </group>
      ))}
    </group>
  );
}

function GameScene({ velocity }) {
  return (
    <>
      <color attach="background" args={['#050505']} />
      <fog attach="fog" args={['#050505', 10, 150]} />
      
      <PerspectiveCamera makeDefault position={[0, 2, 6]} fov={50} />
      
      <ambientLight intensity={0.5} />
      <directionalLight 
        position={[10, 10, 5]} 
        intensity={1} 
        castShadow 
        shadow-mapSize-width={1024} 
        shadow-mapSize-height={1024}
      />
      <pointLight position={[-10, 5, -10]} intensity={0.5} color="#44aaff" />

      <Suspense fallback={null}>
        <Animal velocity={velocity} />
        <Trees velocity={velocity} />
        <InfiniteGround velocity={velocity} />
        <Environment preset="city" />
      </Suspense>

      <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
    </>
  );
}

function GameBridge({ onUpdate, onStart }) {
  const targetVelocity = useRef(0);
  const velocity = useRef(0);

  useEffect(() => {
    const handleScroll = (e) => {
      onStart();
      // Increased sensitivity for better feel
      const delta = Math.abs(e.deltaY) * 0.008;
      targetVelocity.current = Math.min(targetVelocity.current + delta, 1);
    };
    window.addEventListener('wheel', handleScroll, { passive: true });
    return () => window.removeEventListener('wheel', handleScroll);
  }, [onStart]);

  useFrame((state, delta) => {
    // Deceleration
    targetVelocity.current = Math.max(targetVelocity.current - (0.4 * delta), 0);
    // Smooth lerp
    velocity.current = THREE.MathUtils.lerp(velocity.current, targetVelocity.current, 0.1);
    onUpdate(velocity.current);
    
    // Speed-based effects
    state.camera.fov = 50 + (velocity.current * 25);
    state.camera.updateProjectionMatrix();
    
    if (velocity.current > 0.4) {
      state.camera.position.x = (Math.random() - 0.5) * 0.08 * velocity.current;
      state.camera.position.y = 2 + (Math.random() - 0.5) * 0.08 * velocity.current;
      state.camera.position.z = 6 + (Math.random() - 0.5) * 0.04 * velocity.current;
    } else {
      state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, 0, 0.1);
      state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, 2, 0.1);
      state.camera.position.z = THREE.MathUtils.lerp(state.camera.position.z, 6, 0.1);
    }
  });

  return null;
}

function App() {
  const [velocity, setVelocity] = useState(0);
  const [showInstructions, setShowInstructions] = useState(true);
  
  const onFrameUpdate = (v) => setVelocity(v);

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <Canvas shadows gl={{ antialias: true, powerPreference: "high-performance" }}>
        <GameScene velocity={velocity} />
        <GameBridge onUpdate={onFrameUpdate} onStart={() => setShowInstructions(false)} />
      </Canvas>
      
      <div id="ui-layer">
        <div className="speed-indicator">
          <div className="speed-label">Velocity</div>
          <div className="speed-bar-container">
            <div id="speed-bar" className="speed-bar" style={{ width: `${velocity * 100}%` }}></div>
          </div>
        </div>
      </div>

      <div className={`instructions ${showInstructions ? '' : 'hidden'}`}>
        SCROLL TO RUN
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);