14 maart 2023

Virtual 3D Printing

3D printen, maar dan naar web. Met behulp van @react-three/fiber toon ik je met een aantal stappen hoe je zelfgemaakte of gedownloade 3D bestanden niet alleen kunt printen, maar ook kunt 'printen' op je website. Natuurlijk in React met TypeScript.

Je leest hier stap voor stap hoe je een in de 3D printing scene veelgebruikt test STL bestand, het 3D Benchy model importeert in Blender. Hoe je het vervolgens exporteert als 3D scene en deze scene met behulp van Three.js en @react-three/fiber als een React TypeScript component rendert. Naast dit virtuele 3D printen, eigenlijk 3D web rendering, laat ik zien hoe je hetzelfde STL model daadwerkelijk 3D print.

TL;DR

Druk, druk, geen tijd om dit allemaal te gaan lezen? Clone gewoon de bijbehorende git repo en check hier hoe het eruit gaat zien.

1. 3D Benchy model

Het 3D Benchy model wordt normaal gebruikt om verschillende printers, als ook verschillende print instellingen met elkaar te kunnen vergelijken, te benchmarken. Ook wordt het gebruikt om 3D printer instellingen vooraf te testen met een klein modelletje, alvorens een groot model te printen wat erg tijdsintensief kan zijn. Het 3D Benchy model heeft een groot aantal geometrisch interessante aspecten waarmee je een printer goed kunt testen op zijn capaciteiten en prestaties. Om deze reden is dit geinige sleepbootje zo populair.

Download het 3D Benchy model van de officiële website: 3dbenchy.com
Volg de download links en download het zip bestand.

Tip: op de 3D Benchy website vind je links naar diverse 3D model sharing websites zoals, bijv. Thingiverse. Hier vind je allerlei modellen die je kunt printen, maar natuurlijk ook kunt web renderen.

Pak het zip bestand uit en controleer of je in de files folder het 3DBenchy.stl bestand hebt staan. Indien je dit niet kunt vinden, kun je het STL bestand ook via deze link direct downloaden.

2. Blender

Blender is fantastische open-source software die wordt gebruikt om 3D modellen te maken, te animeren en te renderen. Het is populair onder 3D ontwerpers vanwege zijn veelzijdigheid en krachtige functies. Hier volgt een korte instructie hoe je het 3D Benchy model kunt importeren en kunt voorbereiden om naar web te renderen.

Download Blender van blender.org
Installeer en open Blender op je computer.
Standaard opent Blender met een 3D scene met daarin de standaard kubus (Cube), alsook licht (Light) en een camera (Camera). Laat de kubus voorlopig nog even staan! We hergebruiken de scene namelijk in deze tutorial.
Ga naar File > Import > Stl (.stl) en importeer het 3DBenchy.stl bestand. Het STL model wordt dwars door de kubus heen binnen de scene geplaatst.

Het 3D Benchy model is veel groter dan de kubus, om de scene zonder aanpassingen her te gebruiken schalen we het sleepbootje naar 10%.

Na importeren is je model automatisch geselecteerd. In het rechter context menu, kun je bij de Scale X, Y en Z, nu 0.1 invullen. Het bootje is nu nog maar net iets groter dan de kubus. Echter, hij staat om de camera goed te kunnen hergebruiken nog wel iets te hoog op de Z-as. Om dit op te lossen, vul je in hetzelfde rechter paneel bij Location Z -2m in.
Het bootje staat qua center point nu gelijk aan de kubus, selecteer met je muis nu de kubus en klik Delete op je toetsenbord of doe dit via je rechter muisknop.
Ga naar Render > Render Image. Je krijgt nu in een nieuw venster een ge-renderd image van je zojuist geïmporteerde model. Controleer hiermee of je bootje en camera goed staan. Zo niet, corrigeer dan.

Tip: In Blender kun je ook alvast de kleur van je model aanpassen, of aan je model een materiaal toekennen. Deze instellingen kun je later desgewenst gebruiken in je React component (zie als voorbeeld dit Model.tsx component). Je kunt deze wijzigingen evalueren door nogmaals stap 7 te volgen.

Sla nu via File > Save As je Blender scene op. Zodat je deze later altijd nog kunt aanpassen.

Lukt het je niet om het model goed te positioneren, dan kun je ook het benchy.blend bestand van deze tutorial hier downloaden. In dit bestand is ook al een materiaal aan het model toegekend.

Exporteer je Blender scene via File > Export > glTF 2.0 (.glb/.gltf) en sla het op als benchy.glb. Zie hier voor meer informatie over het glTF bestandsformaat.

Blender kan een eerste keer best lastig zijn om mee te werken. Lukt het bovenstaande je niet of heb je er geen tijd voor, dan kun je het geëxporteerde benchy.glb bestand ook hier downloaden.

Blender kan een eerste keer lastig zijn om mee te werken. De standaard documentatie is ook niet altijd even duidelijk. Wil je meer over Blender leren, ga dan naar blenderguru.com.

3. React 3D component

React Three Fiber is een op Three.js gebaseerde bibliotheek die het mogelijk maakt om 3D modellen en scenes te maken en te renderen in een React applicatie met behulp van WebGL. Nu je het Benchy model hebt opgeslagen als een scene bestand dat compatibel is met @react-three/fiber, kun je het renderen in een React TypeScript component.

Nadat je alle stappen doorlopen hebt, zal het eindresultaat er ongeveer zo uitzien:

Gebruik je muis of trackpad om het model te roteren, te verplaatsen en om in te zoomen.

Laten we beginnen. Dit is hoe je het doet:

Maak een nieuw React TypeScript project met Create React App (CRA)

npx create-react-app my-3d-app --template typescript

Installeer de nodige dependencies en typing devDependencies voor je 3D web rendering project.

npm i three @react-three/fiber @react-three/drei
npm i -D @types-three

Voeg het in stap 2.9 gemaakte benchy.glb bestand toe aan je project ergens in de src folder. Of download het hier en voeg het toe.
Voeg een glb typings bestand toe, bijv. in ./typings/glb.d.ts zodat je het benchy.glb bestand zonder problemen kunt importeren in een component en zorg ervoor dat het pad naar dit typings bestand is opgenomen is in je tsconfig.json include node voor TS compilatie.

declare module '*.glb' {
  const content: never;
  export default content;
}

Voeg om alles netjes te kunnen typen een model.ts bestand toe met daarin het volgende:

import { Instance } from '@react-three/fiber/dist/declarations/src/core/renderer.d';
import { GLTF } from 'three-stdlib';

export type Color = string;

export interface GLTFResult extends GLTF {
  materials: Record<string, Instance>;
  nodes: Record<string, Instance>;
}

export interface SceneProps {
  color?: Color;
  rotate?: boolean;
  scale?: number;
}

export type MeshModel = Omit<JSX.IntrinsicElements['mesh'], 'color'> & SceneProps;

Maak een nieuw Scene.tsx component en importeer de nodige modules. Laad met behulp van de @react-three/drei useGLTF hook de geïmporteerde benchy.glb scene en return deze als primitive:

import { useGLTF } from '@react-three/drei';
import { useFrame } from '@react-three/fiber';
import React, { useRef } from 'react';
import { Mesh } from 'three';

import { GLTFResult, MeshModel } from '../../model';
import model from '../benchy.glb';

export const Scene: React.FC<MeshModel> = ({ rotate = true, ...props }) => {
  const { scene } = useGLTF(model) as unknown as GLTFResult;
  const ref = useRef<Mesh>(null!);

  useFrame(() => {
    if (rotate) {
      ref.current.rotation.y += 0.01;
    }
  });

  return <primitive ref={ref} {...props} object={scene} />;
};

Maak een tweede component Benchy3d.tsx en voeg een Canvas element toe om de 3D scene te renderen en voeg hier naar eigen smaak een ambient light en directional light(s) aan toe. Ook voegen we hier de OrbitControls toe, die het mogelijk maken het model te bewegen.

import { OrbitControls } from '@react-three/drei';
import { Canvas } from '@react-three/fiber';
import React from 'react';

import { Scene } from './Scene';

export const Benchy3d: React.FC = () => (
  <Canvas resize={{ offsetSize: true }} camera={{ position: [0, 0, 20], fov: 30 }}>
    <ambientLight intensity={0.5} />
    <directionalLight color="white" position={[0, 0, 5]} intensity={0.5} />
    <directionalLight color="white" position={[0, 0, -5]} intensity={0.5} />
    <Scene />
    <OrbitControls />
  </Canvas>
);

Voeg je component toe aan je App.tsx en render het Benchy3d canvas met je scene:

export const App: React.FC = () => (
  <div style={{ width: '100vw', height: '100vh', backgroundColor }}>
    <Benchy3d />
  </div>
);

Start je applicatie

npm start

Voila! Je kunt je sleepbootje met je muis of trackpad slepend roteren, inzoomen en bewegen. Hoe leuk is dat.

Zie github.com/karaoak/virtual-3d-printing voor voorbeeld code en een werkende app.

Zie virtual-3d-printing.vercel.app voor een draaiende applicatie.

4. 3D printen van je Benchy

Nu je je 3D Benchy model hebt gerenderd en geëxporteerd als een STL bestand, kun je het 3D-printen met behulp van Ultimaker Cura en een 3D printer.

Dit is hoe je het doet:

Download Ultimaker Cura
Installeer en open Cura op je computer.
Kies je merk en type printer.
Importeer het 3D Benchy STL bestand via File > Open File(s)... of sleep het op de buildplate van je printer.
Pas de printinstellingen aan naar jouw voorkeur, zoals de printkwaliteit en de infill-dichtheid. Voor het Benchy model heb je als support alleen een Skirt nodig.
Klik op Slice om het model te slicen en per laag de print instructies te schrijven.
Sla de G-code op en kopieer deze naar een SD-kaart of stuur hem direct door naar je netwerk 3D printer.
Printen maar!

En dat is het! Nu heb je het 3D Benchy model gerenderd als React component, en 3D geprint met behulp van Ultimaker Cura en in dit geval een Ultimaker 2+ printer. Veel plezier met je Benchy!

En natuurlijk kun je elk eigen model bijv. gemaakt met Blender, Dassault's SolidWorks, AutoDesk's Fusion 360 of zelfs SketchUp op deze manier interactief aan een website toevoegen of 3D printen. Of download iets leuks via Thingiverse.

Kijk hier voor nog een aantal andere modellen ge-renderd met behulp van bovenstaande code.

Projecten

Contact

Over ons

Blog