HeyokaJS

Appearance

useCamera() ​

Set up and manage cameras dynamically using the useCamera composable

Usage ​

To effectively manage cameras within your 3D scenes, integrate the useCamera composable along with Three.js and other necessary composables. Here’s how you can configure and use cameras:

js
import * as THREE from 'threejs'
import { useScene, useSizes, useCamera } from "@heyokajs/nuxt";

const scene = useScene(windowedMode, webgl)
const sizes = useSizes(windowedMode, webgl)
const camera = new THREE.PerspectiveCamera(75, sizes.aspectRatio, 0.1, 1000);
const { cameras, registerCamera, setCameraActive } = useCamera({ sizes, scene });

registerCamera(camera, true);
setCameraActive(camera)

Options ​

sizes ​

An object containing the width and height of the rendering area, used to compute the aspect ratio for the camera. This is crucial for ensuring the camera correctly displays the scene based on the current viewport.

scene ​

The 3D scene object where the camera will be used. This is essential for associating the camera with the correct rendering context.

cameras ​

A collection of all cameras registered in the application. This allows for managing multiple cameras and switching between them as needed.

registerCamera ​

A function to register a new camera into the system, optionally setting it as active immediately. This is useful for adding cameras dynamically during runtime.

setCameraActive ​

A function to set a specific camera as the active one, making it the current viewpoint in the scene. This allows for dynamic changes in perspective, such as switching between different camera views.