Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Train Surfer 3D</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
    }
    body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #111;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #canvas-container {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    #ui-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
    }
    .hud {
      display: flex;
      justify-content: space-between;
      color: #fff;
      font-size: 24px;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    }
    .hud-box {
      background: rgba(0,0,0,0.4);
      padding: 10px 20px;
      border-radius: 10px;
      border: 2px solid rgba(255,255,255,0.1);
      backdrop-filter: blur(5px);
    }
    .score-val { color: #ffd700; }
    .coins-val { color: #00ffff; }

/* Overlay screens */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(8px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      pointer-events: auto;
      z-index: 10;
      color: #fff;
      text-align: center;
    }
    .overlay h1 {
      font-size: 56px;
      margin-bottom: 10px;
      background: linear-gradient(45deg, #ff0055, #ffdd00);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .overlay p {
      font-size: 18px;
      color: #94a3b8;
      margin-bottom: 25px;
      max-width: 400px;
    }
    .btn {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: white;
      border: none;
      padding: 15px 40px;
      font-size: 22px;
      font-weight: bold;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
      transition: all 0.2s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .btn:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 15px 30px rgba(37, 99, 235, 0.6);
    }
    .btn:active {
      transform: translateY(1px);
    }
    .controls-guide {
      margin-top: 30px;
      background: rgba(255,255,255,0.05);
      padding: 15px 25px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .controls-grid {
      display: grid;
      grid-template-columns: auto auto;
      gap: 8px 20px;
      text-align: left;
      font-size: 14px;
      color: #cbd5e1;
      margin-top: 10px;
    }
    .key {
      background: #334155;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: bold;
      color: #fff;
    }
    #game-over-screen { display: none; }

/* Mobile Controls */
    #touch-controls {
      display: none;
      pointer-events: auto;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 300px;
      margin: 0 auto;
      margin-bottom: 20px;
    }
    .touch-btn {
      background: rgba(255,255,255,0.2);
      border: 2px solid rgba(255,255,255,0.4);
      color: white;
      padding: 15px;
      border-radius: 12px;
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      touch-action: manipulation;
    }
    @media (max-width: 768px) {
      #touch-controls { display: grid; }
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

<div id="ui-layer">
    <div class="hud">
      <div class="hud-box">SCORE: <span id="score-display" class="score-val">0</span></div>
      <div class="hud-box">COINS: <span id="coins-display" class="coins-val">0</span></div>
    </div>

<div id="touch-controls">
      <div></div>
      <div class="touch-btn" id="t-up">JUMP</div>
      <div></div>
      <div class="touch-btn" id="t-left">LEFT</div>
      <div class="touch-btn" id="t-down">SLIDE</div>
      <div class="touch-btn" id="t-right">RIGHT</div>
    </div>
  </div>

<div id="start-screen" class="overlay">
    <h1>Train Surfer</h1>
    <p>Run, dodge moving trains, and collect coins in this 3D runner!</p>
    <button class="btn" id="start-btn">PLAY NOW</button>
    
    <div class="controls-guide">
      <div style="font-weight: bold; color: #f8fafc; margin-bottom: 5px;">CONTROLS:</div>
      <div class="controls-grid">
        <div><span class="key">A</span> or <span class="key">←</span></div><div>Move Left</div>
        <div><span class="key">S</span> or <span class="key">→</span></div><div>Move Right</div>
        <div><span class="key">W</span> / <span class="key">SPACE</span> / <span class="key">↑</span></div><div>Jump</div>
        <div><span class="key">D</span> or <span class="key">↓</span></div><div>Slide / Duck</div>
      </div>
    </div>
  </div>

<div id="game-over-screen" class="overlay">
    <h1 style="background: linear-gradient(45deg, #ef4444, #f97316); -webkit-background-clip: text;">CRASHED!</h1>
    <p>Final Score: <span id="final-score" style="color:#ffd700; font-weight:bold;">0</span></p>
    <p>Coins Collected: <span id="final-coins" style="color:#00ffff; font-weight:bold;">0</span></p>
    <button class="btn" id="restart-btn">RUN AGAIN</button>
  </div>

function initAudio() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
    }

function playSound(type) {
      if (!audioCtx) return;
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.connect(gain);
      gain.connect(audioCtx.destination);

const now = audioCtx.currentTime;

if (type === 'coin') {
        osc.type = 'sine';
        osc.frequency.setValueAtTime(987.77, now); // B5
        osc.frequency.setValueAtTime(1318.51, now + 0.08); // E6
        gain.gain.setValueAtTime(0.3, now);
        gain.gain.exponentialRampToValueAtTime(0.01, now + 0.25);
        osc.start(now);
        osc.stop(now + 0.25);
      } else if (type === 'jump') {
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(150, now);
        osc.frequency.exponentialRampToValueAtTime(400, now + 0.15);
        gain.gain.setValueAtTime(0.3, now);
        gain.gain.exponentialRampToValueAtTime(0.01, now + 0.15);
        osc.start(now);
        osc.stop(now + 0.15);
      } else if (type === 'crash') {
        osc.type = 'sawtooth';
        osc.frequency.setValueAtTime(120, now);
        osc.frequency.linearRampToValueAtTime(30, now + 0.4);
        gain.gain.setValueAtTime(0.5, now);
        gain.gain.exponentialRampToValueAtTime(0.01, now + 0.4);
        osc.start(now);
        osc.stop(now + 0.4);
      } else if (type === 'move') {
        osc.type = 'sine';
        osc.frequency.setValueAtTime(300, now);
        osc.frequency.exponentialRampToValueAtTime(150, now + 0.08);
        gain.gain.setValueAtTime(0.2, now);
        gain.gain.exponentialRampToValueAtTime(0.01, now + 0.08);
        osc.start(now);
        osc.stop(now + 0.08);
      }
    }

// Three.js Game Engine
    const LANES = [-3.5, 0, 3.5];
    let currentLane = 1; // 0: Left, 1: Center, 2: Right
    let targetX = LANES[currentLane];

let scene, camera, renderer;
    let player, playerGroup, playerBody;
    let tracks = [];
    let obstacles = [];
    let coins = [];
    let decorations = [];

// Game State variables
    let gameRunning = false;
    let score = 0;
    let coinCount = 0;
    let gameSpeed = 0.45;
    const baseSpeed = 0.45;
    let distanceTraveled = 0;

// Player Physics
    let isJumping = false;
    let isSliding = false;
    let jumpVelocity = 0;
    const gravity = -0.018;
    let slideTimer = 0;

// Initialize Engine
    function init() {
      const container = document.getElementById('canvas-container');

scene = new THREE.Scene();
      scene.background = new THREE.Color(0x60a5fa); // Sky Blue
      scene.fog = new THREE.FogExp2(0x60a5fa, 0.015);

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 200);
      camera.position.set(0, 5, 10);
      camera.lookAt(0, 2, -10);

renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      container.appendChild(renderer.domElement);

// Lighting
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
      scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
      dirLight.position.set(20, 40, 20);
      dirLight.castShadow = true;
      dirLight.shadow.mapSize.width = 1024;
      dirLight.shadow.mapSize.height = 1024;
      dirLight.shadow.camera.near = 0.5;
      dirLight.shadow.camera.far = 150;
      dirLight.shadow.camera.left = -20;
      dirLight.shadow.camera.right = 20;
      dirLight.shadow.camera.top = 20;
      dirLight.shadow.camera.bottom = -20;
      scene.add(dirLight);

createPlayer();
      createEnvironment();

window.addEventListener('resize', onWindowResize);
      setupControls();
    }

function createPlayer() {
      playerGroup = new THREE.Group();

// Main character mesh (Surfer)
      const bodyGeo = new THREE.BoxGeometry(1, 1.6, 0.8);
      const bodyMat = new THREE.MeshStandardMaterial({ color: 0xef4444 }); // Red Hoodie
      playerBody = new THREE.Mesh(bodyGeo, bodyMat);
      playerBody.position.y = 1.2;
      playerBody.castShadow = true;
      playerGroup.add(playerBody);

// Head
      const headGeo = new THREE.SphereGeometry(0.35, 16, 16);
      const headMat = new THREE.MeshStandardMaterial({ color: 0xfbcfe8 });
      const head = new THREE.Mesh(headGeo, headMat);
      head.position.y = 0.95;
      head.castShadow = true;
      playerBody.add(head);

// Cap
      const capGeo = new THREE.BoxGeometry(0.7, 0.15, 0.8);
      const capMat = new THREE.MeshStandardMaterial({ color: 0x3b82f6 });
      const cap = new THREE.Mesh(capGeo, capMat);
      cap.position.set(0, 0.25, -0.1);
      head.add(cap);

// Hoverboard/Surfboard
      const boardGeo = new THREE.BoxGeometry(1.2, 0.15, 2.2);
      const boardMat = new THREE.MeshStandardMaterial({ color: 0xeab308, metalness: 0.5, roughness: 0.2 });
      const board = new THREE.Mesh(boardGeo, boardMat);
      board.position.y = -0.75;
      board.castShadow = true;
      playerBody.add(board);

playerGroup.position.set(LANES[currentLane], 0, 0);
      scene.add(playerGroup);
    }

function createEnvironment() {
      // Ground plane
      const groundGeo = new THREE.PlaneGeometry(100, 400);
      const groundMat = new THREE.MeshStandardMaterial({ color: 0x334155, roughness: 0.8 });
      const ground = new THREE.Mesh(groundGeo, groundMat);
      ground.rotation.x = -Math.PI / 2;
      ground.position.z = -100;
      ground.receiveShadow = true;
      scene.add(ground);

// Generate initial tracks
      for (let i = 0; i < 3; i++) {
        createTrackLane(LANES[i]);
      }

// Populate initial side decorations (buildings/trees)
      for (let z = 20; z > -200; z -= 15) {
        spawnDecoration(z);
      }
    }

function createTrackLane(x) {
      // Rails
      const railGeo = new THREE.BoxGeometry(0.1, 0.1, 400);
      const railMat = new THREE.MeshStandardMaterial({ color: 0x94a3b8, metalness: 0.8 });

const rail1 = new THREE.Mesh(railGeo, railMat);
      rail1.position.set(x - 0.8, 0.05, -100);
      scene.add(rail1);

const rail2 = new THREE.Mesh(railGeo, railMat);
      rail2.position.set(x + 0.8, 0.05, -100);
      scene.add(rail2);

// Sleepers (Wooden ties)
      const sleeperGeo = new THREE.BoxGeometry(2, 0.08, 0.3);
      const sleeperMat = new THREE.MeshStandardMaterial({ color: 0x475569 });
      for (let z = 20; z > -300; z -= 3) {
        const sleeper = new THREE.Mesh(sleeperGeo, sleeperMat);
        sleeper.position.set(x, 0.04, z);
        sleeper.receiveShadow = true;
        scene.add(sleeper);
      }
    }

function spawnDecoration(z) {
      const isLeft = Math.random() > 0.5;
      const x = isLeft ? -15 - Math.random() * 5 : 15 + Math.random() * 5;

// Building/Pillar
      const height = 15 + Math.random() * 20;
      const geo = new THREE.BoxGeometry(8, height, 8);
      const mat = new THREE.MeshStandardMaterial({
        color: [0x1e293b, 0x0f172a, 0x334155][Math.floor(Math.random() * 3)]
      });
      const building = new THREE.Mesh(geo, mat);
      building.position.set(x, height / 2, z);
      building.castShadow = true;
      building.receiveShadow = true;
      scene.add(building);
      decorations.push(building);
    }

// Spawning Gameplay Objects
    function spawnObstacleGroup(z) {
      const lane = Math.floor(Math.random() * 3);
      const type = Math.random();

if (type < 0.5) {
        // Train Obstacle
        const trainGeo = new THREE.BoxGeometry(2.8, 3.5, 12);
        const trainMat = new THREE.MeshStandardMaterial({ color: 0x2563eb, metalness: 0.3 }); // Blue Train
        const train = new THREE.Mesh(trainGeo, trainMat);
        train.position.set(LANES[lane], 1.75, z);
        train.castShadow = true;
        train.receiveShadow = true;

// Train Front Lights
        const lightGeo = new THREE.SphereGeometry(0.2, 8, 8);
        const lightMat = new THREE.MeshBasicMaterial({ color: 0xfef08a });
        const l1 = new THREE.Mesh(lightGeo, lightMat);
        l1.position.set(-0.8, 0, 6.01);
        const l2 = new THREE.Mesh(lightGeo, lightMat);
        l2.position.set(0.8, 0, 6.01);
        train.add(l1, l2);

train.userData = { type: 'train', lane: lane, bounds: new THREE.Box3() };
        scene.add(train);
        obstacles.push(train);

// Spawn coins on top of train sometimes
        if (Math.random() > 0.4) {
          for (let cz = z - 4; cz <= z + 4; cz += 2) {
            spawnCoin(LANES[lane], 4.2, cz);
          }
        }
      } else if (type < 0.75) {
        // High Barrier (Need to Slide under)
        const barrierGeo = new THREE.BoxGeometry(3, 1.2, 0.4);
        const barrierMat = new THREE.MeshStandardMaterial({ color: 0xf59e0b });
        const barrier = new THREE.Mesh(barrierGeo, barrierMat);
        barrier.position.set(LANES[lane], 2.2, z);
        barrier.castShadow = true;

// Legs
        const legGeo = new THREE.CylinderGeometry(0.08, 0.08, 2.8);
        const legMat = new THREE.MeshStandardMaterial({ color: 0x1e293b });
        const leg1 = new THREE.Mesh(legGeo, legMat);
        leg1.position.set(-1.3, -0.8, 0);
        const leg2 = new THREE.Mesh(legGeo, legMat);
        leg2.position.set(1.3, -0.8, 0);
        barrier.add(leg1, leg2);

barrier.userData = { type: 'high_barrier', lane: lane, bounds: new THREE.Box3() };
        scene.add(barrier);
        obstacles.push(barrier);
      } else {
        // Low Hurdle (Need to Jump over)
        const hurdleGeo = new THREE.BoxGeometry(3, 0.8, 0.4);
        const hurdleMat = new THREE.MeshStandardMaterial({ color: 0xef4444 });
        const hurdle = new THREE.Mesh(hurdleGeo, hurdleMat);
        hurdle.position.set(LANES[lane], 0.4, z);
        hurdle.castShadow = true;

hurdle.userData = { type: 'low_hurdle', lane: lane, bounds: new THREE.Box3() };
        scene.add(hurdle);
        obstacles.push(hurdle);
      }

// Random ground coins in empty spots
      if (Math.random() > 0.5) {
        const coinLane = (lane + 1) % 3;
        for (let cz = z - 3; cz <= z + 3; cz += 2) {
          spawnCoin(LANES[coinLane], 0.8, cz);
        }
      }
    }

function spawnCoin(x, y, z) {
      const coinGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.1, 16);
      const coinMat = new THREE.MeshStandardMaterial({ color: 0xffd700, metalness: 0.8, roughness: 0.2 });
      const coin = new THREE.Mesh(coinGeo, coinMat);
      coin.rotation.x = Math.PI / 2;
      coin.position.set(x, y, z);
      coin.castShadow = true;

coin.userData = { bounds: new THREE.Box3() };
      scene.add(coin);
      coins.push(coin);
    }

// Input Controller setup
    function setupControls() {
      // Keyboard Controls
      window.addEventListener('keydown', (e) => {
        if (!gameRunning) return;

// Move Left: A or Arrow Left
        if (e.key === 'a' || e.key === 'A' || e.key === 'ArrowLeft') {
          if (currentLane > 0) {
            currentLane--;
            playSound('move');
          }
        } 
        // Move Right: S or Arrow Right
        else if (e.key === 's' || e.key === 'S' || e.key === 'ArrowRight') {
          if (currentLane < 2) {
            currentLane++;
            playSound('move');
          }
        } 
        // Jump: W, Space, or Arrow Up
        else if (e.key === 'w' || e.key === 'W' || e.key === ' ' || e.key === 'ArrowUp') {
          if (!isJumping) {
            isJumping = true;
            jumpVelocity = 0.38;
            playSound('jump');
          }
        } 
        // Slide / Duck: D or Arrow Down
        else if (e.key === 'd' || e.key === 'D' || e.key === 'ArrowDown') {
          if (!isSliding) {
            startSlide();
          }
        }
      });

// Mobile touch virtual buttons
      document.getElementById('t-left').onclick = () => { if (currentLane > 0) { currentLane--; playSound('move'); } };
      document.getElementById('t-right').onclick = () => { if (currentLane < 2) { currentLane++; playSound('move'); } };
      document.getElementById('t-up').onclick = () => { if (!isJumping) { isJumping = true; jumpVelocity = 0.38; playSound('jump'); } };
      document.getElementById('t-down').onclick = () => { if (!isSliding) startSlide(); };

// Touch Swipe Detection
      let touchStartX = 0;
      let touchStartY = 0;
      window.addEventListener('touchstart', (e) => {
        touchStartX = e.touches[0].clientX;
        touchStartY = e.touches[0].clientY;
      });

window.addEventListener('touchend', (e) => {
        if (!gameRunning) return;
        const dx = e.changedTouches[0].clientX - touchStartX;
        const dy = e.changedTouches[0].clientY - touchStartY;

if (Math.abs(dx) > Math.abs(dy)) {
          if (dx < -30 && currentLane > 0) { currentLane--; playSound('move'); }
          else if (dx > 30 && currentLane < 2) { currentLane++; playSound('move'); }
        } else {
          if (dy < -30 && !isJumping) { isJumping = true; jumpVelocity = 0.38; playSound('jump'); }
          else if (dy > 30 && !isSliding) { startSlide(); }
        }
      });

// UI Button Action Handlers
      document.getElementById('start-btn').onclick = startGame;
      document.getElementById('restart-btn').onclick = startGame;
    }

function startSlide() {
      isSliding = true;
      slideTimer = 25; // frames duration
      playerBody.scale.set(1, 0.4, 1);
      playerBody.position.y = 0.6;
      playSound('move');
    }

function resetSlide() {
      isSliding = false;
      playerBody.scale.set(1, 1, 1);
      playerBody.position.y = 1.2;
    }

function startGame() {
      initAudio();

// Clear existing entities
      obstacles.forEach(o => scene.remove(o));
      coins.forEach(c => scene.remove(c));
      obstacles = [];
      coins = [];

// Reset state
      score = 0;
      coinCount = 0;
      gameSpeed = baseSpeed;
      distanceTraveled = 0;
      currentLane = 1;
      playerGroup.position.set(LANES[currentLane], 0, 0);
      resetSlide();

document.getElementById('score-display').innerText = '0';
      document.getElementById('coins-display').innerText = '0';
      document.getElementById('start-screen').style.display = 'none';
      document.getElementById('game-over-screen').style.display = 'none';

// Initial obstacle spawn
      for (let z = -40; z > -160; z -= 25) {
        spawnObstacleGroup(z);
      }

gameRunning = true;
    }

function gameOver() {
      gameRunning = false;
      playSound('crash');

document.getElementById('final-score').innerText = Math.floor(score);
      document.getElementById('final-coins').innerText = coinCount;
      document.getElementById('game-over-screen').style.display = 'flex';
    }

function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    }

// Main Game Loop
    let spawnTimer = 0;

function animate() {
      requestAnimationFrame(animate);

if (gameRunning) {
        // Smooth lane switching physics
        targetX = LANES[currentLane];
        playerGroup.position.x += (targetX - playerGroup.position.x) * 0.2;

// Jump physics
        if (isJumping) {
          playerGroup.position.y += jumpVelocity;
          jumpVelocity += gravity;
          if (playerGroup.position.y <= 0) {
            playerGroup.position.y = 0;
            isJumping = false;
          }
        }

// Slide timer update
        if (isSliding) {
          slideTimer--;
          if (slideTimer <= 0) {
            resetSlide();
          }
        }

// Increase difficulty gradually
        gameSpeed = baseSpeed + (distanceTraveled * 0.00005);
        distanceTraveled += gameSpeed;
        score += gameSpeed * 0.5;
        document.getElementById('score-display').innerText = Math.floor(score);

// Spawn obstacles and coins ahead
        spawnTimer += gameSpeed;
        if (spawnTimer > 12) {
          spawnObstacleGroup(-180);
          spawnTimer = 0;
        }

// Player Bounding Box
        const playerBox = new THREE.Box3().setFromObject(playerBody);

// Move and update Obstacles
        for (let i = obstacles.length - 1; i >= 0; i--) {
          const obs = obstacles[i];
          obs.position.z += gameSpeed;

// Check collision
          obs.userData.bounds.setFromObject(obs);
          if (playerBox.intersectsBox(obs.userData.bounds)) {
            gameOver();
          }

// Remove off-screen obstacles
          if (obs.position.z > 15) {
            scene.remove(obs);
            obstacles.splice(i, 1);
          }
        }

// Move, rotate and collect Coins
        for (let i = coins.length - 1; i >= 0; i--) {
          const coin = coins[i];
          coin.position.z += gameSpeed;
          coin.rotation.z += 0.05;

coin.userData.bounds.setFromObject(coin);
          if (playerBox.intersectsBox(coin.userData.bounds)) {
            scene.remove(coin);
            coins.splice(i, 1);
            coinCount++;
            document.getElementById('coins-display').innerText = coinCount;
            playSound('coin');
            continue;
          }

if (coin.position.z > 15) {
            scene.remove(coin);
            coins.splice(i, 1);
          }
        }

// Move Scenery
        decorations.forEach(dec => {
          dec.position.z += gameSpeed;
          if (dec.position.z > 20) {
            dec.position.z = -180;
          }
        });

// Camera Follow Effects
        camera.position.x = playerGroup.position.x * 0.3;
        camera.lookAt(playerGroup.position.x * 0.5, 2, -10);
      }

renderer.render(scene, camera);
    }

// Startup
    window.onload = () => {
      init();
      animate();
    };
  </script>
</body>
</html>

Preview

Open Advanced Editor Full Screen