app.js

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'))
            }
        }
    })
})