feat: reflection material

package.json

@@ -57,8 +57,8 @@
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@tresjs/core": "3.5.0",
-    "@vueuse/core": "^10.6.1",
+    "@tresjs/core": "3.6.0",
+    "@vueuse/core": "^10.7.0",
     "camera-controls": "^2.7.2",
     "stats-gl": "^2.0.1",
     "stats.js": "^0.17.0",

playground/.eslintrc.json

@@ -1,6 +1,16 @@
 {
   "extends": "@tresjs/eslint-config-vue",
   "rules": {
-    "no-console": "off"
+    "no-console": "off",
+    "vue/attribute-hyphenation": [2, "always", {
+      "ignore": [
+        "shadow-mapSize-width",
+        "shadow-mapSize-height",
+        "distortionMap",
+        "material-uniforms-mieCoefficient-value",
+        "material-uniforms-mieDirectionalG-value",
+        "material-uniforms-sunPosition-value"
+      ]
+    }]
   }
 }

playground/package.json

@@ -9,15 +9,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/core": "3.5.0",
+    "@tresjs/core": "3.6.0",
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
-    "@tresjs/leches": "^0.13.0",
-    "unplugin-auto-import": "^0.17.1",
-    "unplugin-vue-components": "^0.25.2",
-    "vite-plugin-glsl": "^1.2.0",
-    "vite-plugin-qrcode": "^0.2.2",
-    "vue-tsc": "^1.8.22"
+    "@tresjs/leches": "^0.14.0",
+    "unplugin-auto-import": "^0.17.2",
+    "unplugin-vue-components": "^0.26.0",
+    "vite-plugin-glsl": "^1.2.1",
+    "vite-plugin-qrcode": "^0.2.3",
+    "vue-tsc": "^1.8.25"
   }
 }

playground/src/pages/materials/ReflectionMaterial.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, MeshWobbleMaterial, MeshReflectionMaterial } from '@tresjs/cientos'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+import { useControls, TresLeches } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+import { ref } from 'vue'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: true,
+  antialias: true,
+  powerPreference: 'high-performance',
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const context = ref()
+
+useControls('fpsgraph')
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    ref="context"
+  >
+    <TresPerspectiveCamera
+      :position="[11, 11, 11]"
+      :fov="75"
+      :far="1000"
+    />
+    <OrbitControls />
+    <TresMesh :position="[0, 2, 2]">
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial color="mediumpurple" />
+    </TresMesh>
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :intensity="1"
+      :position="[0, 2, 0]"
+    />
+    <TresMesh :position="[0, 4, 2]">
+      <TresTorusGeometry />
+      <MeshWobbleMaterial
+        color="orange"
+        :speed="2"
+        :factor="1"
+      />
+    </TresMesh>
+    <TresMesh :rotation="[-Math.PI / 2, 0, -Math.PI / 2]">
+      <TresPlaneGeometry
+        :args="[20, 20]"
+      />
+      <MeshReflectionMaterial
+        :resolution="512"
+        :blur="[1, 1]"
+        :mirror="0.5"
+      />
+    </TresMesh>
+  </TresCanvas>
+</template>

playground/src/router/routes/materials.ts

@@ -14,4 +14,9 @@ export const materialsRoutes = [
     name: 'CustomShaderMaterial',
     component: () => import('../../pages/materials/CustomShaderMaterialDemo.vue'),
   },
+  {
+    path: '/materials/reflection-material',
+    name: 'ReflectionMaterial',
+    component: () => import('../../pages/materials/ReflectionMaterial.vue'),
+  },
 ]