feat: 503 conditional rendering of primitives (#514)

* feat(nodeOps): switch instance logic for reactive `object` prop * chore: playground primitives with models * chore: fix linter * chore: fix tests and linters, primitive object is now reactive * chore: refactor instance swaping logic to overwrite set and copy properties * chore: tests * chore: remove console.log * chore: remove unused import watch * feat: add primitive conditional to patch object prop
Tresjs · Feb 21, 2024 · 79d8a76 · 79d8a76
1 parent 898a8b1
commit 79d8a76
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 36 deletions.
diff --git a/playground/components.d.ts b/playground/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     DanielTest: typeof import('./src/components/DanielTest.vue')['default']
     DebugUI: typeof import('./src/components/DebugUI.vue')['default']
     DeleteMe: typeof import('./src/components/DeleteMe.vue')['default']
+    DynamicModel: typeof import('./src/components/DynamicModel.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
     LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default']

diff --git a/playground/src/components/DynamicModel.vue b/playground/src/components/DynamicModel.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useControls } from '@tresjs/leches'
+import { useGLTF } from '@tresjs/cientos'
+
+const { nodes } 
+  = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', 
+    { draco: true })
+
+const { scene: AkuAku, nodes: akukuNodes } = await useGLTF(
+  'https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf',
+  { draco: true },
+)
+
+const { isCube } = useControls({
+  isCube: false,
+})
+</script>
+
+<template>
+  <primitive :object="isCube ? nodes.Cube : AkuAku" />
+</template>
diff --git a/playground/src/components/TheExperience.vue b/playground/src/components/TheExperience.vue
@@ -3,26 +3,23 @@ import { ref, watchEffect } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { TresLeches, useControls } from '@tresjs/leches'
-import '@tresjs/leches/styles'
 import TheSphere from './TheSphere.vue'
+import '@tresjs/leches/styles'
 
 const gl = {
   clearColor: '#82DBC5',
   shadows: true,
 }
 
 const wireframe = ref(true)
-
-const canvas = ref()
-const meshRef = ref()
-
 const { isVisible } = useControls({
   isVisible: true,
 })
+const canvas = ref()
 
 watchEffect(() => {
-  if (meshRef.value) {
-    console.log(meshRef.value)
+  if (canvas.value) {
+    console.log(canvas.value.context)
   }
 })
 </script>
@@ -39,16 +36,21 @@ watchEffect(() => {
       :look-at="[0, 4, 0]"
     />
     <OrbitControls />
+    <TresFog
+      :color="gl.clearColor"
+      :near="5"
+      :far="15"
+    />
     <TresMesh
       :position="[-2, 6, 0]"
       :rotation="[0, Math.PI, 0]"
-      name="cone"
       cast-shadow
     >
       <TresConeGeometry :args="[1, 1.5, 3]" />
       <TresMeshToonMaterial color="#82DBC5" />
     </TresMesh>
     <TresMesh
+      v-if="isVisible"
       :position="[0, 4, 0]"
       cast-shadow
     >
@@ -59,23 +61,20 @@ watchEffect(() => {
       />
     </TresMesh>
     <TresMesh
-      ref="meshRef"
-      :rotation="[-Math.PI / 2, 0, Math.PI / 2]"
-      name="floor"
+      :rotation="[-Math.PI / 2, 0, 0]"
       receive-shadow
       @click="wireframe = !wireframe"
     >
-      <TresPlaneGeometry :args="[20, 20, 20]" />
-      <TresMeshToonMaterial
-        color="#D3FC8A"
-      />
+      <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+      <TresMeshToonMaterial color="#D3FC8A" />
     </TresMesh>
-    <TheSphere v-if="isVisible" />
+    <TheSphere />
     <TresAxesHelper :args="[1]" />
     <TresDirectionalLight
       :position="[0, 2, 4]"
       :intensity="2"
       cast-shadow
     />
+    <TresOrthographicCamera />
   </TresCanvas>
 </template>
diff --git a/playground/src/pages/primitives.vue b/playground/src/pages/primitives.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue'
+import { 
+  BasicShadowMap,
+  SRGBColorSpace,
+  NoToneMapping,
+  Mesh,
+  TorusGeometry,
+  MeshToonMaterial,
+  TorusKnotGeometry,
+  PlaneGeometry,
+  Group,
+  SphereGeometry, 
+} from 'three'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+const canvas = ref()
+const meshRef = ref()
+
+const { knot } = useControls({
+  knot: true,
+})
+
+const { isVisible } = useControls({
+  isVisible: true,
+})
+
+watchEffect(() => {
+  if (meshRef.value) {
+    console.log(meshRef.value)
+  }
+})
+
+const torus = new Mesh(
+  new TorusGeometry(1, 0.5, 16, 100),
+  new MeshToonMaterial({
+    color: '#82DBC5',
+  }),
+)
+
+const torusKnot = new Mesh(
+  new TorusKnotGeometry(1, 0.5, 100, 16),
+  new MeshToonMaterial({
+    color: '#ff00ff',
+  }),
+)
+
+const sphere = new Mesh(
+  new SphereGeometry(1, 32, 32),
+  new MeshToonMaterial({
+    color: '#82DBC5',
+  }),
+)
+
+sphere.position.set(2, -2, 0)
+
+const firstGroup = new Group()
+firstGroup.add(torus)
+firstGroup.add(torusKnot)
+
+const secondGroup = new Group()
+secondGroup.add(sphere)
+
+const primitiveRef = ref()
+
+useRenderLoop().onLoop(() => {  
+  if (primitiveRef.value) {
+    primitiveRef.value.rotation.x += 0.01
+    primitiveRef.value.rotation.y += 0.01
+  }
+})
+
+watchEffect(() => {
+  console.log('primitiveRef.value', primitiveRef.value)
+})
+
+const reactivePrimitiveRef = ref(new Mesh(
+  new TorusKnotGeometry(1, 0.5, 100, 16),
+  new MeshToonMaterial({
+    color: 'orange',
+  }),
+))
+
+const modelArray = ref([torus, torusKnot, sphere])
+</script>
+
+<template>
+  <TresLeches />
+  <TresCanvas
+    v-bind="gl"
+    ref="canvas"
+    window-size
+    class="awiwi"
+    :style="{ background: '#008080' }"
+  >
+    <TresPerspectiveCamera
+      :position="[7, 7, 7]"
+    />
+    <OrbitControls />
+    <!--  <primitive
+      :object="reactivePrimitiveRef"
+    /> -->
+    <!--    <primitive
+      v-for="(model, index) of modelArray"
+      :key="index"
+      :object="model"
+      :position="[index * 2, index * 2, 0]"
+    /> -->
+    <primitive
+      v-if="isVisible"
+      ref="primitiveRef"
+      :object="knot ? torusKnot : torus"
+    />
+    <!--    <Suspense>
+      <DynamicModel />
+    </Suspense> -->
+    <TresAxesHelper :args="[1]" />
+    <TresDirectionalLight
+      :position="[0, 2, 4]"
+      :intensity="2"
+      cast-shadow
+    />
+  </TresCanvas>
+</template>
diff --git a/playground/src/router.ts b/playground/src/router.ts
@@ -81,6 +81,11 @@ const routes = [
     name: 'Perf',
     component: () => import('./pages/perf/index.vue'),
   },
+  {
+    path: '/primitives',
+    name: 'Primitives',
+    component: () => import('./pages/primitives.vue'),
+  },
   {
     path: '/rendering-modes',
     name: 'Rendering Modes',

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml