115 lines
3.5 KiB
JavaScript
115 lines
3.5 KiB
JavaScript
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();
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
|
|
|
const renderer = new THREE.WebGLRenderer();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.setAnimationLoop(animate);
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
const loader = new GLTFLoader();
|
|
const fontLoader = new FontLoader();
|
|
let shirtMesh;
|
|
|
|
const draco = new DRACOLoader()
|
|
draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.7/")
|
|
loader.setDRACOLoader(draco)
|
|
|
|
loader.load(
|
|
'/models/ShirtBaked2.glb',
|
|
function (gltf) {
|
|
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,
|
|
function (error) {
|
|
console.error('Failed to load model:', error);
|
|
}
|
|
);
|
|
|
|
const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.8 );
|
|
scene.add( ambientLight );
|
|
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
|
|
directionalLight.position.set(5, 10, 5);
|
|
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);
|
|
}
|
|
|
|
const controls = new OrbitControls( camera, renderer.domElement );
|