feat: added 3d Text in vanilla

three/main.js

@@ -2,6 +2,8 @@ import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"
 import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+import { FontLoader } from 'three/addons/loaders/FontLoader.js';
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
 
 
 const scene = new THREE.Scene();
@@ -13,6 +15,7 @@ renderer.setAnimationLoop(animate);
 document.body.appendChild(renderer.domElement);
 
 const loader = new GLTFLoader();
+const fontLoader = new FontLoader();
 let shirtMesh;
 
 const draco = new DRACOLoader()
@@ -25,7 +28,16 @@ loader.load(
         shirtMesh = gltf.scene;
         shirtMesh.position.set(0, -1, 0);
         shirtMesh.scale.set(5, 5, 5);
+
+        shirtMesh.traverse((child) => {
+            if (child.isMesh && child.material) {
+                child.material = child.material.clone();
+                child.material.color.set(0xffd700);
+            }
+        });
+
         scene.add(shirtMesh);
+        addTextOnShirt();
         console.log('Model loaded successfully');
     },
     undefined,
@@ -42,6 +54,59 @@ scene.add(directionalLight);
 
 camera.position.z = 5;
 
+function addTextOnShirt() {
+    fontLoader.load('https://threejs.org/examples/fonts/helvetiker_bold.typeface.json', (font) => {
+        const textConfig = {
+            font,
+            size: 0.30,
+            depth: 0.03,
+            curveSegments: 10,
+            bevelEnabled: true,
+            bevelThickness: 0.005,
+            bevelSize: 0.003,
+            bevelSegments: 4,
+        };
+
+        const letsGeometry = new TextGeometry("Let's", textConfig);
+        const doItGeometry = new TextGeometry(" do it", textConfig);
+
+        letsGeometry.computeBoundingBox();
+        doItGeometry.computeBoundingBox();
+
+        const letsWidth = letsGeometry.boundingBox.max.x - letsGeometry.boundingBox.min.x;
+        const doItWidth = doItGeometry.boundingBox.max.x - doItGeometry.boundingBox.min.x;
+
+        letsGeometry.translate(-letsWidth / 2, 0, 0);
+        doItGeometry.translate(-doItWidth / 2, 0, 0);
+
+        const letsMaterial = new THREE.MeshStandardMaterial({
+            color: 0xffd700,
+            roughness: 0.35,
+            metalness: 0.15,
+        });
+
+        const doItMaterial = new THREE.MeshStandardMaterial({
+            color: 0xffffff,
+            roughness: 0.35,
+            metalness: 0.15,
+        });
+
+        const letsMesh = new THREE.Mesh(letsGeometry, letsMaterial);
+        const doItMesh = new THREE.Mesh(doItGeometry, doItMaterial);
+
+        letsMesh.position.set(0, 1, 1);
+        doItMesh.position.set(0, 0.6, 1);
+
+        const textGroup = new THREE.Group();
+        textGroup.add(letsMesh);
+        textGroup.add(doItMesh);
+        textGroup.position.set(0, -0.45, 0.6);
+        textGroup.rotation.x = 0;
+
+        scene.add(textGroup);
+    });
+}
+
 function animate(time) {
     renderer.render(scene, camera);
 }