diff --git a/playground/src/pages/CameraControlsDemo.vue b/playground/src/pages/CameraControlsDemo.vue
index 025abe78..07c304c2 100644
--- a/playground/src/pages/CameraControlsDemo.vue
+++ b/playground/src/pages/CameraControlsDemo.vue
@@ -3,7 +3,8 @@
import { reactive } from 'vue'
import { TresCanvas } from '@tresjs/core'
import { CameraControls, useTweakPane } from '@tresjs/cientos'
-import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { MathUtils, BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { shallowRef } from 'vue'
const gl = {
clearColor: '#82DBC5',
@@ -19,6 +20,9 @@ const controlsState = reactive({
maxDistance: 100,
})
+const controlsRef = shallowRef()
+const boxMeshRef = shallowRef()
+
const { pane } = useTweakPane()
const distanceFolder = pane.addFolder({ title: 'Distance' })
@@ -27,13 +31,44 @@ distanceFolder.addInput(controlsState, 'minDistance', {
min: 0,
max: 10,
})
+distanceFolder.addInput(controlsState, 'minDistance', {
+ step: 0.01,
+ min: 0,
+ max: 10,
+})
distanceFolder.addInput(controlsState, 'maxDistance', {
step: 0.01,
min: 0,
max: 100,
})
-// TODO: replicate the panes from https://yomotsu.github.io/camera-controls/examples/basic.html
+// Basic example from https://yomotsu.github.io/camera-controls/examples/basic.html
+const dollyFolder = pane.addFolder({ title: 'Dolly' })
+dollyFolder.addButton({ title: 'Increment (+1)' }).on('click', () => {
+ controlsRef?.value?.value?.dolly(1, true)
+})
+dollyFolder.addButton({ title: 'Decrement (-1)' }).on('click', () => {
+ controlsRef?.value?.value?.dolly(-1, true)
+})
+
+const rotateFolder = pane.addFolder({ title: 'Rotate' })
+rotateFolder.addButton({ title: 'Rotate theta 45°' }).on('click', () => {
+ controlsRef?.value?.value?.rotate(45 * MathUtils.DEG2RAD, 0, true)
+})
+rotateFolder.addButton({ title: 'Rotate theta -90°' }).on('click', () => {
+ controlsRef?.value?.value?.rotate(-90 * MathUtils.DEG2RAD, 0, true)
+})
+rotateFolder.addButton({ title: 'Rotate theta 360°' }).on('click', () => {
+ controlsRef?.value?.value?.rotate(360 * MathUtils.DEG2RAD, 0, true)
+})
+rotateFolder.addButton({ title: 'Rotate phi 20°' }).on('click', () => {
+ controlsRef?.value?.value?.rotate(0, 20 * MathUtils.DEG2RAD, true)
+})
+
+const moveFolder = pane.addFolder({ title: 'Move' })
+moveFolder.addButton({ title: 'Fit to the bounding box of the mesh' }).on('click', () => {
+ controlsRef?.value?.value?.fitToBox(boxMeshRef.value, true)
+})
function onChange() {
console.log('change')
@@ -50,9 +85,13 @@ function onEnd() {
-
-
-
+
+
+
+
+
+
+
diff --git a/src/core/controls/CameraControls.vue b/src/core/controls/CameraControls.vue
index 74110690..988d0e8e 100644
--- a/src/core/controls/CameraControls.vue
+++ b/src/core/controls/CameraControls.vue
@@ -393,6 +393,10 @@ onUnmounted(() => {
controlsRef.value.disconnect()
}
})
+
+defineExpose({
+ value: controlsRef,
+})