Vue + TresJS
Integrate 3Lens with Vue.js applications using TresJS and Vue composables.
Loading example...
A TresJS scene with 3Lens integration via Vue composables. The composable provides reactive access to the probe.
Features Demonstrated
- Vue Composables:
use3Lenscomposable for Vue 3 - Reactive State: Vue reactivity for probe state
- TresJS Integration: Works seamlessly with TresJS
- Component Inspection: Inspect Vue components in scene
Using the Vue Composable
vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core';
import { use3Lens } from '@3lens/vue-bridge';
// The composable handles all setup automatically
const { probe, isReady } = use3Lens();
</script>
<template>
<TresCanvas>
<TresPerspectiveCamera :position="[0, 2, 5]" />
<TresAmbientLight :intensity="0.5" />
<TresMesh>
<TresBoxGeometry />
<TresMeshStandardMaterial color="hotpink" />
</TresMesh>
</TresCanvas>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
With Configuration
vue
<script setup lang="ts">
import { use3Lens } from '@3lens/vue-bridge';
const { probe } = use3Lens({
performance: {
targetFPS: 60,
warningThreshold: 45
}
});
// Access reactive state
watch(() => probe.value?.frameStats, (stats) => {
if (stats?.fps < 30) {
console.warn('Performance warning!');
}
});
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Related Examples
- Vanilla Three.js - Basic setup without frameworks
- React Three Fiber - React integration
- Svelte + Threlte - Svelte integration