Environment Background not working

[sakibbye]

Hi, 👋

I'm trying to get environment background in my project. But it's not working. Everything else works just fine. How can I get the environment?
Also, I tried cubeTextureLoader. It's not working either. I need either of them as my background.

import React, { useContext } from 'react';
import { Canvas, useLoader } from 'react-three-fiber';
import './Canvas.css';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { OrbitControls, Environment } from 'drei';
import { Physics } from 'use-cannon';
import { ControlData } from '../../../App';

const CanvasView = () => {
	const {
		enableRotation,
		rotationSpeed,
		rotationTopLimit,
		rotationBottomLimit,
		zoomEnable,
		zoomInLimit,
		zoomOutLimit,
		background,
		model,
	} = useContext(ControlData);
	let finalModel = require('../../../Models/fire.fbx').default;

	let Model = () => {
		const fbx = useLoader(FBXLoader, finalModel);
		return <primitive object={fbx} position={[0, -1, 0]} />;
	};
	if (model) {
		finalModel = model.url;
		if (model.extension === 'fbx') {
		} else if (model.extension === 'obj') {
			Model = () => {
				const obj = useLoader(OBJLoader, finalModel);
				return <primitive object={obj} position={[0, -1, 0]} />;
			};
		} else if (model.extension === 'gltf') {
			Model = () => {
				const gltf = useLoader(GLTFLoader, finalModel);
				return <primitive object={gltf.scene} position={[0, -1, 0]} />;
			};
		}
	} else {
		finalModel = require('../../../Models/fire.fbx').default;
	}
	let backgroundStyle;
	if (background.type === 'plainBackground') {
		backgroundStyle = background.value;
	} else {
		let tbg = require(`../../../Background/${background.value}`).default;
		backgroundStyle = `url(${tbg})`;
	}
	
	return (
		<Canvas
			style={{ background: backgroundStyle }}
			id="renderCanvas"
			width="650"
			height="3000"
			className="canvas-style"
			orthographic
			camera={{ position: [0, 0, 50], zoom: 1, far: 100 }}
		>
			<ambientLight intensity={0.5} />
			<spotLight intensity={0.5} position={[25, 25, 25]} angle={0.1} />
			<Physics>
				<OrbitControls
					maxPolarAngle={Math.PI / rotationTopLimit}
					minPolarAngle={Math.PI / rotationBottomLimit}
					enableZoom={zoomEnable}
					maxZoom={zoomInLimit / 10}
					minZoom={zoomOutLimit / 10}
					autoRotate={enableRotation}
					autoRotateSpeed={rotationSpeed}
				/>
			<Environment
				background={true}
				preset={'sunset'}
			/>
					<mesh>
					<Model />
				</mesh>
			</Physics>
		</Canvas>
		 
	);
};

export default CanvasView;

If I remove style={{ background: backgroundStyle }} the background is blank.

[drcmda]

please don't put such things up as issues. issues are for bugs only and it makes it extremely stressful for maintainers to sift through help requests.

that code is broken as far as im concerned and it's hard to even grasp what this is trying to do. you can't (should not) define components inside components in react. async components (anything that has useLoader) need a suspense boundary. i would suggest you first go through the docs, look into some examples first. loading is a trivial matter in r3f, it should never go overboard like that.