3D på webben med Three.js: en mysig hörna i en enda HTML-fil

En roterande 3D-modell på en landningssida fångar uppmärksamheten på ett sätt som en platt bild inte kan. Den goda nyheten: GLB är webb-3D-världens eget format, så det krävs förvånansvärt lite kod för att visa våra modeller i en webbläsare.

I den här guiden bygger vi en liten interaktiv scen med Three.js: en läshörna med Fåtölj i trä, Bordslampa i keramik, Sängbord i ek och Fiolfikus i korg.

Det här behöver du

• Modellernas GLB-filer, placerade i en mapp som heter models bredvid din HTML-fil.

• En lokal webbserver. Webbläsare blockerar inläsning av filer direkt från disken, så kör till exempel npx serve eller tillägget Live Server i VS Code.

• Inga byggverktyg: vi läser in Three.js från ett CDN med en import map.

Hela koden

Skapa index.html med följande innehåll:

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

Byt namn på de nedladdade filerna så att de matchar namnen i koden, eller ändra namnen i koden. Starta din lokala server och öppna sidan. Du kan rotera scenen med musen och zooma med scrollhjulet.

Vad koden gör

Renderare och scen. Vi skapar en WebGL-renderare som fyller fönstret och en scen med en varm bakgrundsfärg.

Miljöbelysning. RoomEnvironment genererar en mjuk, studioliknande ljusmiljö. PBR-material behöver en miljö att reflektera, och den här enda raden ger våra modeller trovärdiga reflexer utan att vi behöver ladda en HDRI.

Kamera och kontroller. En perspektivkamera riktas mot hörnan, och OrbitControls låter besökarna rotera och zooma. Dämpningen (damping) gör att rörelsen känns mjuk.

Inläsning av modeller. GLTFLoader läser varje GLB, inklusive material och texturer, och ger oss ett scenobjekt som vi kan placera och rotera. Våra modeller använder verklig skala i meter och har sin origo vid basen, så att placera dem på golvet är bara y = 0.

Tips för placering

• Stapla objekt. Lampan ska stå ovanpå bordet. Höj den med bordets höjd: ersätt 0 med bordets höjd på positionsraden, eller räkna ut den med new THREE.Box3().setFromObject(table).

• Rotation. rotation.y anges i radianer: Math.PI / 2 vrider en modell 90 grader.

• Skala. Alla våra modeller har samma skala, så du ska inte behöva skala något.

Gör den redo för produktion

• Skuggor. Lägg till ett DirectionalLight med castShadow = true och sätt castShadow på modellernas meshar så att objekten står stadigt på marken.

• Laddningsskärm. Använd THREE.LoadingManager för att visa förloppet medan modellerna laddas ner.

• Komprimering. För stora scener kan verktyg som gltf-transform komprimera geometri och texturer ytterligare. Att konvertera filer för ditt eget projekt är tillåtet enligt vår licens.

• Enklare alternativ. Behöver du bara en enda modell med rotation och zoom visar Googles webbkomponent model-viewer en GLB med en enda HTML-tagg.

Din tur

Byt ut läshörnan mot ett kök, ett lekrum eller en liten by. Varje modell i butiken är en GLB som fungerar med exakt den här koden.