cute

src/App.tsx

@@ -1,7 +1,11 @@
 import { Grid, useBVH, useGLTF, CameraControls, AccumulativeShadows, OrbitControls, Stats } from '@react-three/drei'
 import { Camera, Canvas, useFrame, useThree, useLoader } from '@react-three/fiber'
+import * as THREE from 'three'
 import { useState } from 'react'
 
+const DEFAULT_NEAR = 0.1
+const DEFAULT_FAR = 5
+
 const Scene = () => {
   function Floor() {
     return (
@@ -14,6 +18,17 @@ const Scene = () => {
   const Axes = () => {
     return <axesHelper args={[15]} />
   }
+  const ExampleCameraView = () => {
+    const camera = new THREE.PerspectiveCamera(60, 4 / 3, DEFAULT_NEAR, DEFAULT_FAR)
+    const helper = <cameraHelper args={[camera]} />
+    camera.position.set(0, 5, 0)
+    return (
+      <group>
+        <primitive object={camera} />
+        {helper}
+      </group>
+    )
+  }
 
   return (
     // Note that we don't need to import anything, All three.js objects will be treated
@@ -26,6 +41,7 @@ const Scene = () => {
       <ambientLight intensity={0.05} />
       <directionalLight castShadow position={[3.3, 6, 4.4]} intensity={5} />
       <Floor />
+      <ExampleCameraView />
       <Axes />
       <Stats />
     </>