Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Cloth Editor</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script> | |
| <style> | |
| body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; } | |
| #controls { position: absolute; top: 10px; left: 10px; z-index: 10; } | |
| canvas { display: block; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="controls"> | |
| <label>Select Clothing:</label> | |
| <select id="clothSelect"> | |
| <option value="tshirt">T-Shirt</option> | |
| <option value="hoodie">Hoodie</option> | |
| <option value="dress">Dress</option> | |
| </select> | |
| <input type="file" id="uploadTexture" accept="image/*"> | |
| <button onclick="exportModel()">Export 3D Model</button> | |
| </div> | |
| <script> | |
| let scene, camera, renderer, clothModel, textureLoader; | |
| const models = { | |
| tshirt: "static/models/tshirt.glb", | |
| hoodie: "static/models/hoodie.glb", | |
| dress: "static/models/dress.glb" | |
| }; | |
| function init() { | |
| scene = new THREE.Scene(); | |
| scene.background = new THREE.Color(0xf0f0f0); | |
| camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.set(0, 2, 5); | |
| renderer = new THREE.WebGLRenderer({ antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| const controls = new THREE.OrbitControls(camera, renderer.domElement); | |
| controls.enableDamping = true; | |
| const light = new THREE.DirectionalLight(0xffffff, 1); | |
| light.position.set(5, 10, 7).normalize(); | |
| scene.add(light); | |
| textureLoader = new THREE.TextureLoader(); | |
| loadClothModel("tshirt"); // Default model | |
| animate(); | |
| } | |
| function loadClothModel(type) { | |
| if (clothModel) scene.remove(clothModel); | |
| const loader = new THREE.GLTFLoader(); | |
| loader.load(models[type], function(gltf) { | |
| clothModel = gltf.scene; | |
| clothModel.scale.set(2, 2, 2); | |
| scene.add(clothModel); | |
| }); | |
| } | |
| function uploadTexture(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const texture = textureLoader.load(e.target.result); | |
| if (clothModel) { | |
| clothModel.traverse((child) => { | |
| if (child.isMesh) { | |
| child.material.map = texture; | |
| child.material.needsUpdate = true; | |
| } | |
| }); | |
| } | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| function exportModel() { | |
| const exporter = new THREE.GLTFExporter(); | |
| exporter.parse(scene, function(result) { | |
| const blob = new Blob([JSON.stringify(result)], { type: "application/json" }); | |
| const link = document.createElement("a"); | |
| link.href = URL.createObjectURL(blob); | |
| link.download = "cloth_design.gltf"; | |
| document.body.appendChild(link); | |
| link.click(); | |
| document.body.removeChild(link); | |
| }); | |
| } | |
| document.getElementById("clothSelect").addEventListener("change", (event) => loadClothModel(event.target.value)); | |
| document.getElementById("uploadTexture").addEventListener("change", uploadTexture); | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| renderer.render(scene, camera); | |
| } | |
| window.onload = init; | |
| </script> | |
| </body> | |
| </html> |