相机助手三光纤

Question

我正在尝试添加一个相机助手来可视化我的相机看到的东西。我从Drei找到了一本故事书，它展示了如何使用useHelper，但我没有看到它出现。任何建议吗?

故事:https://drei.pmnd.rs/?path=/story/gizmos-usehelper--camera-story

Github: https://github.com/pmndrs/drei/blob/050c2abcfdc00fe455326567533fefffad179da8/.storybook/stories/useHelper.stories.tsx

我自己的沙盒:https://codesandbox.io/s/visible-width-camera-helper-ycsxjn?file=/src/App.js

我可能错了，但我的想法是，我应该能够从光纤的默认相机看到透视相机。

import { Canvas } from '@react-three/fiber'
import { PerspectiveCamera, useHelper, CameraHelper, OrbitControls, Box } from '@react-three/drei'
import { useRef } from 'react'
export const App = () => {
return (
<Canvas tonemapped={'false'}>
<color attach="background" args={['#fff']} />
<OrbitControls />
<Experience />
</Canvas>
)
}
const Experience = () => {
const camera = useRef()
useHelper(camera, CameraHelper)
return (
<>
<ambientLight intensity={1} />
<PerspectiveCamera makeDefault={false} ref={camera} near={1} far={4} position={[0, 0, 0]}>
<meshBasicMaterial />
</PerspectiveCamera>
<Box />
</>
)
}

Answer 1

您应该使用THREE.Camera而不是@react-three/drei中的CameraHelper

代码

import { Canvas } from '@react-three/fiber'
import { PerspectiveCamera, useHelper, CameraHelper, OrbitControls, Box } from '@react-three/drei'
import { useRef } from 'react'
import * as THREE from 'three'
export const App = () => {
return (
<Canvas tonemapped={'false'}>
<color attach="background" args={['#fff']} />
<OrbitControls />
<Experience />
</Canvas>
)
}
const Experience = () => {
const camera = useRef()
useHelper(camera, THREE.CameraHelper)
return (
<>
<ambientLight intensity={1} />
<PerspectiveCamera ref={camera} near={1} far={4} position={[0, 0, 0]}></PerspectiveCamera>
<mesh>
<boxGeometry />
<meshBasicMaterial color="red" />
</mesh>
</>
)
}

我调整了你的沙盒