Ten artykuł opisuje proces tworzenia prostego konfiguratora tekstu 3D za pomocą biblioteki Three.js. W naszym projekcie będziemy generować tekst 3D, zmieniać jego kolor oraz eksportować go do pliku STL.
Czym jest Three.js?
Three.js to popularna biblioteka JavaScript służąca do tworzenia grafiki 3D w przeglądarce. Umożliwia renderowanie za pomocą WebGL, co sprawia, że tworzenie zaawansowanych modeli 3D, animacji oraz efektów staje się dostępne nawet dla początkujących programistów.
Podstawowe pojęcia w grafice 3D
- Scena: To „świat”, w którym umieszczamy obiekty 3D.
- Kamera: Określa, z jakiej perspektywy użytkownik ogląda scenę.
- Światło: Oświetla obiekty, dzięki czemu są widoczne i bardziej realistyczne.
- Obiekty geometryczne: W naszym przypadku będzie to tekst 3D.
- Renderowanie: Proces przekształcania obiektów 3D w obraz widoczny na ekranie.
Krok 1: Przygotowanie projektu
1: Instalacja Node.js i npm
- Pobierz Node.js:
- Odwiedź oficjalną stronę Node.js.
- Pobierz i zainstaluj najnowszą wersję LTS (Long Term Support), ponieważ jest ona bardziej stabilna.
- Sprawdź instalację:
- Po instalacji otwórz terminal lub wiersz poleceń i wpisz:
node -vTo polecenie zwróci wersję Node.js, np.v18.x.x. - Sprawdź wersję npm (Node Package Manager):
npm -vJeśli instalacja przebiegła pomyślnie, zobaczysz numer wersji npm, np.9.x.x.
- Po instalacji otwórz terminal lub wiersz poleceń i wpisz:
2: Tworzenie projektu i inicjalizacja npm
- Utwórz folder projektu i przejdź do niego w terminalu:
mkdir threejs-text-editorcd threejs-text-editor
- Zainicjalizuj projekt npm:
- Wpisz w terminalu:
npm init -y - Polecenie to utworzy plik
package.json, który będzie przechowywał informacje o zależnościach projektu.
- Wpisz w terminalu:
3: Instalacja Three.js
- Zainstaluj bibliotekę Three.js:
- Wpisz w terminalu:
npm install three - Po instalacji biblioteka będzie dostępna w katalogu
node_modulesi zostanie dodana do plikupackage.jsonjako zależność.
- Wpisz w terminalu:
4: Instalacja i konfiguracja Vite
Vite to nowoczesny narzędzie budowania i uruchamiania aplikacji frontendowych, które zapewnia szybki start i gorące przeładowywanie (Hot Module Replacement – HMR).
- Zainstaluj Vite w swoim projekcie:
- Wpisz w terminalu:
npm install vite
- Wpisz w terminalu:
- Utwórz plik startowy
index.html:- W głównym folderze projektu utwórz plik
index.html.
- W głównym folderze projektu utwórz plik
- Dodaj skrypt startowy w
package.json:- Otwórz plik
package.jsoni dodaj sekcjęscripts:"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }
- Otwórz plik
- Uruchom serwer deweloperski:
- W terminalu wpisz:
npm run dev - Vite uruchomi serwer lokalny, a w terminalu zobaczysz adres, np.
http://localhost:5173.
- W terminalu wpisz:
Krok 2: Struktura projektu
Należy utworzyć pliki:
index.htmlscript.jshelvetiker_regular.typeface.json– to plik pobrany z https://github.com/mrdoob/three.js/tree/master/examples/fonts
Po utworzeniu plików projekt powinien mieć poniższą strukturę:
threejs-text-editor/
├── index.html
├── src/
│ ├── script.js
│ ├── fonts/
│ ├── helvetiker_regular.typeface.json
├── node_modules/
├── package.json
├── package-lock.jsonKrok 3: Uzupełnienie plików kodem
Plik index.html
Odpowiada za interfejs użytkownika, w którym użytkownik może wpisać tekst, wybrać kolor i generować tekst 3D.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Three.js 3D Text Editor</title>
<style>
body {
margin: 0;
overflow: hidden;
}
#ui {
position: absolute;
top: 10px;
left: 10px;
z-index: 100;
background: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
}
#ui input, #ui button {
margin: 5px 0;
}
</style>
</head>
<body>
<div id="ui">
<label for="textInput">Wprowadź tekst:</label>
<input type="text" id="textInput" placeholder="Hello 3D!" />
<br>
<label for="colorPicker">Wybierz kolor:</label>
<input type="color" id="colorPicker" value="#00ff00" />
<br>
<button id="updateText">Aktualizuj tekst</button>
<button id="exportSTL">Eksportuj do STL</button>
</div>
<script type="module" src="./src/script.js"></script>
</body>
</html>Plik script.js
Plik script.js obsługuje generowanie tekstu 3D, zmianę koloru i eksport modelu do pliku STL.
// Importujemy niezbędne moduły z Three.js
import * as THREE from 'three';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
import { STLExporter } from 'three/examples/jsm/exporters/STLExporter.js';
// Inicjalizujemy scenę, kamerę i renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 20;
// Renderer renderuje scenę w przeglądarce
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Dodajemy światło, aby tekst był widoczny
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10).normalize();
scene.add(light);
// Zmienna dla przechowywania aktualnego tekstu
let textMesh;
const fontLoader = new FontLoader();
// Domyślny kolor tekstu
let textColor = '#00ff00';
// Ładujemy font i tworzymy domyślny tekst
fontLoader.load('./src/fonts/helvetiker_regular.typeface.json', function (font) {
createText('Hello 3D!', font, textColor);
});
// Funkcja tworzy tekst 3D na scenie
function createText(text, font, color) {
// Usuwamy stary tekst, jeśli istnieje
if (textMesh) scene.remove(textMesh);
// Tworzymy geometrię tekstu
const textGeometry = new TextGeometry(text, {
font: font,
size: 2,
height: 1,
bevelEnabled: true,
bevelThickness: 0.2,
bevelSize: 0.1,
});
// Tworzymy materiał z wybranym kolorem
const material = new THREE.MeshPhongMaterial({ color: color });
textMesh = new THREE.Mesh(textGeometry, material);
// Ustawiamy pozycję tekstu
textMesh.position.set(-text.length, 0, 0);
scene.add(textMesh);
}
// Obsługa przycisku "Aktualizuj tekst"
document.getElementById('updateText').addEventListener('click', () => {
const inputText = document.getElementById('textInput').value || 'Hello 3D!';
const selectedColor = document.getElementById('colorPicker').value;
// Aktualizujemy zmienną koloru
textColor = selectedColor;
// Ładujemy font i generujemy nowy tekst
fontLoader.load('./src/fonts/helvetiker_regular.typeface.json', function (font) {
createText(inputText, font, textColor);
});
});
// Obsługa przycisku "Eksportuj do STL"
document.getElementById('exportSTL').addEventListener('click', () => {
const exporter = new STLExporter();
const stlData = exporter.parse(scene);
// Tworzymy link do pobrania pliku STL
const blob = new Blob([stlData], { type: 'application/octet-stream' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'model.stl';
link.click();
});
// Funkcja animacji (renderowanie w pętli)
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
Opis kodu
- Tworzenie sceny:
- Inicjalizujemy scenę, kamerę i renderer. Kamera jest ustawiona tak, by widok obejmował całą scenę.
- Tworzenie tekstu 3D:
- Wykorzystujemy
TextGeometrydo generowania obiektu 3D na podstawie podanego tekstu i czcionki. - Kolor tekstu jest wybierany przez użytkownika za pomocą elementu
<input type="color">.
- Wykorzystujemy
- Zmiana tekstu i koloru:
- Obsługujemy zdarzenie kliknięcia na przycisku „Aktualizuj tekst”. Pobieramy nowy tekst i kolor, a następnie generujemy tekst ponownie.
- Eksport do STL:
- Eksportujemy obiekt 3D jako plik STL, który można pobrać na komputer.
- Renderowanie sceny:
- Funkcja
animate()renderuje scenę w pętli, zapewniając płynne wyświetlanie.
- Funkcja
Wyniki:
Screen:
Video:
Model 3D:
Podsumowanie
Powyższy projekt pokazuje, jak łatwo wykorzystać Three.js do tworzenia i edycji prostych obiektów 3D w przeglądarce. Dodanie opcji zmiany koloru oraz eksportu do STL sprawia, że aplikacja jest bardziej interaktywna i użyteczna. Jeśli chcesz rozszerzyć funkcjonalność, możesz dodać:
- Wybór innych czcionek,
- Możliwość zmiany wymiarów tekstu,
- Animacje tekstu.
