Lighting and emissions aren't loading

Questions
1

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 :((

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;

2

emission can’t be exported, the prop will be in the gltf data but it doesn’t do the same in threejs, you need postprocessing for that. but it is very very simple to enable it. for instance if you have an emissive texture:

emission happens when the color exceeds the threshold given by the postpros bloom effect. if it has a threshold of 1 nothing blooms because colors are normalized as RGB 0-1, so white for instance is [1, 1, 1]. if you go out of that spectrum, say [10, 0, 0], you will have a glowing red, this works for any material. for that to work you need toneMapped={false} on the material, or else threejs will clip colors between 0 and 1 again.

<EffectComposer>
  <Bloom mipmapBlur luminanceThreshold={1} />
</EffectComposer>

// ❌ will not glow, same as RGB [1,0,0]
<meshStandardMaterial color="red"/>

// ✅ will glow, same as RGB [10,0,0]
<meshStandardMaterial emissive="red" emissiveIntensity={10} toneMapped={false} />

// ❌ will not glow, same as RGB [1,0,0]
<meshBasicMaterial color="red" />

// ❌ will not glow, same as RGB [1,0,0], tone-mapping will clamp colors between 0 and 1
<meshBasicMaterial color={[10,0,0]} />

// ✅ will glow, same as RGB [10,0,0]
<meshBasicMaterial color={[10,0,0]} toneMapped={false} />
3

ps, use gltfjsx

npx gltfjsx scene.gltf --transform

this will compress your model up up to 95%, and it will extract the scene graph. equipped with that graph you can easily alter nodes and materials, make things glow for instance.