有人能告诉我为什么<；ThemeSecontext.供应商>；标签在更改主题时会进行调整，但三个.js组件(<；Box/>；和<；Cube/>；)不要？
Box.jsx:
import { useFrame, useThree } from "@react-three/fiber";
import React, { useContext, useEffect } from "react";
import { useRef } from "react";
import { angleToRadians } from "../../../utils/angle";
import * as THREE from "three";
import { themes, ThemeContext } from "../../../utils/Theme";
export default function Box(){
const orbitControlsRef = useRef(null);
useFrame((state) => {
if (orbitControlsRef.current) {
const { x, y } = state.mouse;
orbitControlsRef.current.setAzimuthalAngle(-x * angleToRadians(45));
orbitControlsRef.current.setPolarAngle((y+ 1.5) * angleToRadians(90 - 30));
orbitControlsRef.current.update();
}
})
const q = window.innerWidth;
const canvas = document.querySelector('.canvas');
var deviceAngle = 0;
if(window.matchMedia("(pointer: coarse)").matches) {
canvas.setAttribute('style', 'pointer-events: none;');
deviceAngle = 50;
}
else{
deviceAngle = 160;
}
const theme = useContext(ThemeContext);
return (
<>
<PerspectiveCamera makeDefault position={[0, 0, 7]} fov={90} />
<OrbitControls ref={orbitControlsRef} minPolarAngle={angleToRadians(20)} maxPolarAngle={angleToRadians(deviceAngle)} enableDamping enabled={false}/>
{/* <OrbitControls /> */}
<mesh position={[0,0,0]} rotation={[0,0,0]}>
<torusBufferGeometry attach={'geometry'} args={[5,2,70,100]} />
<MeshDistortMaterial
wireframeLinecap wireframeLinejoin
attach="material"
wireframe
speed={0.4}
distort={0.46}
color={theme.pLight}/>
</mesh>
<fog attach="fog" color={theme.secondary} near={5} far={7.5} position={[0,0,0]}/>
<mesh position={[0,0,0]}>
<pointLight color={theme.cta} intensity={0.3} position={[0,0,1]} />
<ambientLight color={theme.secondary} intensity={0.5} />
</mesh>
</>
)
}
`
App.jsx:
在这里，我导入一个包含主题的主题对象，并将ThemeSecontext设置为当前主题.这发生在标记为-+-的注释行.
import Box from "./components/three/box/Box";
import { Html, useProgress} from "@react-three/drei"
import { Canvas } from "@react-three/fiber"
import Cursor from "./components/cursor/Cursor";
import Welcome from "./components/welcome/Welcome";
import Socials from "./components/socials/Socials";
import Scroll from "./components/scroll_indicator/Scroll";
import About from "./components/about/About";
import { OrbitControls } from "@react-three/drei";
import {
EffectComposer,
Bloom,
Glitch,
Scanline
} from "@react-three/postprocessing";
import { BlendFunction, Resizer, KernelSize, GlitchMode } from 'postprocessing'
import Section from "./components/ux/section/Section";
import { Suspense, createContext, useContext } from "react";
import BottomBar from "./components/ux/bottom_bar/BottomBar";
import ProgressBar from "./components/ux/progress_bar/ProgressBar";
import Skills from "./components/skills/Skills";
import Projects from "./components/projects/Projects";
import Logo from "./components/ux/logo/Logo";
import ModeSwitch from "./components/ux/light_dark_mode/ModeSwitch";
import {themes, ThemeContext} from './utils/Theme'
import { useEffect } from "react";
function Loader() {
const { progress } = useProgress()
return <Html center>{progress} % loaded</Html>
}
export default function App() {
const theme = useContext(ThemeContext);
/* -------------------+-------------- */
var currentTheme= themes.light;
document.body.style.backgroundColor = currentTheme.primary;
document.body.style.color = currentTheme.text;
return (
<ThemeContext.Provider value={currentTheme}>
{/* <Logo/> */}
<ModeSwitch/>
<BottomBar/>
<Scroll/>
<Welcome/>
<Socials/>
<Canvas className="canvas"
>
<Suspense fallback={<Loader/>}>
<EffectComposer multisampling={0} disableNormalPass={true} >
</EffectComposer>
<Box />
<OrbitControls enabled={false}/>
</Suspense>
</Canvas>
<Section content={<About/>} id={'about'}/>
<Section content={<Skills/>}/>
<Section content={<Projects/>} id={'projects'}/>
</ThemeContext.Provider>
);
}