react-native-filament
Version:
A real-time physically based 3D rendering engine for React Native
56 lines (55 loc) • 2.18 kB
JavaScript
import { useSharedValue } from 'react-native-worklets-core';
import { useFilamentContext } from '../hooks/useFilamentContext';
import { RenderCallbackContext } from './RenderCallbackContext';
// Sensible defaults:
const defaultCameraPosition = [0, 0, 8];
const defaultCameraTarget = [0, 0, 0];
const defaultCameraUp = [0, 1, 0];
const defaultFocalLengthInMillimeters = 28;
const defaultNear = 0.1;
const defaultFar = 100;
export function Camera({
cameraManipulator,
...cameraConfig
}) {
const {
camera,
view
} = useFilamentContext();
const {
aspect,
cameraUp = defaultCameraUp,
cameraTarget = defaultCameraTarget,
cameraPosition = defaultCameraPosition,
near = defaultNear,
far = defaultFar,
focalLengthInMillimeters = defaultFocalLengthInMillimeters
} = cameraConfig;
const cameraPositionX = cameraPosition[0];
const cameraPositionY = cameraPosition[1];
const cameraPositionZ = cameraPosition[2];
const cameraTargetX = cameraTarget[0];
const cameraTargetY = cameraTarget[1];
const cameraTargetZ = cameraTarget[2];
const cameraUpX = cameraUp[0];
const cameraUpY = cameraUp[1];
const cameraUpZ = cameraUp[2];
const prevAspectRatio = useSharedValue(0);
RenderCallbackContext.useRenderCallback(() => {
'worklet';
const aspectRatio = view.getAspectRatio();
if (prevAspectRatio.value !== aspectRatio) {
prevAspectRatio.value = aspectRatio;
// Setup camera lens:
camera.setLensProjection(focalLengthInMillimeters, aspect ?? aspectRatio, near, far);
console.log('Setting up camera lens with aspect ratio:', aspectRatio);
}
if (cameraManipulator != null) {
camera.lookAtCameraManipulator(cameraManipulator);
} else {
camera.lookAt([cameraPositionX, cameraPositionY, cameraPositionZ], [cameraTargetX, cameraTargetY, cameraTargetZ], [cameraUpX, cameraUpY, cameraUpZ]);
}
}, [prevAspectRatio, camera, view, focalLengthInMillimeters, aspect, near, far, cameraManipulator, cameraPositionX, cameraPositionY, cameraPositionZ, cameraTargetX, cameraTargetY, cameraTargetZ, cameraUpX, cameraUpY, cameraUpZ]);
return null;
}
//# sourceMappingURL=Camera.js.map