File size: 4,510 Bytes
3ee742c |
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 116 117 118 119 120 121 122 123 124 125 126 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'))
}
}
})
}) |