added autorotate feature

main
Antonio De Lucreziis 8 months ago
parent edcf04bf31
commit 1ac430901b

@ -24,6 +24,8 @@ import Base from '@/layout/Base.astro'
<p>Use mouse to navigate the 3D room</p>
<p><strong>Left Click + Drag</strong>: Move view</p>
<p><strong>Right Click + Drag</strong>: Rotate view</p>
<!-- Autorotate -->
<p><input type="checkbox" id="autorotate" checked /> <label for="autorotate">Autorotate</label></p>
</div>
<style>
@ -251,6 +253,8 @@ import Base from '@/layout/Base.astro'
controls.enableDamping = true
controls.dampingFactor = 0.1
controls.enableZoom = false
controls.autoRotate = true
controls.autoRotateSpeed = 0.5
// Load GLB model
const loader = new GLTFLoader()
@ -297,6 +301,12 @@ import Base from '@/layout/Base.astro'
renderer.setSize(window.innerWidth, window.innerHeight)
})
// Handle autorotate checkbox
const autorotateCheckbox = document.getElementById('autorotate')
autorotateCheckbox.addEventListener('change', e => {
controls.autoRotate = e.target.checked
})
function animate() {
requestAnimationFrame(animate)
controls.update()

Loading…
Cancel
Save