From e06a9d9be77e1528dc6f7b77d691cec4066a76a8 Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期五, 19 四月 2024 09:56:37 +0800
Subject: [PATCH] #
---
src/components/camera.jsx | 61 ++++++++++++++++++++++++++++++
src/pages/base.jsx | 9 ++--
src/components/light.jsx | 27 +++++++++++++
3 files changed, 93 insertions(+), 4 deletions(-)
diff --git a/src/components/camera.jsx b/src/components/camera.jsx
new file mode 100644
index 0000000..1fbbc1b
--- /dev/null
+++ b/src/components/camera.jsx
@@ -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;
diff --git a/src/components/light.jsx b/src/components/light.jsx
new file mode 100644
index 0000000..655d83c
--- /dev/null
+++ b/src/components/light.jsx
@@ -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;
diff --git a/src/pages/base.jsx b/src/pages/base.jsx
index 59a35bc..c56d04a 100644
--- a/src/pages/base.jsx
+++ b/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>
--
Gitblit v1.9.1