feat: add more camera-controls playground examples

Tresjs · Jul 25, 2023 · d3c5dd3 · d3c5dd3
1 parent bef41b9
commit d3c5dd3
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git 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() {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
-    <CameraControls v-bind="controlsState" @change="onChange" @start="onStart" @end="onEnd" />
-    <TresGridHelper />
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
+    <CameraControls v-bind="controlsState" ref="controlsRef" @change="onChange" @start="onStart" @end="onEnd" />
+    <TresGridHelper :position="[0, -1, 0]" />
+    <TresMesh ref="boxMeshRef">
+      <TresBoxGeometry :args="[2, 2, 2]" />
+      <TresMeshBasicMaterial color="orange" wireframe />
+    </TresMesh>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>
diff --git a/src/core/controls/CameraControls.vue b/src/core/controls/CameraControls.vue
@@ -393,6 +393,10 @@ onUnmounted(() => {
     controlsRef.value.disconnect()
   }
 })
+
+defineExpose({
+  value: controlsRef,
+})
 </script>
 
 <template>