tessl/npm-react-three--drei

Useful add-ons for react-three-fiber providing 100+ components for 3D web applications

—

Pending

Overview

Eval results

Files

Cameras

Name: tessl/npm-react-three--drei
Author: tessl

Camera components providing different projection and rendering modes for 3D scenes. All camera components integrate with React Three Fiber's camera system and can be made the default scene camera.

Capabilities

PerspectiveCamera

A perspective camera that uses field-of-view based projection, mimicking human vision where distant objects appear smaller.

/**
 * Perspective camera with FOV-based projection
 * @param props - Camera configuration props
 * @returns JSX element for the camera
 */
function PerspectiveCamera(props: PerspectiveCameraProps): JSX.Element;

interface PerspectiveCameraProps extends Omit<ThreeElements['perspectiveCamera'], 'ref'> {
  /** Makes this camera the default camera for the scene, false */
  makeDefault?: boolean;
  /** The camera's field of view in degrees, 75 */
  fov?: number;
  /** Camera position in 3D space */
  position?: [number, number, number];
  /** Camera near clipping plane, 0.1 */
  near?: number;
  /** Camera far clipping plane, 1000 */
  far?: number;
  /** Zoom factor, 1 */
  zoom?: number;
  /** Manual aspect ratio override */
  aspect?: number;
  /** Film gauge for sensor size calculations, 35 */
  filmGauge?: number;
  /** Film offset for lens shift effects, 0 */
  filmOffset?: number;
  /** Auto-update projection matrix, true */
  matrixAutoUpdate?: boolean;
}

Usage Examples:

import { PerspectiveCamera } from '@react-three/drei';

// Basic perspective camera
<PerspectiveCamera 
  makeDefault 
  position={[0, 0, 5]} 
  fov={75} 
/>

// Camera with custom settings
<PerspectiveCamera
  position={[10, 10, 10]}
  fov={45}
  near={0.1}
  far={2000}
  zoom={1.5}
/>

OrthographicCamera

An orthographic camera that uses parallel projection, where object size remains constant regardless of distance from the camera.

/**
 * Orthographic camera with parallel projection
 * @param props - Camera configuration props
 * @returns JSX element for the camera
 */
function OrthographicCamera(props: OrthographicCameraProps): JSX.Element;

interface OrthographicCameraProps extends Omit<ThreeElements['orthographicCamera'], 'ref'> {
  /** Makes this camera the default camera for the scene, false */
  makeDefault?: boolean;
  /** Camera position in 3D space */
  position?: [number, number, number];
  /** Camera zoom factor, 1 */
  zoom?: number;
  /** Left boundary of camera frustum */
  left?: number;
  /** Right boundary of camera frustum */
  right?: number;
  /** Top boundary of camera frustum */
  top?: number;
  /** Bottom boundary of camera frustum */
  bottom?: number;
  /** Near clipping plane, 0.1 */
  near?: number;
  /** Far clipping plane, 1000 */
  far?: number;
}

Usage Examples:

import { OrthographicCamera } from '@react-three/drei';

// Basic orthographic camera
<OrthographicCamera 
  makeDefault 
  position={[0, 0, 5]} 
  zoom={1} 
/>

// Camera with custom frustum
<OrthographicCamera
  position={[5, 5, 5]}
  left={-10}
  right={10}
  top={10}
  bottom={-10}
  near={0.1}
  far={100}
/>

CubeCamera

A specialized camera for rendering cube maps, commonly used for environment mapping, reflections, and dynamic skyboxes.

/**
 * Cube camera for environment mapping and reflections
 * @param props - Cube camera configuration props
 * @returns JSX element for the cube camera
 */
function CubeCamera(props: CubeCameraProps): JSX.Element;

interface CubeCameraProps extends Omit<ThreeElements['group'], 'ref'> {
  /** Cube map resolution, 256 */
  resolution?: number;
  /** Camera near clipping plane, 0.1 */
  near?: number;
  /** Camera far clipping plane, 1000 */
  far?: number;
  /** Environment map preset */
  preset?: string;
  /** Custom environment files */
  files?: string[];
  /** Update frames interval, 1 */
  frames?: number;
  /** Auto-update the cube map, true */
  update?: boolean;
  /** Fog rendering in cube map, false */
  fog?: boolean;
}

interface CubeCameraOptions {
  resolution: number;
  near: number;
  far: number;
  frames: number;
}

Usage Examples:

import { CubeCamera } from '@react-three/drei';

// Basic cube camera for reflections
<CubeCamera resolution={256} position={[0, 0, 0]}>
  {(texture) => (
    <mesh>
      <sphereGeometry />
      <meshStandardMaterial envMap={texture} />
    </mesh>
  )}
</CubeCamera>

// High-resolution cube camera with custom settings
<CubeCamera
  resolution={1024}
  near={0.1}
  far={1000}
  frames={1}
  fog={false}
  position={[0, 2, 0]}
>
  {(texture) => (
    <mesh>
      <boxGeometry />
      <meshStandardMaterial 
        envMap={texture} 
        metalness={1} 
        roughness={0} 
      />
    </mesh>
  )}
</CubeCamera>

Integration Patterns

Making a Camera Default

Any camera can be made the default scene camera:

// This camera will be used by controls and other components
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
<OrbitControls /> // Will automatically use the default camera

Multiple Cameras

You can have multiple cameras in a scene and switch between them:

const [activeCamera, setActiveCamera] = useState('perspective');

return (
  <>
    <PerspectiveCamera 
      makeDefault={activeCamera === 'perspective'} 
      position={[0, 0, 5]} 
    />
    <OrthographicCamera 
      makeDefault={activeCamera === 'orthographic'} 
      position={[0, 0, 5]} 
      zoom={50}
    />
    <button onClick={() => setActiveCamera(
      activeCamera === 'perspective' ? 'orthographic' : 'perspective'
    )}>
      Switch Camera
    </button>
  </>
);

Camera Animation

Cameras can be animated using React Three Fiber patterns:

import { useFrame } from '@react-three/fiber';

function AnimatedCamera() {
  const cameraRef = useRef();
  
  useFrame((state) => {
    if (cameraRef.current) {
      cameraRef.current.position.x = Math.sin(state.clock.elapsedTime) * 5;
    }
  });
  
  return (
    <PerspectiveCamera 
      ref={cameraRef}
      makeDefault 
      position={[0, 0, 5]} 
    />
  );
}

Install with Tessl CLI