|
|
|
|
@ -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()
|
|
|
|
|
|