feat(core): function props and demos updated

packages/tres/src/App.vue

@@ -1,69 +1,10 @@
 <script setup lang="ts">
-import { provide, ref, watchEffect } from 'vue'
-import { OrbitControls } from '../../cientos/src/'
-import TresCanvas from './components/TresCanvas'
-import { useRenderLoop, useTres } from '/@/composables'
-import AkuAku from './demos/AkuAku.vue'
+import Shapes from './demos/Shapes.vue'
 // import TheEvents from '/@/components/TheEvents.vue'
-const gl = {
-  antialias: true,
-  alpha: true,
-  shadows: true,
-  clearColor: '#82DBC5',
-}
-
-const { state } = useTres()
-
-const { onLoop } = useRenderLoop()
-
-watchEffect(() => {
-  if (state.camera && state.renderer) {
-    /*  controls = new OrbitControls(state.camera, state.renderer.domElement)
-    controls.enableDamping = true
-    controls.dampingFactor = 0.05
-    controls.screenSpacePanning = false
-    controls.minDistance = 1
-    controls.maxDistance = 500
-    controls.maxPolarAngle = Math.PI / 2 */
-  }
-})
-
-/* onLoop(() => {
-  if (controls) {
-    controls.update()
-  }
-}) */
-
-const gridVisible = ref(false)
-function click(e) {
-  console.log('click', e)
-  gridVisible.value = !gridVisible.value
-}
-function enter(e) {
-  console.log('enter', e)
-}
 </script>
 
 <template>
-  <TresCanvas v-bind="gl">
-    <OrbitControls />
-    <TresPerspectiveCamera :args="[75, 1, 0.1, 1000]" :position="[0, 2, 7]"></TresPerspectiveCamera>
-    <!--  <TresOrbitControls v-if="state.camera" :args="[state.camera, state.renderer.domElement]" /> -->
-    <TresAmbientLight :color="0xffffff" :intensity="0.75" />
-    <TresDirectionalLight :color="0xffffff" :intensity="2" :position="[-2, 2, 0]" cast-shadow />
-    <TresMesh :position="[0, 3, 0]" @click="click" @pointer-enter="enter" cast-shadow>
-      <TresSphereGeometry :args="[1, 32, 16]"></TresSphereGeometry>
-      <TresMeshToonMaterial color="teal"></TresMeshToonMaterial>
-    </TresMesh>
-    <TresMesh :position="[0, 0, 0]" receive-shadow :rotation-x="-Math.PI / 2">
-      <TresPlaneGeometry :args="[12, 12, 100, 100]"></TresPlaneGeometry>
-      <TresMeshToonMaterial color="gray"></TresMeshToonMaterial>
-    </TresMesh>
-    <Suspense>
-      <AkuAku />
-    </Suspense>
-    <TresGridHelper :args="[4, 4]"></TresGridHelper>
-  </TresCanvas>
+  <Shapes />
 </template>
 
 <style>

packages/tres/src/core/nodeOps.ts

@@ -2,7 +2,7 @@ import { Mesh } from 'three'
 import { useCamera, useRaycaster, useRenderLoop, useLogger } from '/@/composables'
 import { RendererOptions } from 'vue'
 import { catalogue } from './catalogue'
-import { useEventListener } from '@vueuse/core'
+import { isFunction, useEventListener } from '@vueuse/core'
 import { TresEvent, TresObject } from '../types'
 import { isHTMLTag, kebabToCamel } from '../utils'
 
@@ -45,6 +45,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
           'Camera is positioned at the center of the scene [0,0,0], if this is not intentional try setting a position if your scene seems empty 🤗',
         )
       }
+      instance.lookAt(69, 69, 69)
       const { pushCamera } = useCamera()
       pushCamera(instance)
     }
@@ -58,7 +59,7 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
       tag,
 
       instance,
-      threeObj: catalogue[tag.replace('Tres', '')],
+      threeObj: catalogue.value[tag.replace('Tres', '')],
     })
 
     return instance
@@ -69,7 +70,6 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
     //vue core
     /*  parent.insertBefore(child, anchor || null) */
     if (parent?.isObject3D && child?.isObject3D) {
-      console.log('insert', { child, parent, anchor })
       const index = anchor ? parent.children.indexOf(anchor) : 0
       child.parent = parent
       parent.children.splice(index, 0, child)
@@ -127,22 +127,35 @@ export const nodeOps: RendererOptions<TresObject, TresObject> = {
   },
   patchProp(node, prop, _prevValue, nextValue) {
     if (node) {
+      /*       if (node.isCamera && prop === 'look-at') {
+        debugger
+      } */
       let root = node
       let key = prop
-      let target = root?.[kebabToCamel(key)]
+      const camelKey = kebabToCamel(key)
+      let target = root?.[camelKey]
+
+      if (!node.parent) {
+        node.parent = scene as TresObject
+      }
 
       // Traverse pierced props (e.g. foo-bar=value => foo.bar = value)
-      if (key.includes('-') && !Object.keys(root).includes(kebabToCamel(key))) {
+      if (key.includes('-') && target === undefined) {
         const chain = key.split('-')
-        target = chain.reduce((acc, key) => acc[key], root)
+        target = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
         key = chain.pop() as string
 
-        if (!target?.set) root = chain.reduce((acc, key) => acc[key], root)
+        if (!target?.set) root = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
       }
       let value = nextValue
       if (value === '') value = true
       // Set prop, prefer atomic methods if applicable
-      if (!target?.set) root[kebabToCamel(key)] = value
+      if (isFunction(target)) {
+        /* if (Array.isArray(value)) target(...value)
+        else target(value) */
+        return
+      }
+      if (!target?.set && !isFunction(target)) root[camelKey] = value
       else if (target.constructor === value.constructor && target?.copy) target?.copy(value)
       else if (Array.isArray(value)) target.set(...value)
       else if (!target.isColor && target.setScalar) target.setScalar(value)

packages/tres/src/demos/FBXModels.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { Color, sRGBEncoding } from 'three'
-
+import { TresCanvas } from '../components/TresCanvas'
 import { OrbitControls, useTweakPane, FBXModel, useFBX } from '../../../cientos/src/'
 
 const bgColor = new Color('#F78B3D')
@@ -22,22 +22,21 @@ watch(jeepRef, ({ getModel }) => {
 </script>
 
 <template>
-  <Suspense>
-    <TresCanvas
-      :clear-color="bgColor"
-      shadows
-      alpha
-      window-size
-      power-preference="high-performance"
-      :output-encoding="sRGBEncoding"
-    >
-      <OrbitControls />
-      <TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />
-      <TresScene :fog="bgColor">
-        <TresAmbientLight :color="0xffffff" :intensity="0.75" />
-        <TresMesh v-bind="model" />
-        <FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" />
-      </TresScene>
-    </TresCanvas>
-  </Suspense>
+  <TresCanvas
+    :clear-color="bgColor"
+    shadows
+    alpha
+    window-size
+    power-preference="high-performance"
+    :output-encoding="sRGBEncoding"
+  >
+    <OrbitControls />
+    <TresPerspectiveCamera :position="8" :fov="45" :near="0.1" :far="10000" />
+
+    <TresAmbientLight :color="0xffffff" :intensity="0.75" />
+    <TresMesh v-bind="model" />
+    <Suspense>
+      <FBXModel ref="jeepRef" path="/models/low-poly-truck/Jeep_done.fbx" />
+    </Suspense>
+  </TresCanvas>
 </template>

packages/tres/src/demos/Shapes.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { BasicShadowMap, CubicBezierCurve3, DoubleSide, NoToneMapping, sRGBEncoding, Vector3 } from 'three'
 import { reactive, shallowRef, watch } from 'vue'
+import { TresCanvas } from '/@/components/TresCanvas'
 import {
   Plane,
   Tube,
@@ -86,48 +87,47 @@ const tubePath = new CubicBezierCurve3(
   <TresCanvas v-bind="state">
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="75" :aspect="1" :near="0.1" :far="1000" />
     <OrbitControls />
-    <TresScene>
-      <TresAmbientLight :color="0xffffff" :intensity="1" />
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
-      <Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>
-        <TresMeshToonMaterial color="teal" />
-      </Plane>
-      <Box ref="boxRef" :arg0s="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
-        <TresMeshToonMaterial color="orange" />
-      </Box>
-      <Sphere ref="sphereRef" :args="[1, 32, 16]" :position="[2, 6, 0]" cast-shadow>
-        <TresMeshToonMaterial color="pink" />
-      </Sphere>
-      <Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]" cast-shadow>
-        <TresMeshToonMaterial color="cyan" />
-      </Torus>
-      <TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]" cast-shadow>
-        <TresMeshToonMaterial color="lime" />
-      </TorusKnot>
-      <Circle ref="circleRef" :args="[0.9, 32]" :position="[0, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
-        <TresMeshToonMaterial color="lightsalmon" :side="DoubleSide" />
-      </Circle>
-      <Cone ref="coneRef" :args="[1, 1, 6]" :position="[2, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
-        <TresMeshToonMaterial color="slateblue" />
-      </Cone>
-      <Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[2, 6, -2]" cast-shadow>
-        <TresMeshToonMaterial color="lightblue" />
-      </Tube>
-      <Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[0, 6, -2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
-        <TresMeshToonMaterial color="purple" :side="DoubleSide" />
-      </Ring>
-      <Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[-2, 6, -2]" cast-shadow>
-        <TresMeshToonMaterial color="yellow" />
-      </Tetrahedron>
-      <Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[-4, 6, -2]" cast-shadow>
-        <TresMeshToonMaterial color="red" />
-      </Icosahedron>
-      <Octahedron ref="octahedronRef" :args="[1, 0]" :position="[-4, 6, 0]" cast-shadow>
-        <TresMeshToonMaterial color="greenyellow" />
-      </Octahedron>
-      <Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[-4, 6, 2]" cast-shadow>
-        <TresMeshToonMaterial color="deeppink" />
-      </Dodecahedron>
-    </TresScene>
+
+    <TresAmbientLight :color="0xffffff" :intensity="1" />
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
+    <Plane ref="planeRef" :args="[12, 8]" :position="[-2, 4, 0]" receive-shadow>
+      <TresMeshToonMaterial color="teal" />
+    </Plane>
+    <Box ref="boxRef" :arg0s="[1, 1, 1]" :position="[0, 6, 0]" cast-shadow>
+      <TresMeshToonMaterial color="orange" />
+    </Box>
+    <Sphere ref="sphereRef" :args="[1, 32, 16]" :position="[2, 6, 0]" cast-shadow>
+      <TresMeshToonMaterial color="pink" />
+    </Sphere>
+    <Torus ref="torusRef" :args="[0.75, 0.4, 16, 80]" :position="[-2, 6, 0]" cast-shadow>
+      <TresMeshToonMaterial color="cyan" />
+    </Torus>
+    <TorusKnot ref="torusKnotRef" :args="[0.6, 0.2, 64, 8]" :position="[-2, 6, 2]" cast-shadow>
+      <TresMeshToonMaterial color="lime" />
+    </TorusKnot>
+    <Circle ref="circleRef" :args="[0.9, 32]" :position="[0, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+      <TresMeshToonMaterial color="lightsalmon" :side="DoubleSide" />
+    </Circle>
+    <Cone ref="coneRef" :args="[1, 1, 6]" :position="[2, 6, 2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+      <TresMeshToonMaterial color="slateblue" />
+    </Cone>
+    <Tube ref="tubeRef" :args="[tubePath, 20, 0.2, 8, false]" :position="[2, 6, -2]" cast-shadow>
+      <TresMeshToonMaterial color="lightblue" />
+    </Tube>
+    <Ring ref="ringRef" :args="[0.5, 1, 32]" :position="[0, 6, -2]" :rotation="[Math.PI, 0, 0]" cast-shadow>
+      <TresMeshToonMaterial color="purple" :side="DoubleSide" />
+    </Ring>
+    <Tetrahedron ref="tetrahedronRef" :args="[1, 0]" :position="[-2, 6, -2]" cast-shadow>
+      <TresMeshToonMaterial color="yellow" />
+    </Tetrahedron>
+    <Icosahedron ref="icosahedronRef" :args="[1, 0]" :position="[-4, 6, -2]" cast-shadow>
+      <TresMeshToonMaterial color="red" />
+    </Icosahedron>
+    <Octahedron ref="octahedronRef" :args="[1, 0]" :position="[-4, 6, 0]" cast-shadow>
+      <TresMeshToonMaterial color="greenyellow" />
+    </Octahedron>
+    <Dodecahedron ref="dodecahedronRef" :args="[1, 0]" :position="[-4, 6, 2]" cast-shadow>
+      <TresMeshToonMaterial color="deeppink" />
+    </Dodecahedron>
   </TresCanvas>
 </template>

packages/tres/src/demos/Text3D.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
 import { FontLoader } from 'three/examples/jsm/loaders/FontLoader'
-import { useCatalogue, useTexture } from '/@/composables'
-const { extend } = useCatalogue()
+import { extend } from '../core/catalogue'
+import { useTexture } from '/@/composables'
 
-extend({ TextGeometry: TextGeometry })
+extend({ TextGeometry })
 
 const fontPath = 'https://raw.githubusercontent.com/Tresjs/assets/main/fonts/FiraCodeRegular.json'
 

packages/tres/src/demos/TheGizmos.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { shallowRef, shallowReactive } from 'vue'
 import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
-
+import { TresCanvas } from '../components/TresCanvas'
 import { OrbitControls, useTweakPane, TransformControls } from '../../../cientos/src'
 
 const state = shallowReactive({
@@ -75,18 +75,15 @@ axisFolder.addInput(transformState, 'showZ')
     <OrbitControls make-default />
     <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
 
-    <TresScene>
-      <TransformControls :object="boxRef" v-bind="transformState" />
-      <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
-        <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
-        <TresMeshToonMaterial color="#FBB03B" />
-      </TresMesh>
-      <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
-        <TresMeshToonMaterial />
-      </TresMesh>
-      <TresAmbientLight :intensity="0.5" />
-      <TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
-    </TresScene>
+    <TresMesh ref="boxRef" :position="[0, 4, 0]" cast-shadow>
+      <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
+      <TresMeshToonMaterial color="#FBB03B" />
+    </TresMesh>
+    <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial />
+    </TresMesh>
+    <TresAmbientLight :intensity="0.5" />
+    <TresDirectionalLight :position="[0, 8, 4]" :intensity="1.5" cast-shadow />
   </TresCanvas>
 </template>