3D na webe s Three.js: útulný kútik v jednom súbore HTML

Otáčajúci sa 3D model na landing page upúta pozornosť tak, ako to plochý obrázok nedokáže. Dobrá správa: GLB je natívny formát webového 3D sveta, takže zobraziť naše modely v prehliadači si vyžaduje prekvapivo málo kódu.

V tomto návode postavíme s Three.js malú interaktívnu scénu: čitateľský kútik s modelmi Drevené kreslo, Keramická stolová lampa, Dubový nočný stolík a Fikus lýrovitý v košíku.

Čo budete potrebovať

• Súbory GLB modelov uložené v priečinku models vedľa vášho súboru HTML.

• Lokálny webový server. Prehliadače blokujú načítavanie súborov priamo z disku, preto spustite napríklad npx serve alebo rozšírenie Live Server vo VS Code.

• Žiadne build nástroje: Three.js načítame z CDN pomocou import mapy.

Kompletný kód

Vytvorte súbor index.html s týmto obsahom:

<!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>

Premenujte stiahnuté súbory tak, aby zodpovedali názvom v kóde, alebo zmeňte názvy v kóde. Spustite lokálny server a otvorte stránku. Scénu môžete otáčať myšou a približovať kolieskom.

Čo kód robí

Renderer a scéna. Vytvoríme WebGL renderer, ktorý vyplní okno, a scénu s teplou farbou pozadia.

Osvetlenie prostredia. RoomEnvironment vygeneruje jemné svetelné prostredie podobné štúdiu. PBR materiály potrebujú prostredie, ktoré môžu odrážať, a tento jediný riadok dodá našim modelom uveriteľné odrazy bez načítavania HDRI.

Kamera a ovládanie. Perspektívna kamera sa pozerá na kútik a OrbitControls umožňuje návštevníkom scénu otáčať a približovať. Tlmenie (damping) zaistí plynulý pohyb.

Načítanie modelov. GLTFLoader načíta každý súbor GLB vrátane materiálov a textúr a vráti objekt scény, ktorý môžeme umiestniť a otočiť. Naše modely používajú reálnu mierku v metroch a počiatok majú na spodku, takže na podlahu ich umiestnite jednoducho pomocou y = 0.

Tipy na umiestnenie

• Ukladanie objektov na seba. Lampa musí stáť na stolíku. Zdvihnite ju o výšku stolíka: v riadku s pozíciou nahraďte 0 výškou stolíka alebo ju vypočítajte pomocou new THREE.Box3().setFromObject(table).

• Rotácia. rotation.y je v radiánoch: Math.PI / 2 otočí model o 90 stupňov.

• Mierka. Všetky naše modely majú rovnakú mierku, takže by ste nemali nič škálovať.

Príprava na produkciu

• Tiene. Pridajte DirectionalLight s castShadow = true a nastavte castShadow na sieťach modelov, aby objekty pôsobili ukotvene.

• Načítavacia obrazovka. Pomocou THREE.LoadingManager zobrazte priebeh, kým sa modely sťahujú.

• Kompresia. Pri veľkých scénach môžu nástroje ako gltf-transform geometriu a textúry ďalej skomprimovať. Konverzia súborov pre váš vlastný projekt je podľa našej licencie povolená.

• Jednoduchšia možnosť. Ak potrebujete len jeden model s otáčaním a priblížením, webový komponent model-viewer od Googlu zobrazí GLB jediným tagom HTML.

Teraz vy

Vymeňte čitateľský kútik za kuchyňu, detskú izbu alebo malú dedinku. Každý model v obchode je súbor GLB, ktorý funguje presne s týmto kódom.