Kevincarlosqa
Jul 17, 2023
Como subir un render 3D a tu Pagina Web (Without Tears)
import { Html, useProgress } from "@react-three/drei";
const CanvasLoader = () => {
const { progress } = useProgress();
return (
<Html>
<span className="canvas-load"></span>
<p
style={{
fontSize: 14,
color: "#f1f1f1",
fontWeight: 800,
marginTop: 40,
}}
>
{progress.toFixed(2)}%
</p>
</Html>
);
};
export default CanvasLoader;import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, useGLTF } from "@react-three/drei";
import CanvasLoader from "./Loader";
const Earth = () => {
const earth = useGLTF("./planet/scene.gltf");
return (
<primitive object={earth.scene} scale={2.5} position-y={0} rotation-y={0} />
);
};
const EarthCanvas = () => {
return (
<Canvas
shadows
frameloop="frame"
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 EarthCanvas;
Kevincarlosqa
Apasionado por la tecnología y su capacidad transformadora en todos los aspectos de la vida ⚡. Desde una temprana edad he estado inmerso en el mundo de la tecnología comenzando con estudios para convertirme en técnico de computadoras. Más tarde mi pasión me llevó a obtener un título en Ingeniería Mecatrónica donde tuve la oportunidad de explorar la programación.