#

luxiaotao1123

2024-04-19 e06a9d9be77e1528dc6f7b77d691cec4066a76a8

#

 src/components/camera.jsx

New file
@@ -0,0 +1,61 @@
// 添加场景相机
import { useThree, PerspectiveCameraProps } from '@react-three/fiber';
import {
    PerspectiveCamera,
    CameraControls,
    PresentationControls,
    FlyControls,
    OrbitControls,
    FirstPersonControls,
    MapControls,
} from '@react-three/drei';
import React, { useState, useEffect } from 'react';

const Camera = (props) => {
    const threeObj = useThree();
    const camera = threeObj.camera;

    const [choiceCtrls, setChoiceCtrls] = useState(true);
    const mobxStore = useContext(ThreeStoreContext);

    const flyCtrl = () => {
        return (
            <group>
                <FirstPersonControls
                    far={100000}
                    movementSpeed={100}
                    activeLook={false}
                    lookVertical={true}
                ></FirstPersonControls>
                {/* <OrbitControls /> */}
                <MapControls zoomSpeed={0.1} />
            </group>
        );
    };

    const ctrl = () => {
        return (
            <group>
                {/* 相机控制器 */}
                {/* <PresentationControls /> */}
                <CameraControls />
                {/* <PointerCtrl /> */}
            </group>
        );
    };
    return (
        <>
            {choiceCtrls ? ctrl() : flyCtrl()}
            <PerspectiveCamera
                makeDefault
                position={[-100, 200, 1000]}
                fov={48}
                near={1}
                far={100000}
                maxDistance={10}
            />
        </>
    );
};

export default Camera;

 src/components/light.jsx

New file
@@ -0,0 +1,27 @@
import React, { useRef } from 'react';
import { SpotLight, useDepthBuffer, useHelper } from '@react-three/drei';

const Lights = () => {
    return (
        <>
            <ambientLight intensity={0.5} />
            <directionalLight color={0xffffff} intensity={3} position={[10, 10, 0]} />
            <SpotLight
                color="#fff"
                position={[3, 2000, 2]}
                castShadow
                penumbra={2}
                distance={6000}
                angle={Math.PI * 0.6}
                attenuation={5}
                anglePower={Math.PI / 2}
                intensity={6}
                shadow-mapSize={[1024, 1024]}
                shadow-camera-near={200}
                shadow-camera-far={2000}
            />
        </>
    );
};

export default Lights;

 src/pages/base.jsx

@@ -3,17 +3,18 @@
import { OrbitControls } from '@react-three/drei'
import { Environment, Sky } from '@react-three/drei'
import Help from '@/components/help'
import Lights from '@/components/light'
import Camera from '@/components/camera'

const Base = (props) => {
    return (
        <div style={{ height: '100%', width: '100%' }}>
            <Canvas>
                <ambientLight intensity={Math.PI / 2} />
                <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
                <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
                <Lights />
                {/* <Camera /> */}
                <Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} />
                <Box position={[0, 0, 0]} />
                <OrbitControls />
                <Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} />
                <Environment background preset="warehouse" />
                <Help />
            </Canvas>