Spaces:
Runtime error
Runtime error
File size: 4,342 Bytes
e4fb787 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <!DOCTYPE html>
<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> |