Add 2 files

app.js

@@ -0,0 +1,127 @@
+addEventListener('load', async function() {
+    // Initialize AlpineJS
+    Alpine.start()
+    // When the app loads, inject the required
+    // libraries for Three.js and DaisyUI
+    var three = await import('three.js')
+    var daisyui = await import('daisyui.js')
+    // Create the canvas element and get its context
+    var canvas = document.getElementById('canvas')
+    var ctx = canvas.getContext('2d')
+    // Set the canvas dimensions
+    canvas.width = window.innerWidth
+    canvas.height = window.innerHeight
+    // Create the Three.js scene
+    var scene = new three.Scene()
+    var camera = new three.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000)
+    camera.position.z = 5
+    var renderer = new three.WebGLRenderer({canvas: canvas, antialias: true})
+    var geometry = new three.BoxGeometry(2, 2, 2)
+    var material = new three.MeshPhongMaterial({color: 0x00ff00})
+    var cube = new three.Mesh(geometry, material)
+    scene.add(cube)
+    // Create the DaisyUI components
+    var button = daisyui.header('Design your home')
+    var printButton = daisyui.button('Print')
+    var controls = daisyui.controls([
+        {
+            type: 'slider',
+            label: 'Scale',
+            value: 1,
+            min: 1,
+            max: 5,
+            step: 0.1,
+        },
+        {
+            type: 'slider',
+            label: 'Rotate',
+            value: 0,
+            min: 0,
+            max: 360,
+            step: 1,
+        },
+        {
+            type: 'button',
+            label: 'Toggle lighting',
+        }
+    ], {
+        'margin-top': '16px'
+    })
+    // Add the components to the scene
+    scene.add(cube, button, printButton, controls)
+    // Create a render loop
+    function render() {
+        requestAnimationFrame(render)
+        renderer.clear()
+        renderer.render(scene, camera)
+    }
+    render()
+    // Add event listeners for user input
+    canvas.addEventListener('mousedown', function(event) {
+        var mouse = new three.Vector2()
+        mouse.x = (event.clientX / canvas.width) * 2 - 1
+        mouse.y = -(event.y / canvas.height) * 2 + 1
+        var raycaster = new three.Raycaster()
+        raycaster.setFromCamera(mouse, camera)
+        var intersects = raycaster.intersectObjects(scene.children)
+        if (intersects.length > 0) {
+            var obj = intersects[0].object
+            if (obj.isMesh) {
+                if (obj.name === 'Cube') {
+                    // Select the cube for dragging
+                    cube.userData = 'dragging'
+                    cube.position.lerp(new three.Vector3(mouse.x, mouse.y, 0), 0.5)
+                }
+            }
+        }
+    })
+    canvas.addEventListener('mouseup', function(event) {
+        var mouse = new three.Vector2()
+        mouse.x = (event.clientX / canvas.width) * 2 - 1
+        mouse.y = -(event.y / canvas.height) * 2 + 1
+        var raycaster = new three.Raycaster()
+        raycaster.setFromCamera(mouse, camera)
+        var intersects = raycaster.intersectObjects(scene.children)
+        if (intersects.length > 0) {
+            var obj = intersects[0].object
+            if (obj.isMesh) {
+                if (obj.name === 'Cube') {
+                    cube.userData = ''
+                }
+            }
+        }
+    })
+    canvas.addEventListener('mousemove', function(event) {
+        var mouse = new three.Vector2()
+        mouse.x = (event.clientX / canvas.width) * 2 - 1
+        mouse.y = -(event.y / canvas.height) * 2 + 1
+        var raycaster = new three.Raycaster()
+        raycaster.setFromCamera(mouse, camera)
+        var intersects = raycaster.intersectObjects(scene.children)
+        if (intersects.length > 0) {
+            var obj = intersects[0].object
+            if (obj.isMesh) {
+                if (obj.name === 'Cube') {
+                    // Update the cube position while dragging
+                    cube.position.lerp(new three.Vector3(mouse.x, mouse.y, 0), 0.5)
+                }
+            }
+        }
+    })
+    var scale = 1
+    var rotate = 0
+    var lightOn = false
+    controls.addEventListener('input', function(event) {
+        var value = Number(event.target.value)
+        if (event.target.type === 'slider') {
+            scale = value
+        } else if (event.target.type === 'button') {
+            lightOn = !lightOn
+            if (lightOn) {
+                scene.add(new three.AmbientLight(0xffffff))
+            } else {
+                scene.remove(scene.getObjectByType('AmbientLight'))
+            }
+        }
+    })
+})

index.html

@@ -1,19 +1,13 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Architecture Designer</title></head><body><h1>Architecture Designer</h1>
+    <div class="flex justify-between items-center p-4 border-b-[1.5px] border-gray-300"></div>
+        <nav class="flex items-baseline text-xl">
+            <h1 class="font-bold text-4xl">Design your home</h1>
+            <span class="ml-[16px]">|</span>
+            <a class="text-link" href="#">Print</a>
+        </nav>
+        <h1>Design your home</h1>
+        <p class="mt-[8px]">Welcome to the Architecture Designer! Use the tools below to create a custom architectural design for your home. Start by dragging and dropping the provided components onto the canvas. You can then scale, rotate, and arrange the components as needed. Once you have created your design, print it out to take with you to your builder or contractor. If you need help or have any questions, please don't hesitate to ask. Have fun!</p>
+    </div>
+    <canvas class="mt-[16px] h-[600px] w-full" id="canvas"></canvas>
+    <script></script>
+</body></html>