anshk/Shirt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added 3d Text in vanilla

Browse Source
This commit is contained in:
anshk 2026-03-23 17:24:37 +05:30
parent f648f7df82
commit fe90cb70bf
1 changed files with 65 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
three/main.js
View File

@ -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);
}