deps: update deps

package.json

@@ -57,28 +57,28 @@
   },
   "dependencies": {
     "@alvarosabu/utils": "^2.3.0",
-    "@tresjs/core": "2.0.0-beta.5",
     "@vueuse/core": "^9.13.0"
   },
   "devDependencies": {
-    "@alvarosabu/prettier-config": "^1.2.0",
+    "@tresjs/core": "2.0.0-beta.5",
+    "@alvarosabu/prettier-config": "^1.3.0",
     "@huntersofbook/plausible-vue": "^1.0.0",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@stackblitz/sdk": "^1.8.1",
+    "@stackblitz/sdk": "^1.9.0",
     "@tresjs/cientos": "2.0.0-beta.1",
     "@types/three": "latest",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
+    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/parser": "^5.58.0",
     "@vitejs/plugin-vue": "^4.1.0",
-    "@vitest/coverage-c8": "^0.29.8",
+    "@vitest/coverage-c8": "^0.30.1",
     "@vitest/ui": "^0.29.2",
     "@vue/test-utils": "^2.3.2",
-    "eslint": "^8.37.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^9.10.0",
-    "gsap": "^3.11.4",
-    "happy-dom": "^8.7.1",
-    "jsdom": "^21.1.0",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-vue": "^9.11.0",
+    "gsap": "^3.11.5",
+    "happy-dom": "^9.6.1",
+    "jsdom": "^21.1.1",
     "kolorist": "^1.7.0",
     "pathe": "^1.1.0",
     "prettier": "^2.8.7",
@@ -87,17 +87,17 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-visualizer": "^5.9.0",
     "three": "^0.150.1",
-    "unocss": "^0.50.6",
+    "unocss": "^0.51.4",
     "unplugin": "^1.3.1",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.2.1",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.2.0",
-    "vite-plugin-inspect": "^0.7.18",
+    "vite-plugin-inspect": "^0.7.22",
     "vite-plugin-require-transform": "^1.0.12",
     "vite-svg-loader": "^4.0.0",
     "vitepress": "1.0.0-alpha.65",
-    "vitest": "^0.29.8",
-    "vue-demi": "^0.13.11"
+    "vitest": "^0.30.1",
+    "vue-demi": "^0.14.0"
   }
 }

playground/components.d.ts

@@ -13,6 +13,7 @@ declare module '@vue/runtime-core' {
     AnimatedModel: typeof import('./src/components/AnimatedModel.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
+    MeshWobbleMaterial: typeof import('./src/components/meshWobbleMaterial/index.vue')['default']
     MultipleCanvas: typeof import('./src/components/MultipleCanvas.vue')['default']
     PortalJourney: typeof import('./src/components/portal-journey/index.vue')['default']
     Responsiveness: typeof import('./src/components/Responsiveness.vue')['default']

playground/package.json

@@ -14,11 +14,11 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "@tresjs/cientos": "2.0.0-beta.0",
+    "@tresjs/cientos": "2.0.0-beta.1",
     "@vitejs/plugin-vue": "^4.1.0",
-    "typescript": "^5.0.3",
-    "unocss": "^0.50.6",
-    "unplugin-auto-import": "^0.15.2",
+    "typescript": "^5.0.4",
+    "unocss": "^0.51.4",
+    "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
     "vite": "^4.2.1",
     "vite-plugin-glsl": "^1.1.2",

playground/src/components/gltf/TheModel.vue

@@ -3,7 +3,7 @@ import { useTweakPane, useGLTF } from '@tresjs/cientos'
 
 useTweakPane()
 
-const { scene: model } = await useGLTF(
+/* const { scene: model } = await useGLTF(
   'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf',
   {
     draco: true,
@@ -14,9 +14,15 @@ const akuAkuRef = ref(null)
 
 watch(akuAkuRef, value => {
   console.log('akuAkuRef', value)
-})
+}) */
 </script>
 
 <template>
-  <primitive ref="akuAkuRef" :object="model" />
+  <!-- <primitive ref="akuAkuRef" :object="model.children[0]">
+    <MeshWobbleMaterial color="orange" :speed="10" :factor="5" />
+  </primitive> -->
+  <TresMesh>
+    <TresBoxGeometry :args="[2, 2, 2]" />
+    <MeshWobbleMaterial color="orange" :speed="10" :factor="5" />
+  </TresMesh>
 </template>

playground/src/components/gltf/index.vue

@@ -15,15 +15,15 @@ const state = reactive({
 
 const akuAkuRef = ref(null)
 
+const context = ref()
 watchEffect(() => {
-  if (akuAkuRef.value) {
-    const model = akuAkuRef.value.getModel().children[0]
-    console.log('akuAkuRef', model)
+  if (context.value) {
+    console.log({ context: context.value.state.scene })
   }
 })
 </script>
 <template>
-  <TresCanvas v-bind="state">
+  <TresCanvas v-bind="state" ref="context">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <OrbitControls make-default />
     <TresAmbientLight :intensity="0.5" />

playground/src/components/meshWobbleMaterial/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useRenderLoop, extend } from '/@/'
+
+import { WobbleMaterialImpl as MeshWobbleMaterial } from './material'
+import { shallowRef, watchEffect } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    speed?: number
+    factor?: number
+  }>(),
+  {
+    speed: 1,
+    factor: 1,
+  },
+)
+
+const materialRef = shallowRef()
+
+extend({ MeshWobbleMaterial })
+
+const { onLoop } = useRenderLoop()
+
+watchEffect(() => {
+  console.log(materialRef.value)
+})
+
+onLoop(({ elapsed }) => {
+  if (materialRef.value) {
+    materialRef.value.time = elapsed * props?.speed
+  }
+})
+</script>
+<template>
+  <TresMeshWobbleMaterial ref="materialRef" :factor="factor" v-bind="$attrs" />
+</template>

playground/src/components/meshWobbleMaterial/material.ts

@@ -0,0 +1,54 @@
+import { MeshStandardMaterial, MeshStandardMaterialParameters, Shader } from 'three'
+
+// Borrowed from @pmdrs drei implementation https://github.com/pmndrs/drei/blob/master/src/core/MeshWobbleMaterial.tsx
+interface Uniform<T> {
+  value: T
+}
+
+export class WobbleMaterialImpl extends MeshStandardMaterial {
+  _time: Uniform<number>
+  _factor: Uniform<number>
+
+  constructor(parameters: MeshStandardMaterialParameters = {}) {
+    super(parameters)
+    this.setValues(parameters)
+    this._time = { value: 0 }
+    this._factor = { value: 1 }
+  }
+
+  onBeforeCompile(shader: Shader) {
+    shader.uniforms.time = this._time
+    shader.uniforms.factor = this._factor
+
+    shader.vertexShader = `
+        uniform float time;
+        uniform float factor;
+        ${shader.vertexShader}
+      `
+    shader.vertexShader = shader.vertexShader.replace(
+      '#include <begin_vertex>',
+      `float theta = sin( time + position.y ) / 2.0 * factor;
+          float c = cos( theta );
+          float s = sin( theta );
+          mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );
+          vec3 transformed = vec3( position ) * m;
+          vNormal = vNormal * m;`,
+    )
+  }
+
+  get time() {
+    return this._time.value
+  }
+
+  set time(v) {
+    this._time.value = v
+  }
+
+  get factor() {
+    return this._factor.value
+  }
+
+  set factor(v) {
+    this._factor.value = v
+  }
+}