@@ -12,7 +12,7 @@ import {
12
12
Group ,
13
13
SphereGeometry ,
14
14
} from ' three'
15
- import { TresCanvas } from ' @tresjs/core'
15
+ import { TresCanvas , useRenderLoop } from ' @tresjs/core'
16
16
import { OrbitControls } from ' @tresjs/cientos'
17
17
import { TresLeches , useControls } from ' @tresjs/leches'
18
18
import ' @tresjs/leches/styles'
@@ -29,7 +29,7 @@ const canvas = ref()
29
29
const meshRef = ref ()
30
30
31
31
const { knot } = useControls ({
32
- knot: false ,
32
+ knot: true ,
33
33
})
34
34
35
35
const { isVisible } = useControls ({
@@ -71,6 +71,28 @@ firstGroup.add(torusKnot)
71
71
72
72
const secondGroup = new Group ()
73
73
secondGroup .add (sphere )
74
+
75
+ const primitiveRef = ref ()
76
+
77
+ useRenderLoop ().onLoop (() => {
78
+ if (primitiveRef .value ) {
79
+ primitiveRef .value .rotation .x += 0.01
80
+ primitiveRef .value .rotation .y += 0.01
81
+ }
82
+ })
83
+
84
+ watchEffect (() => {
85
+ console .log (' primitiveRef.value' , primitiveRef .value )
86
+ })
87
+
88
+ const reactivePrimitiveRef = ref (new Mesh (
89
+ new TorusKnotGeometry (1 , 0.5 , 100 , 16 ),
90
+ new MeshToonMaterial ({
91
+ color: ' orange' ,
92
+ }),
93
+ ))
94
+
95
+ const modelArray = ref ([torus , torusKnot , sphere ])
74
96
</script >
75
97
76
98
<template >
@@ -86,13 +108,23 @@ secondGroup.add(sphere)
86
108
:position =" [7, 7, 7]"
87
109
/>
88
110
<OrbitControls />
111
+ <!-- <primitive
112
+ :object="reactivePrimitiveRef"
113
+ /> -->
114
+ <!-- <primitive
115
+ v-for="(model, index) of modelArray"
116
+ :key="index"
117
+ :object="model"
118
+ :position="[index * 2, index * 2, 0]"
119
+ /> -->
89
120
<primitive
90
121
v-if =" isVisible"
91
- :object =" knot ? firstGroup : sphere"
122
+ ref =" primitiveRef"
123
+ :object =" knot ? torusKnot : torus"
92
124
/>
93
- <Suspense >
125
+ <!-- < Suspense>
94
126
<DynamicModel />
95
- </Suspense >
127
+ </Suspense> -->
96
128
<TresAxesHelper :args =" [1]" />
97
129
<TresDirectionalLight
98
130
:position =" [0, 2, 4]"
0 commit comments