chore: lint fix playground

.eslintignore

@@ -4,5 +4,4 @@ dist
 **.test.js
 **.cy.js
 **/cypress/**
-docs
-playground
+docs

playground/.eslintrc-auto-import.json

@@ -1,63 +0,0 @@
-{
-  "globals": {
-    "Component": true,
-    "ComponentPublicInstance": true,
-    "ComputedRef": true,
-    "EffectScope": true,
-    "InjectionKey": true,
-    "PropType": true,
-    "Ref": true,
-    "VNode": true,
-    "computed": true,
-    "createApp": true,
-    "customRef": true,
-    "defineAsyncComponent": true,
-    "defineComponent": true,
-    "effectScope": true,
-    "getCurrentInstance": true,
-    "getCurrentScope": true,
-    "h": true,
-    "inject": true,
-    "isProxy": true,
-    "isReactive": true,
-    "isReadonly": true,
-    "isRef": true,
-    "markRaw": true,
-    "nextTick": true,
-    "onActivated": true,
-    "onBeforeMount": true,
-    "onBeforeUnmount": true,
-    "onBeforeUpdate": true,
-    "onDeactivated": true,
-    "onErrorCaptured": true,
-    "onMounted": true,
-    "onRenderTracked": true,
-    "onRenderTriggered": true,
-    "onScopeDispose": true,
-    "onServerPrefetch": true,
-    "onUnmounted": true,
-    "onUpdated": true,
-    "provide": true,
-    "reactive": true,
-    "readonly": true,
-    "ref": true,
-    "resolveComponent": true,
-    "shallowReactive": true,
-    "shallowReadonly": true,
-    "shallowRef": true,
-    "toRaw": true,
-    "toRef": true,
-    "toRefs": true,
-    "triggerRef": true,
-    "unref": true,
-    "useAttrs": true,
-    "useCssModule": true,
-    "useCssVars": true,
-    "useSlots": true,
-    "watch": true,
-    "watchEffect": true,
-    "watchPostEffect": true,
-    "watchSyncEffect": true,
-    "toValue": true
-  }
-}

playground/.eslintrc.cjs

@@ -1,5 +0,0 @@
-module.exports = {
-    extends: [
-        './.eslintrc-auto-import.json',
-    ],
-}

playground/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@tresjs/eslint-config-vue",
+  "rules": {
+    "no-console": "off"
+  }
+}
+  

playground/package.json

@@ -1,8 +1,8 @@
 {
   "name": "playground",
-  "private": true,
-  "version": "0.0.0",
   "type": "module",
+  "version": "0.0.0",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc && vite build",

playground/src/components/Cameras.vue

@@ -21,6 +21,13 @@ const state = reactive({
 state.camera.position.set(5, 5, 5)
 state.camera.lookAt(0, 0, 0)
 const { pane } = useTweakPane()
+const perspectiveFolder = pane.addFolder({
+  title: 'Perspective Camera',
+})
+
+const orthographicFolder = pane.addFolder({
+  title: 'Ortographic Camera',
+})
 
 pane
   .addBlade({
@@ -47,14 +54,6 @@ pane
     /* context.value.state.accio += 1 */
   })
 
-const perspectiveFolder = pane.addFolder({
-  title: 'Perspective Camera',
-})
-
-const orthographicFolder = pane.addFolder({
-  title: 'Ortographic Camera',
-})
-
 orthographicFolder.hidden = true
 
 watch(

playground/src/components/MultipleCanvas.vue

@@ -90,10 +90,6 @@ const log = () => {
           <TresMeshToonMaterial color="yellow" />
         </TresMesh>
 
-        <!-- <Suspense>
-          <GLTFModel path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf" draco />
-        </Suspense> -->
-
         <TresDirectionalLight
           :position="[0, 2, 4]"
           :intensity="1"

playground/src/components/TheFirstScene.vue

@@ -5,7 +5,6 @@ import { Vector3 } from 'three'
 
 <template>
   <TresCanvas
-    ref="context"
     clear-color="#82DBC5"
     window-size
   >

playground/src/components/TheSmallExperience.vue

@@ -19,7 +19,6 @@ import { OrbitControls } from '@tresjs/cientos/'
         :intensity="0.5"
       />
       <TresMesh
-        ref="sphereRef"
         :scale="1"
         cast-shadow
       >

playground/src/components/portal-journey/ThePortal.vue

@@ -12,30 +12,6 @@ const experiment = {
   portalColorEnd: '#ddc0ff',
 }
 
-const { pane } = useTweakPane()
-
-const portalCtrls = pane.addFolder({ title: 'Portal' })
-portalCtrls
-  .addInput(experiment, 'portalColorStart', {
-    label: 'color start',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    portalLightMaterial.uniforms.uColorStart.value.set(value)
-  })
-portalCtrls
-  .addInput(experiment, 'portalColorEnd', {
-    label: 'color end',
-    min: 0,
-    max: 1,
-    step: 0.01,
-  })
-  .on('change', ({ value }) => {
-    portalLightMaterial.uniforms.uColorEnd.value.set(value)
-  })
-
 const { scene: portal } = await useGLTF(
   'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/portal/portal.glb',
   {
@@ -69,15 +45,40 @@ const portalLightMaterial = new ShaderMaterial({
 
 const portalObj = portal
 const bakedMesh = portalObj.children.find(child => child.name === 'baked')
-;(bakedMesh as Mesh).material = bakedMaterial
+  ; (bakedMesh as Mesh).material = bakedMaterial
 const portalCircle = portalObj.children.find(child => child.name === 'portalCircle')
-;(portalCircle as Mesh).material = portalLightMaterial
+  ; (portalCircle as Mesh).material = portalLightMaterial
 
 const { onLoop } = useRenderLoop()
 
 onLoop(({ elapsed }) => {
   portalLightMaterial.uniforms.uTime.value = elapsed
 })
+
+// Controls
+const { pane } = useTweakPane()
+
+const portalCtrls = pane.addFolder({ title: 'Portal' })
+portalCtrls
+  .addInput(experiment, 'portalColorStart', {
+    label: 'color start',
+    min: 0,
+    max: 1,
+    step: 0.01,
+  })
+  .on('change', ({ value }) => {
+    portalLightMaterial.uniforms.uColorStart.value.set(value)
+  })
+portalCtrls
+  .addInput(experiment, 'portalColorEnd', {
+    label: 'color end',
+    min: 0,
+    max: 1,
+    step: 0.01,
+  })
+  .on('change', ({ value }) => {
+    portalLightMaterial.uniforms.uColorEnd.value.set(value)
+  })
 </script>
 
 <template>

playground/src/pages/shapes.vue

@@ -117,7 +117,6 @@ const tubePath = new CubicBezierCurve3(
       <TresMeshToonMaterial color="orange" />
     </Box>
     <Sphere
-      ref="sphereRef"
       :args="[1, 32, 16]"
       :position="[2, 6, 0]"
       cast-shadow
@@ -153,7 +152,6 @@ const tubePath = new CubicBezierCurve3(
       />
     </Circle>
     <Cone
-      ref="coneRef"
       :args="[1, 1, 6]"
       :position="[2, 6, 2]"
       :rotation="[Math.PI, 0, 0]"