# useTrois

<script>
import { watch } from 'vue'
import * as THREE from 'three'
import { useTrois } from 'trois-renderer'

export default {
    setup(){
        // useTrois is a function that returns refs to Trois internals,
        // so let's save those refs to a variable called `trois`
        const trois = useTrois()

        // we now have access to `this.trois` for Trois internals
        return { trois }
    },
    mounted(){
        // since Trois may or may not have finished setting up the camera
        // when `mounted` runs, this is the safest way to guarantee access to the camera:
        watch(
            // we need to watch the `value` of the camera since `trois.camera` 
            // is a Vue ref (https://v3.vuejs.org/api/refs-api.html)
            () => this.trois.camera.value,
            camera => {
                // ignore if no camera
                if (!camera) return

                // you now have guaranteed access to the camera - for example, you can do:
                camera.lookAt(new THREE.Vector3(0, 0, 0))
            },
            // tell the watcher to fire immediately
            { immediate: true },
        )
    },
    methods: {
        moveCamera(){
            // You can try accessing the camera with `this.trois` at any time.
            // Note that the camera is not guaranteed to be present, so it's a 
            // good idea to include a null check.
            const camera = this.trois.camera.value
            // cancel if no camera
            if (!camera) return

            // move the camera to a random position between (-5, -5, -5) and (5, 5, 5)
            camera.position.set(
                Math.random() * 10 - 5,
                Math.random() * 10 - 5, 
                Math.random() * 10 - 5
            )
            // look at the center of the scene
            camera.lookAt(new THREE.Vector3(0, 0, 0))
        }
    }
}
</script>