WebGL

WepGPU까지 필요없다

<audio id="bgm" src="/BGM/8bit Bossa.mp3" preload="auto" loop></audio>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nipplejs.min.js"></script>
<script src="../js/game_ddolbae.js"></script>

<script>
  const stick = nipplejs.create({
    zone: document.getElementById('joystickZone'),
    mode: 'static',
    position: { left: '50%', top: '50%' },
    color: 'white'
  });

  stick.on('move', (evt, data) => {
    const angle = data.angle.degree;

    moveForward = angle > 20 && angle < 160;
    moveBackward = angle > 200 && angle < 340;
    moveLeft = angle > 110 && angle < 250;
    moveRight = angle < 70 || angle > 290;
  });

  stick.on('end', () => {
    moveForward = moveBackward = moveLeft = moveRight = false;
  });

  document.getElementById('btn-run').addEventListener('touchstart', () => {
    isRunning = true;
  });

  document.getElementById('btn-run').addEventListener('touchend', () => {
    isRunning = false;
  });

  document.getElementById('btn-jump').addEventListener('touchstart', () => {
    if (!isJumping && model) {
      velocityY = jumpPower;
      isJumping = true;
    }
  });

  document.getElementById('startButton').addEventListener('click', () => {
    document.getElementById('titleScreen').style.display = 'none';

    const bgm = document.getElementById('bgm');
    bgm.volume = 0.3;
    bgm.play().catch(err => console.warn('BGM 재생 실패:', err));
  });
</script>