JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Obracający się dodekaedr</title>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <!-- Nie potrzebujesz ręcznie tworzyć elementu canvas; Three.js zrobi to za Ciebie -->

  <!-- Dołączanie biblioteki Three.js -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
  <script>
    // Tutaj zaczyna się cała logika
    document.addEventListener('DOMContentLoaded', () => {
      // Ustawienia sceny
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      // Tworzenie dodekaedru
      const geometry = new THREE.DodecahedronGeometry();
      const material = new THREE.MeshNormalMaterial(); // Używamy materiału, który pokazuje światło i cień
      const dodecahedron = new THREE.Mesh(geometry, material);
      scene.add(dodecahedron);

      camera.position.z = 2; // Ustawiamy kamerę trochę z dala od dodekaedru

      // Funkcja animująca
      const animate = function() {
        requestAnimationFrame(animate);

        // Obracanie dodekaedru
        dodecahedron.rotation.x += 0.01;
        dodecahedron.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();

      window.addEventListener('resize', () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
      });
    });
  </script>
</body>
</html>