Hi! I’m trying to load my lighting and emissions directly from blender but they aren’t loading in my webpage. Any help would be really appreciated!! I have a code snippet below as well as my blender file! (The google drive link has the blender file and the gtlf file). I just want the webpage 3D model to look the same as when I render the blender model :((
https://drive.google.com/drive/folders/1ojpnHIDI6gwP7Ca8Vfc2mdgKMqAt5w4W?usp=sharing
Code:
import React, { Suspense, useEffect, useState } from “react”;
import { Canvas } from “@react-three/fiber”;
import { PerspectiveCamera } from “three”;
import { OrbitControls, Preload, useGLTF } from “@react-three/drei”;
import CanvasLoader from “…/Loader”;
const Computer = ({ isMobile }) => {
const computer = useGLTF(‘./public/desktop_pc/scene.gltf’)
return (
<>
<primitive
object={computer.scene}
scale={isMobile ? 0.014 : 2.5}
position={isMobile ? [0, -5, -2.2] : [4.8, 0, -9.5]}
rotation={[0.17, -0.3, -.019]}
/>
</>
);
};
const ComputerCanvas = () => {
const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
// Add a listener for changes to the screen size
const mediaQuery = window.matchMedia(“(max-width: 500px)”);
// Set the initial value of the `isMobile` state variable
setIsMobile(mediaQuery.matches);
// Define a callback function to handle changes to the media query
const handleMediaQueryChange = (event) => {
setIsMobile(event.matches);
};
// Add the callback function as a listener for changes to the media query
mediaQuery.addEventListener("change", handleMediaQueryChange);
// Remove the listener when the component is unmounted
return () => {
mediaQuery.removeEventListener("change", handleMediaQueryChange);
};
}, );
return (
<Canvas
frameloop=‘demand’
shadows
dpr={[1, 2]}
camera={{ position: [40, 10, 30], fov: 25 }}
gl={{ preserveDrawingBuffer: true }}
>
<Suspense fallback={}>
<OrbitControls
enableZoom={true}
maxPolarAngle={Math.PI / 2}
minPolarAngle={Math.PI / 2}
minAzimuthAngle={-Math.PI / 100099995}
maxAzimuthAngle={Math.PI / 10}
/>
<Preload all />
</Canvas>
);
};
export default ComputerCanvas;