diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx
index b17f1f0..2d3d4eb 100644
--- a/app/web/src/components/IdeViewer/IdeViewer.tsx
+++ b/app/web/src/components/IdeViewer/IdeViewer.tsx
@@ -7,18 +7,16 @@ import {
GizmoHelper,
GizmoViewport,
OrbitControls,
+ Environment,
+ useTexture,
} from '@react-three/drei'
import { useEdgeSplit } from 'src/helpers/hooks/useEdegeSplit'
import { Vector3 } from 'three'
import { requestRender } from 'src/helpers/hooks/useIdeState'
import texture from './dullFrontLitMetal.png'
-import { TextureLoader } from 'three/src/loaders/TextureLoader'
import Customizer from 'src/components/Customizer/Customizer'
import DelayedPingAnimation from 'src/components/DelayedPingAnimation/DelayedPingAnimation'
-const loader = new TextureLoader()
-const colorMap = loader.load(texture)
-
const thresholdAngle = 12
function Asset({ geometry: incomingGeo }) {
@@ -30,6 +28,7 @@ function Asset({ geometry: incomingGeo }) {
: new THREE.EdgesGeometry(incomingGeo, thresholdAngle),
[incomingGeo]
)
+ const colorMap = useTexture(texture)
if (!incomingGeo) return null
if (incomingGeo.length)
@@ -40,10 +39,19 @@ function Asset({ geometry: incomingGeo }) {
return (