3D w przeglądarce z Three.js: przytulny kącik w jednym pliku HTML

Obracający się model 3D na landing page’u przyciąga uwagę tak, jak płaski obrazek nigdy nie potrafi. Dobra wiadomość: GLB to natywny format webowego świata 3D, więc wyświetlenie naszych modeli w przeglądarce wymaga zaskakująco mało kodu.

W tym poradniku zbudujemy w Three.js małą interaktywną scenę: kącik do czytania z modelami Drewniany fotel, Ceramiczna lampa stołowa, Dębowa szafka nocna i Figowiec lirolistny w koszu.

Czego potrzebujesz

• Plików GLB modeli umieszczonych w folderze models obok pliku HTML.

• Lokalnego serwera WWW. Przeglądarki blokują wczytywanie plików bezpośrednio z dysku, więc uruchom np. npx serve lub rozszerzenie Live Server w VS Code.

• Żadnych narzędzi do budowania: wczytamy Three.js z CDN za pomocą import mapy.

Pełny kod

Utwórz plik index.html z taką zawartością:

<!doctype html>
<html>
  <head>
    <style>body { margin: 0; background: #f3efe8; }</style>
    <script type="importmap">
      { "imports": {
        "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
      } }
    </script>
  </head>
  <body>
    <script type="module">
      import * as THREE from 'three';
      import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(innerWidth, innerHeight);
      renderer.setPixelRatio(devicePixelRatio);
      document.body.appendChild(renderer.domElement);

      const scene = new THREE.Scene();
      scene.background = new THREE.Color('#f3efe8');
      const pmrem = new THREE.PMREMGenerator(renderer);
      scene.environment = pmrem.fromScene(new RoomEnvironment()).texture;

      const camera = new THREE.PerspectiveCamera(40, innerWidth / innerHeight, 0.1, 100);
      camera.position.set(2.5, 1.6, 3);
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.target.set(0, 0.6, 0);
      controls.enableDamping = true;

      const loader = new GLTFLoader();
      const place = (file, x, z, rotY = 0) =>
        loader.load('models/' + file, (gltf) => {
          gltf.scene.position.set(x, 0, z);
          gltf.scene.rotation.y = rotY;
          scene.add(gltf.scene);
        });

      place('wooden-armchair.glb', 0, 0, 0.4);
      place('oak-bedside-table.glb', 0.9, -0.2);
      place('ceramic-table-lamp.glb', 0.9, -0.2);
      place('fiddle-leaf-fig.glb', -0.9, -0.4);

      renderer.setAnimationLoop(() => { controls.update(); renderer.render(scene, camera); });

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

Zmień nazwy pobranych plików tak, by pasowały do nazw w kodzie, albo zmień nazwy w kodzie. Uruchom lokalny serwer i otwórz stronę. Scenę możesz obracać myszą i przybliżać kółkiem.

Co robi ten kod

Renderer i scena. Tworzymy renderer WebGL, który wypełnia całe okno, oraz scenę z ciepłym kolorem tła.

Oświetlenie otoczenia. RoomEnvironment generuje miękkie, studyjne otoczenie świetlne. Materiały PBR potrzebują otoczenia, które mogą odbijać, a ta jedna linijka daje naszym modelom wiarygodne odbicia bez wczytywania HDRI.

Kamera i sterowanie. Kamera perspektywiczna patrzy na kącik, a OrbitControls pozwala odwiedzającym obracać i przybliżać widok. Tłumienie (damping) sprawia, że ruch jest płynny.

Wczytywanie modeli. GLTFLoader odczytuje każdy plik GLB wraz z materiałami i teksturami i zwraca obiekt sceny, który możemy ustawić i obrócić. Nasze modele mają rzeczywistą skalę w metrach i punkt początkowy u podstawy, więc aby postawić je na podłodze, wystarczy y = 0.

Wskazówki dotyczące rozmieszczania

• Ustawianie obiektów jeden na drugim. Lampa musi stać na szafce. Podnieś ją o wysokość szafki: w linii z pozycją zastąp 0 wysokością szafki albo oblicz ją za pomocą new THREE.Box3().setFromObject(table).

• Obrót. rotation.y jest wyrażone w radianach: Math.PI / 2 obraca model o 90 stopni.

• Skala. Wszystkie nasze modele mają tę samą skalę, więc nie powinno być potrzeby niczego skalować.

Przygotowanie do produkcji

• Cienie. Dodaj DirectionalLight z castShadow = true i ustaw castShadow na siatkach modeli, aby obiekty były „osadzone” na podłodze.

• Ekran ładowania. Użyj THREE.LoadingManager, aby pokazywać postęp podczas pobierania modeli.

• Kompresja. W przypadku dużych scen narzędzia takie jak gltf-transform mogą dodatkowo skompresować geometrię i tekstury. Nasza licencja pozwala konwertować pliki na potrzeby własnego projektu.

• Prostsza opcja. Jeśli potrzebujesz tylko jednego modelu z obracaniem i przybliżaniem, komponent webowy model-viewer od Google wyświetli plik GLB za pomocą jednego znacznika HTML.

Twoja kolej

Zamień kącik do czytania na kuchnię, pokój zabaw albo maleńką wioskę. Każdy model w sklepie to plik GLB, który działa z dokładnie tym samym kodem.