docs: fixed broken docs

docs/.vitepress/theme/components/DonutExample.vue

@@ -2,7 +2,7 @@
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
-import { OrbitControls } from '@tresjs/cientos'
+/* import { OrbitControls } from '@tresjs/cientos' */
 
 const gl = {
   clearColor: '#82DBC5',
@@ -16,8 +16,8 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" :fov="45" />
-    <OrbitControls />
+    <TresPerspectiveCamera :position="[3, 3, 3]" :fov="45" :look-at="[0, 0, 0]" />
+    <!--     <OrbitControls /> -->
     <TresMesh>
       <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
       <TresMeshBasicMaterial color="orange" />

docs/.vitepress/theme/components/FirstScene.vue

@@ -2,7 +2,8 @@
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+/* import LocalOrbitControls from './LocalOrbitControls.vue'; */
+/* import { OrbitControls } from '@tresjs/cientos' */
 
 const gl = {
   clearColor: '#82DBC5',
@@ -16,8 +17,8 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
-    <OrbitControls />
+    <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" :look-at="[0, 0, 0]" />
+    <!--     <LocalOrbitControls /> -->
     <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
       <TresConeGeometry :args="[1, 1.5, 3]" />
       <TresMeshToonMaterial color="#82DBC5" />

docs/.vitepress/theme/components/FirstSceneLightToon.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
+/* import { OrbitControls } from '@tresjs/cientos' */
 
 const styles = {
   width: '100%',

docs/.vitepress/theme/components/LocalOrbitControls.vue

@@ -0,0 +1,302 @@
+<script lang="ts" setup>
+import { Camera } from 'three'
+import { OrbitControls } from 'three-stdlib'
+import { ref, unref, onUnmounted, onMounted, watchEffect } from 'vue'
+import { TresVector3, extend, useRenderLoop, useTresContext } from '@tresjs/core'
+import { useEventListener } from '@vueuse/core'
+
+export interface OrbitControlsProps {
+    /**
+     * Whether to make this the default controls.
+     *
+     * @default false
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     */
+    makeDefault?: boolean
+    /**
+     * The camera to control.
+     *
+     * @type {Camera}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.camera
+     */
+    camera?: Camera
+    /**
+     * The dom element to listen to.
+     *
+     * @type {HTMLElement}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.domElement
+     */
+    domElement?: HTMLElement
+    /**
+     * The target to orbit around.
+     *
+     * @type {TresVector3}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.target
+     */
+    target?: TresVector3
+    /**
+     * Whether to enable damping (inertia)
+     *
+     * @default false
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableDamping
+     */
+    enableDamping?: boolean
+    /**
+     * The damping inertia used if `.enableDamping` is set to true
+     *
+     * @default 0.05
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.dampingFactor
+     */
+    dampingFactor?: number
+    /**
+     * Set to true to automatically rotate around the target.
+     *
+     * @default false
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotate
+     */
+    autoRotate?: boolean
+    /**
+     * How fast to rotate around the target if `.autoRotate` is true.
+     *
+     * @default 2
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.autoRotateSpeed
+     */
+    autoRotateSpeed?: number
+    /**
+     * Whether to enable panning.
+     *
+     * @default true
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enablePan
+     */
+    enablePan?: boolean
+    /**
+     * How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
+     *
+     * @default 7.0
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keyPanSpeed
+     */
+    keyPanSpeed?: number
+    /**
+     * This object contains references to the keycodes for controlling camera panning.
+     * Default is the 4 arrow keys.
+     *
+     * @default `{ LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' }`
+     * @type Record<string, string>
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.keys
+     */
+    keys?: Record<string, string>
+    /**
+     * How far you can orbit horizontally, upper limit.
+     * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+     * with ( max - min < 2 PI ). Default is Infinity.
+     *
+     * @default Infinity
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxAzimuthAngle
+     */
+    maxAzimuthAngle?: number
+    /**
+     * How far you can orbit horizontally, lower limit.
+     * If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ],
+     * with ( max - min < 2 PI ).
+     * Default is - Infinity.
+     *
+     * @default -Infinity
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minAzimuthAngle
+     */
+    minAzimuthAngle?: number
+    /**
+     * How far you can orbit vertically, upper limit.
+     * Range is 0 to Math.PI radians, and default is Math.PI.
+     *
+     * @default Math.PI
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxPolarAngle
+     */
+    maxPolarAngle?: number
+    /**
+     * How far you can orbit vertically, lower limit.
+     * Range is 0 to Math.PI radians, and default is 0.
+     *
+     * @default 0
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minPolarAngle
+     */
+    minPolarAngle?: number
+    /**
+     * The minimum distance of the camera to the target.
+     * Default is 0.
+     *
+     * @default 0
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minDistance
+     */
+    minDistance?: number
+    /**
+     * The maximum distance of the camera to the target.
+     * Default is Infinity.
+     *
+     * @default Infinity
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxDistance
+     */
+    maxDistance?: number
+    /**
+     * The minimum field of view angle, in radians.
+     * Default is 0.
+     *
+     * @default 0
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.minZoom
+     */
+    minZoom?: number
+    /**
+     * The maximum field of view angle, in radians.
+     * ( OrthographicCamera only ).
+     * Default is Infinity.
+     *
+     * @default Infinity
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/index.html?q=orbi#examples/en/controls/OrbitControls.maxZoom
+     */
+    maxZoom?: number
+    touches?: {
+        ONE?: number
+        TWO?: number
+    }
+    /**
+     * Whether to enable zooming.
+     *
+     * @default true
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableZoom
+     */
+    enableZoom?: boolean
+    /**
+     * How fast to zoom in and out. Default is 1.
+     *
+     * @default 1
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.zoomSpeed
+     */
+    zoomSpeed?: number
+    /**
+     * Whether to enable rotating.
+     *
+     * @default true
+     * @type {boolean}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.enableRotate
+     */
+    enableRotate?: boolean
+    /**
+     * How fast to rotate around the target. Default is 1.
+     *
+     * @default 1
+     * @type {number}
+     * @memberof OrbitControlsProps
+     * @see https://threejs.org/docs/#examples/en/controls/OrbitControls.rotateSpeed
+     */
+    rotateSpeed?: number
+}
+
+// TODO: remove disable once eslint is updated to support vue 3.3
+// eslint-disable-next-line vue/no-setup-props-destructure
+const {
+    makeDefault = false,
+    autoRotate = false,
+    autoRotateSpeed = 2,
+    enableDamping = false,
+    dampingFactor = 0.05,
+    enablePan = true,
+    keyPanSpeed = 7,
+    maxAzimuthAngle = Infinity,
+    minAzimuthAngle = -Infinity,
+    maxPolarAngle = Math.PI,
+    minPolarAngle = 0,
+    minDistance = 0,
+    maxDistance = Infinity,
+    minZoom = 0,
+    maxZoom = Infinity,
+    enableZoom = true,
+    zoomSpeed = 1,
+    enableRotate = true,
+    rotateSpeed = 1,
+    target = [0, 0, 0],
+} = defineProps<OrbitControlsProps>()
+
+const { renderer, camera: activeCamera } = useTresContext()
+
+const controls = ref<OrbitControls | null>(null)
+
+extend({ OrbitControls })
+
+const emit = defineEmits(['change', 'start', 'end'])
+
+function addEventListeners() {
+    useEventListener(controls.value as any, 'change', () => emit('change', controls.value))
+    useEventListener(controls.value as any, 'start', () => emit('start', controls.value))
+    useEventListener(controls.value as any, 'end', () => emit('end', controls.value))
+}
+
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+    if (controls.value && (enableDamping || autoRotate)) {
+        controls.value.update()
+    }
+})
+
+onMounted(() => {
+    addEventListeners()
+})
+
+onUnmounted(() => {
+    if (controls.value) {
+        controls.value.dispose()
+    }
+})
+
+watchEffect(() => {
+    console.log('activeCamera', activeCamera.value)
+    console.log('renderer', renderer.value)
+})
+</script>
+
+<template>
+    <TresOrbitControls v-if="activeCamera && renderer" ref="controls" :target="target" :auto-rotate="autoRotate"
+        :auto-rotate-speed="autoRotateSpeed" :enable-damping="enableDamping" :damping-factor="dampingFactor"
+        :enable-pan="enablePan" :key-pan-speed="keyPanSpeed" :keys="keys" :max-azimuth-angle="maxAzimuthAngle"
+        :min-azimuth-angle="minAzimuthAngle" :max-polar-angle="maxPolarAngle" :min-polar-angle="minPolarAngle"
+        :min-distance="minDistance" :max-distance="maxDistance" :min-zoom="minZoom" :max-zoom="maxZoom" :touches="touches"
+        :enable-zoom="enableZoom" :zoom-speed="zoomSpeed" :enable-rotate="enableRotate" :rotate-speed="rotateSpeed"
+        :args="[unref(activeCamera) || camera, renderer?.domElement || domElement]" />
+</template>

docs/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     ExtendExample: typeof import('./.vitepress/theme/components/ExtendExample.vue')['default']
     FirstScene: typeof import('./.vitepress/theme/components/FirstScene.vue')['default']
     FirstSceneLightToon: typeof import('./.vitepress/theme/components/FirstSceneLightToon.vue')['default']
+    LocalOrbitControls: typeof import('./.vitepress/theme/components/LocalOrbitControls.vue')['default']
     LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

docs/guide/index.md

@@ -1,7 +1,9 @@
 # Introduction
 
 <ClientOnly>
-    <FirstScene style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
+    <div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+      <FirstScene />
+    </div>
 </ClientOnly>
 
 This is the documentation for the `v2.0.0` of TresJS. If you are looking for the documentation for the version 1, check [V1 TresJS](https://v1.tresjs.org/).

docs/guide/your-first-scene.md

@@ -3,7 +3,9 @@
 This guide will help you to create your first Tres scene. 🍩
 
 <ClientOnly>
-    <DonutExample style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;"/>
+<div style="aspect-ratio: 16/9; height: auto; margin: 2rem 0; border-radius: 8px; overflow:hidden;">
+  <DonutExample />
+</div>
 </ClientOnly>
 
 ## Setting up the experience Canvas