added autorotate feature
This commit is contained in:
@@ -24,6 +24,8 @@ import Base from '@/layout/Base.astro'
|
|||||||
<p>Use mouse to navigate the 3D room</p>
|
<p>Use mouse to navigate the 3D room</p>
|
||||||
<p><strong>Left Click + Drag</strong>: Move view</p>
|
<p><strong>Left Click + Drag</strong>: Move view</p>
|
||||||
<p><strong>Right Click + Drag</strong>: Rotate 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>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -251,6 +253,8 @@ import Base from '@/layout/Base.astro'
|
|||||||
controls.enableDamping = true
|
controls.enableDamping = true
|
||||||
controls.dampingFactor = 0.1
|
controls.dampingFactor = 0.1
|
||||||
controls.enableZoom = false
|
controls.enableZoom = false
|
||||||
|
controls.autoRotate = true
|
||||||
|
controls.autoRotateSpeed = 0.5
|
||||||
|
|
||||||
// Load GLB model
|
// Load GLB model
|
||||||
const loader = new GLTFLoader()
|
const loader = new GLTFLoader()
|
||||||
@@ -297,6 +301,12 @@ import Base from '@/layout/Base.astro'
|
|||||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
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() {
|
function animate() {
|
||||||
requestAnimationFrame(animate)
|
requestAnimationFrame(animate)
|
||||||
controls.update()
|
controls.update()
|
||||||
|
|||||||
Reference in New Issue
Block a user