feat: 120 refactor usecientos to new state context provider

package.json

@@ -45,41 +45,41 @@
     "docs:preview": "vitepress preview docs"
   },
   "peerDependencies": {
-    "@tresjs/core": ">=2.1.3",
     "three": ">=0.133",
     "vue": ">=3.3"
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
-    "@release-it/conventional-changelog": "^6.0.0",
+    "@release-it/conventional-changelog": "^7.0.0",
     "@tweakpane/core": "^1.1.9",
     "@tweakpane/plugin-essentials": "^0.1.8",
-    "@types/node": "^20.4.1",
-    "@types/three": "^0.153.0",
-    "@typescript-eslint/eslint-plugin": "^5.61.0",
-    "@typescript-eslint/parser": "^5.61.0",
+    "@types/node": "^20.4.5",
+    "@types/three": "^0.154.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
     "@vitejs/plugin-vue": "^4.2.3",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-vue": "^9.15.1",
     "gsap": "^3.12.2",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
     "prettier": "^3.0.0",
-    "release-it": "^16.0.0",
+    "release-it": "^16.1.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.9.2",
-    "three": "^0.154.0",
+    "three": "^0.155.0",
     "tweakpane": "^3.1.10",
     "typescript": "^5.1.6",
-    "unocss": "^0.53.4",
-    "vite": "^4.4.2",
+    "unocss": "^0.54.0",
+    "vite": "^4.4.7",
     "vite-plugin-banner": "^0.7.0",
-    "vite-plugin-dts": "3.1.1",
+    "vite-plugin-dts": "3.3.1",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.5"
+    "vitepress": "1.0.0-beta.6"
   },
   "dependencies": {
+    "@tresjs/core": "3.0.1",
     "@vueuse/core": "^10.2.1",
     "camera-controls": "^2.7.0",
     "three-stdlib": "^2.23.13"

playground/package.json

@@ -9,14 +9,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/core": "2.4.0",
+    "@tresjs/core": "3.0.1",
     "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@tresjs/leches": "^0.4.0",
     "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.1",
     "vite-plugin-glsl": "^1.1.2",
-    "vue-tsc": "^1.8.4"
+    "vue-tsc": "^1.8.8"
   }
 }

playground/src/App.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <router-view />
+  <Suspense>
+    <router-view />
+  </Suspense>
 </template>

playground/src/components/BackdropDemo.vue → playground/src/pages/BackdropDemo.vue

@@ -16,11 +16,11 @@ const gl = {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
     <OrbitControls />
     <Backdrop :floor="1.5" :scale="[20, 5, 5]">
-        <TresMeshPhysicalMaterial  :roughness="1" color="#efefef" :side="2" />
+      <TresMeshPhysicalMaterial :roughness="1" color="#efefef" :side="2" />
     </Backdrop>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
-</template>
+</template>

playground/src/components/ContactShadowsDemo.vue → playground/src/pages/ContactShadowsDemo.vue

@@ -18,7 +18,7 @@ const state = reactive({
   opacity: 1,
   resolution: 512,
   color: '#0000ff',
-  helper: false,
+  helper: true,
 })
 
 const { pane } = useTweakPane()
@@ -65,9 +65,9 @@ onLoop(() => {
 
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera :position="[11, 11, 11]" />
-    <OrbitControls />
+    <TresPerspectiveCamera :position="[5, 5, 5]" />
 
+    <OrbitControls />
     <Box ref="boxRef" :args="[0.4, 0.4, 0.4]" :position="[0, 1, 0]">
       <TresMeshNormalMaterial />
     </Box>

playground/src/pages/EnvironmentDemo.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']
+
+import { OrbitControls, useProgress, Environment, useTweakPane } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const environmentOptions = reactive({
+  background: true,
+  files: environmentFiles,
+  path: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap',
+})
+
+const { pane } = useTweakPane()
+
+pane.addInput(environmentOptions, 'background')
+
+const { progress, hasFinishLoading } = await useProgress()
+</script>
+
+<template>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="!hasFinishLoading"
+      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading... {{ progress }} %
+        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+      </div>
+    </div>
+  </Transition>
+  <TresCanvas v-bind="gl">
+    <OrbitControls />
+    <Suspense>
+      <Environment v-bind="environmentOptions" />
+      <!-- <Environment
+        background
+        :files="environmentFiles"
+        :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
+      /> -->
+    </Suspense>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/pages/FirstPersonControlsDemo.vue

@@ -15,8 +15,10 @@ const gl = {
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[0, 3, 10]" />
-    <PointerLockControls make-default />
-    <KeyboardControls head-bobbing />
+    <PointerLockControls />
+    <KeyboardControls head-bobbing>
+      <!-- <Box /> -->
+    </KeyboardControls>
 
     <TresGridHelper :args="[100, 100]" />
     <TresAmbientLight :intensity="1" />

playground/src/pages/LeviosoDemo.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, useTweakPane, Levioso, TorusKnot } from '@tresjs/cientos'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { shallowRef, shallowReactive } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const { pane } = useTweakPane()
+
+const leviosoState = shallowReactive({
+  speed: 5,
+  rotationFactor: 1,
+  floatFactor: 1,
+  range: [-0.1, 0.1],
+})
+
+pane.addInput(leviosoState, 'speed', {
+  step: 1,
+  min: 0,
+  max: 100,
+})
+
+pane.addInput(leviosoState, 'rotationFactor', {
+  step: 1,
+  min: 0,
+  max: 10,
+})
+
+pane.addInput(leviosoState, 'floatFactor', {
+  step: 1,
+  min: 0,
+  max: 10,
+})
+const groupRef = shallowRef()
+
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Levioso ref="groupRef" v-bind="leviosoState">
+      <TorusKnot :position="[0, 4, 0]">
+        <TresMeshNormalMaterial />
+      </TorusKnot>
+    </Levioso>
+    <TresGridHelper :args="[10, 10]" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/pages/MouseParallaxDemo.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { MouseParallax, TorusKnot } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[0, 0, 7.5]" :fov="75" :near="0.1" :far="1000" />
+    <TorusKnot ref="torusKnotRef">
+      <TresMeshNormalMaterial />
+    </TorusKnot>
+    <MouseParallax :factor="3" />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/pages/OrbitControlsDemo.vue

@@ -115,19 +115,20 @@ zoomFolder.addInput(controlsState, 'zoomSpeed', {
 })
 
 function onChange() {
-  console.log('change')
+  /* console.log('change') */
 }
 
 function onStart() {
-  console.log('start')
+  /*  console.log('start') */
 }
 
 function onEnd() {
-  console.log('end')
+  /*   console.log('end') */
 }
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls v-bind="controlsState" @change="onChange" @start="onStart" @end="onEnd" />

playground/src/components/ScrollDemo.vue → playground/src/pages/ScrollControlsDemo.vue

@@ -10,6 +10,7 @@ const boxRef = ref()
 const progress = ref(0)
 
 watchEffect(() => {
+  // eslint-disable-next-line no-console
   console.log('jaime ~ progress:', progress.value)
 })
 
@@ -21,46 +22,48 @@ const gl = {
 }
 const { onLoop } = useRenderLoop()
 onLoop(() => {
-   if (boxRef.value) {
+  if (boxRef.value) {
     boxRef.value.value.rotation.x = progress.value * 10
     boxRef.value.value.rotation.y = progress.value * 2
-   }
+  }
 })
 </script>
 <template>
-  <TresCanvas v-bind="gl" ref="canvasRef" window-size >
+  <TresCanvas v-bind="gl" ref="canvasRef" window-size>
     <TresPerspectiveCamera :position="[0, 2, 5]" />
     <Stars :radius="1" />
     <TresGridHelper :args="[10, 10]" />
-
-    <ScrollControls ref="scRef" 
-    v-model="progress"
-    :distance="10"
-    :smooth-scroll="0.1"
-    >
-    <Sphere ref="sphereRef" :scale="0.1" :position="[1, 2, 0]" />
-    <Box ref="boxRef" :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
-  </ScrollControls>
+
+    <ScrollControls ref="scRef" v-model="progress" :distance="10" :smooth-scroll="0.1" html-scroll>
+      <Sphere ref="sphereRef" :scale="0.1" :position="[1, 2, 0]" />
+      <Box ref="boxRef" :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
+    </ScrollControls>
   </TresCanvas>
   <main>
     <section>
       <h1>First section</h1>
     </section>
 
-     <section>
+    <section>
       <h2>Second section</h2>
     </section>
     <section>
-      <h3 >Third section</h3>
+      <h3>Third section</h3>
     </section>
   </main>
-  <!-- <div class="container"> -->
-
-  <!-- </div> -->
 </template>
 <style scoped>
+.fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+}
+.scroll {
+  height: 200vh;
+}
 .container {
   height: 50vh;
+  overflow: scroll;
 }
 main {
   background-color: transparent;

playground/src/pages/index.vue

@@ -1,5 +1,6 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 <template>
-    <BackdropDemo/>
+  <Suspense>
+    <OrbitControlsDemo />
+  </Suspense>
 </template>