feat: add render logic and orbital control for shirt model

three/main.js

@@ -1,8 +1,46 @@
 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';
+
 
 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();
+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);
+        scene.add(shirtMesh);
+        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 );
+
+camera.position.z = 5;
+
+function animate(time) {
+    renderer.render(scene, camera);
+}
+
+const controls = new OrbitControls( camera, renderer.domElement );