3D op het web met Three.js: een gezellig hoekje in één HTML-bestand

Een draaiend 3D-model op een landingspagina trekt de aandacht op een manier die een platte afbeelding niet kan. Het goede nieuws: GLB is het eigen formaat van de 3D-wereld op het web, dus onze modellen in een browser tonen vraagt verrassend weinig code.

In deze tutorial bouwen we met Three.js een kleine interactieve scène: een leeshoek met de Houten fauteuil, Keramische tafellamp, Eiken nachtkastje en Vioolbladplant in mand.

Wat je nodig hebt

• De GLB-bestanden van de modellen, in een map models naast je HTML-bestand.

• Een lokale webserver. Browsers blokkeren het rechtstreeks laden van bestanden vanaf de schijf, dus draai iets als npx serve of de extensie Live Server in VS Code.

• Geen buildtools: we laden Three.js vanaf een CDN met een import map.

De volledige code

Maak index.html aan met deze inhoud:

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

Hernoem je gedownloade bestanden zodat ze overeenkomen met de namen in de code, of pas de namen in de code aan. Start je lokale server en open de pagina. Je kunt de scène met de muis draaien en met het scrollwiel zoomen.

Wat de code doet

Renderer en scène. We maken een WebGL-renderer die het venster vult en een scène met een warme achtergrondkleur.

Omgevingslicht. RoomEnvironment genereert een zachte, studioachtige lichtomgeving. PBR-materialen hebben een omgeving nodig om te reflecteren, en deze ene regel geeft onze modellen geloofwaardige reflecties zonder dat je een HDRI hoeft te laden.

Camera en besturing. Een perspectiefcamera kijkt naar de hoek, en met OrbitControls kunnen bezoekers draaien en zoomen. Damping zorgt ervoor dat de beweging soepel aanvoelt.

Modellen laden. GLTFLoader leest elke GLB in, inclusief materialen en textures, en geeft ons een scèneobject dat we kunnen positioneren en draaien. Onze modellen gebruiken ware grootte in meters en hebben hun oorsprong aan de onderkant, dus ze op de vloer zetten is gewoon y = 0.

Tips voor het positioneren

• Objecten stapelen. De lamp moet bovenop het tafeltje staan. Verhoog hem met de hoogte van het tafeltje: vervang 0 in de positieregel door de hoogte van het tafeltje, of bereken die met new THREE.Box3().setFromObject(table).

• Rotatie. rotation.y is in radialen: Math.PI / 2 draait een model 90 graden.

• Schaal. Al onze modellen delen dezelfde schaal, dus je hoeft niets te schalen.

Klaar maken voor productie

• Schaduwen. Voeg een DirectionalLight toe met castShadow = true en zet castShadow aan op de meshes van de modellen, zodat objecten echt op de grond staan.

• Laadscherm. Gebruik THREE.LoadingManager om de voortgang te tonen terwijl de modellen downloaden.

• Compressie. Voor grote scènes kunnen tools zoals gltf-transform geometrie en textures verder comprimeren. Bestanden converteren voor je eigen project is toegestaan onder onze licentie.

• Eenvoudiger alternatief. Heb je maar één model nodig met draaien en zoomen, dan toont de webcomponent model-viewer van Google een GLB met één HTML-tag.

Nu jij

Vervang de leeshoek door een keuken, een speelkamer of een piepklein dorpje. Elk model in de winkel is een GLB die met precies deze code werkt.