3D på nettet med Three.js: en koselig krok i én HTML-fil

En roterende 3D-modell på en landingsside fanger oppmerksomheten på en måte et flatt bilde ikke kan. Den gode nyheten: GLB er det opprinnelige formatet i 3D-verdenen på nettet, så det krever overraskende lite kode å vise modellene våre i en nettleser.

I denne veiledningen bygger vi en liten interaktiv scene med Three.js: en lesekrok med Lenestol i tre, Bordlampe i keramikk, Nattbord i eik og Fiolinfiken i kurv.

Dette trenger du

• GLB-filene til modellene, lagt i en models-mappe ved siden av HTML-filen.

• En lokal webserver. Nettlesere blokkerer innlasting av filer direkte fra disken, så kjør for eksempel npx serve eller Live Server-utvidelsen i VS Code.

• Ingen byggeverktøy: Vi laster Three.js fra et CDN ved hjelp av et import map.

Hele koden

Opprett index.html med dette innholdet:

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

Gi de nedlastede filene nytt navn slik at de samsvarer med navnene i koden, eller endre navnene i koden. Start den lokale serveren og åpne siden. Du kan rotere scenen med musen og zoome med rullehjulet.

Hva koden gjør

Renderer og scene. Vi lager en WebGL-renderer som fyller vinduet, og en scene med varm bakgrunnsfarge.

Miljølys. RoomEnvironment genererer et mykt, studiolignende lysmiljø. PBR-materialer trenger et miljø å reflektere, og denne ene linjen gir modellene våre troverdige refleksjoner uten å laste inn en HDRI.

Kamera og kontroller. Et perspektivkamera ser mot kroken, og OrbitControls lar besøkende rotere og zoome. Demping (damping) gjør bevegelsen myk.

Innlasting av modeller. GLTFLoader leser hver GLB-fil, inkludert materialer og teksturer, og gir oss et sceneobjekt vi kan plassere og rotere. Modellene våre bruker virkelig skala i meter og har origo i bunnen, så å plassere dem på gulvet er bare y = 0.

Tips til plassering

• Stable objekter. Lampen må stå oppå bordet. Hev den med bordets høyde: Erstatt 0 med bordhøyden i posisjonslinjen, eller beregn den med new THREE.Box3().setFromObject(table).

• Rotasjon. rotation.y er i radianer: Math.PI / 2 snur en modell 90 grader.

• Skala. Alle modellene våre har samme skala, så du skal ikke trenge å skalere noe.

Gjør den klar for produksjon

• Skygger. Legg til et DirectionalLight med castShadow = true og sett castShadow på modellenes nett, så står objektene støtt på bakken.

• Lasteskjerm. Bruk THREE.LoadingManager til å vise fremdriften mens modellene lastes ned.

• Komprimering. For store scener kan verktøy som gltf-transform komprimere geometri og teksturer ytterligere. Å konvertere filer til ditt eget prosjekt er tillatt etter lisensen vår.

• Enklere alternativ. Trenger du bare én modell med rotering og zoom, viser Googles webkomponent model-viewer en GLB-fil med én enkelt HTML-tagg.

Din tur

Bytt ut lesekroken med et kjøkken, et lekerom eller en bitteliten landsby. Hver modell i butikken er en GLB-fil som fungerer med akkurat denne koden.