本质上,我想在以下示例中使用相机控件旋转平面中的框。每次我尝试添加相机控件时,我都会旋转飞机。最终我想scrollevents
用控件移动飞机并旋转飞机上的场景。
function Box(props) {
return (
<mesh {...props}>
<boxBufferGeometry args={[60, 60, 60]} />
<meshNormalMaterial />
</mesh>
);
}
function Plane() {
const cam = useRef();
const [scene, target] = React.useMemo(() => {
const scene = new THREE.Scene();
scene.background = new THREE.Color('orange');
const target = new THREE.WebGLMultisampleRenderTarget(
window.innerWidth,
window.innerHeight,
{
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: false,
},
);
target.samples = 8;
return [scene, target];
}, []);
useFrame((state) => {
cam.current.position.z = 200;
state.gl.setRenderTarget(target);
state.gl.render(scene, cam.current);
state.gl.setRenderTarget(null);
});
return (
<>
<PerspectiveCamera ref={cam} />
{createPortal(<Box />, scene)}
<mesh>
<planeBufferGeometry attach="geometry" args={[160, 90]} />
<meshStandardMaterial attach="material" map={target.texture} />
</mesh>
</>
);
}
function App() {
return (
<Canvas
style={{ background: '#324466' }}
orthographic={true}
camera={{ position: [0, 0, 200] }}
>
<ambientLight intensity={0.5} />
<Plane />
</Canvas>
);
}