我有基于反应的网络,其中我采用了三个3D模式。 这些模型在桌面上完全是细微的,但问题并非都是在流动观点上造成的。 如果有人被带走,那将解体。 法典中没有问题。 模型采用GLTF格式:。 这是已部署的网站。 我认为,这个问题可能是由于电话浏览器上的一些问题造成限制。 我如何能够解决这个问题。
ALL 3 MODELS CODE
Earth.js
import React from "react";
import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../Loader";
import { EarthCanvas } from ".";
const Earth = () => {
const earth = useGLTF("./planet/scene.gltf");
return <primitive object={earth.scene} scale={2.5} />;
};
const EarthCanvass = () => {
return (
<Canvas
shadows
frameloop="demand"
gl={{ preserveDrawingBuffer: true }}
camera={{
fov: 45,
near: 0.1,
far: 200,
position: [-4, 3, 6],
}}
>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls
autoRotate
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Earth />
</Suspense>
</Canvas>
);
};
export default EarthCanvass;
计算机。
import { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../Loader";
const ComputersCanvas = () => {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
const mediaQuery = window.matchMedia("(max-width:500px)");
setIsMobile(mediaQuery.matches);
const handleMediaQueryChange = (event) => {
setIsMobile(event.matches);
};
mediaQuery.addEventListener("change", handleMediaQueryChange);
return () => {
mediaQuery.removeEventListener("change", handleMediaQueryChange);
};
}, []);
return (
<Canvas
className="mt-5"
frameloop="demand"
shadows
camera={{ position: [20, 3, 5], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}
>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls
enableZoom={false}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
/>
<Computers isMobile={isMobile} />
</Suspense>
<Preload all />
</Canvas>
);
};
const Computers = ({ isMobile }) => {
const computer = useGLTF("./desktop_pc/scene.gltf");
return (
<mesh>
<hemisphereLight intensity={0.15} groundColor="black" />
<pointLight intensity={1} />
<spotLight
position={[-20, 50, 10]}
angle={0.12}
penumbra={1}
intensity={1}
castShadow
shadow-mapSize={1024}
/>
<primitive
object={computer.scene}
scale={isMobile ? 0.7 : 0.75}
position={isMobile ? [0, -3, -2.2] : [0, -3.25, -1.5]}
rotation={isMobile ? [-0.01, -0.2, -0.1] : [-0.01, -0.2, -0.1]}
/>
</mesh>
);
};
export default ComputersCanvas;
Ball.js
import React from "react";
import { Canvas } from "@react-three/fiber";
import {
Decal,
Float,
OrbitControls,
Preload,
useTexture,
} from "@react-three/drei";
import { Suspense, useState } from "react";
import CanvasLoader from "../Loader";
const Ball = (props) => {
const [decal] = useTexture([props.imgUrl]);
return (
<Float>
<ambientLight intensity={0.25} floatIntensity={2} speed={1.75} />
<directionalLight position={[0, 0, 0.05]} />
<mesh castShadow receiveShadow scale={2.75}>
<icosahedronGeometry args={[1, 1]} />
<meshStandardMaterial
color="#fff8eb"
polygonOffset
polygonOffsetFactor={-5}
flatShading
/>
<Decal
rotation={[2 * Math.PI, 0, 6.25]}
position={[0, 0, 1]}
map={decal}
/>
</mesh>
</Float>
);
};
const BallCanvas = ({ icon }) => {
return (
<Canvas frameloop="demand" gl={{ preserveDrawingBuffer: true }}>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls enableZoom={false} />
<Ball imgUrl={icon} />
</Suspense>
<Preload all />
</Canvas>
);
`your text`;
};
export default BallCanvas;