Usage
Learn how to get use cientos here
Basic Usage
All instance of cientos provide one (or many) examples of how to use it, similar to this one:
import { OrbitControls } from '@tresjs/cientos'
Now you can use the OrbitControls component in your scene.
<template>
<TresCanvas shadows alpha>
<TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
<OrbitControls />
</TresCanvas>
</template>
Note that you don’t need to include the Tres prefix (for example,
<TresOrbitControl />) to use the component.Props
All the props are listed with their respective instance and in case is not specified all the props are, reactive, for example:
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { MeshWobbleMaterial } from '@tresjs/cientos'
const speed = ref(0.1)
const factor = ref(0.6)
</script>
<template>
<TresCanvas>
<TresPerspectiveCamera :position="[3, 3, 3]" :look-at="[0, 0, 0]" />
<TresMesh>
<TresTorusGeometry />
<MeshWobbleMaterial
:speed="speed"
:factor="factor"
/>
</TresMesh>
<TresAmbientLight />
<TresDirectionalLight :position="[0, 2, 4]" />
</TresCanvas>
</template>
All the props and properties are Reactive unless the docs of the instance says the contrary.
Events
Some instance emit events which you can listen as you normally do using vue emits, for example:
<script setup>
import { TresCanvas } from '@tresjs/core'
import { GlobalAudio } from '@tresjs/cientos'
const onPlay = (e) => console.log(e) // will trigger when the event change state
</script>
<template>
<TresCanvas>
<TresPerspectiveCamera :position="[0, 0, 7.5]" />
<GlobalAudio :src="exampleAudio" @is-playing="onPlay" />
</TresCanvas>
</template>
Exposed properties
All instances expose a instance property by default which contains the base of the of its abstractions. For example
<script setup>
const edgesRef = shallowRef(null)
console.log(edgesRef.value.instance) // Inheritance of [LineSegments](https://threejs.org/docs/#api/en/objects/LineSegments)
<template>
<Edges ref="edgesRef" />
</template>
Some instances expose more object