Fix 3D scene loading issue
Problem: Scene stuck on loading screen Cause: Texture loading blocking render + missing font file Fixes: - Temporarily disabled texture loading (useTexture) - Temporarily disabled 3D dimension labels (Text component) - Fallback to solid color materials - Removed unused imports Result: Scene loads immediately with procedural door geometry Note: Textures and dimension labels can be re-enabled once: 1. Font file is added to public/fonts/ 2. Texture preloading strategy is implemented
This commit is contained in:
@@ -2,40 +2,18 @@
|
|||||||
|
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
import { useConfiguratorStore } from "@/lib/store";
|
import { useConfiguratorStore } from "@/lib/store";
|
||||||
import { RoundedBox, Text, useTexture } from "@react-three/drei";
|
import { RoundedBox } from "@react-three/drei";
|
||||||
import { getMetalTexture } from "@/lib/asset-map";
|
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
||||||
// Steel material with photorealistic texture mapping
|
// Steel material - fallback to solid color for now
|
||||||
const SteelMaterial = ({ color, finish }: { color: string; finish: string }) => {
|
const SteelMaterial = ({ color }: { color: string }) => (
|
||||||
try {
|
<meshStandardMaterial
|
||||||
const metalTexture = useTexture(getMetalTexture(finish));
|
color={color}
|
||||||
|
roughness={0.7}
|
||||||
// Configure texture repeat for realistic grain (4x horizontal, 8x vertical)
|
metalness={0.8}
|
||||||
metalTexture.wrapS = metalTexture.wrapT = THREE.RepeatWrapping;
|
envMapIntensity={1}
|
||||||
metalTexture.repeat.set(4, 8);
|
/>
|
||||||
|
);
|
||||||
return (
|
|
||||||
<meshStandardMaterial
|
|
||||||
map={metalTexture}
|
|
||||||
color={color}
|
|
||||||
roughness={0.7} // Matte powdercoat finish
|
|
||||||
metalness={0.8}
|
|
||||||
envMapIntensity={1.2}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
// Fallback to solid color if texture fails
|
|
||||||
return (
|
|
||||||
<meshStandardMaterial
|
|
||||||
color={color}
|
|
||||||
roughness={0.7}
|
|
||||||
metalness={0.8}
|
|
||||||
envMapIntensity={1}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Glass material
|
// Glass material
|
||||||
const GlassMaterial = () => (
|
const GlassMaterial = () => (
|
||||||
@@ -52,7 +30,7 @@ const GlassMaterial = () => (
|
|||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
// 3D Dimension Label Component
|
// 3D Dimension Label Component - temporarily disabled
|
||||||
function DimensionLabel({
|
function DimensionLabel({
|
||||||
value,
|
value,
|
||||||
position,
|
position,
|
||||||
@@ -62,24 +40,7 @@ function DimensionLabel({
|
|||||||
position: [number, number, number];
|
position: [number, number, number];
|
||||||
label: string;
|
label: string;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return null; // Temporarily disabled to fix loading
|
||||||
<group position={position}>
|
|
||||||
<Text
|
|
||||||
fontSize={0.08}
|
|
||||||
color="#1a1a1a"
|
|
||||||
anchorX="center"
|
|
||||||
anchorY="middle"
|
|
||||||
font="/fonts/inter-bold.woff"
|
|
||||||
>
|
|
||||||
{`${Math.round(value)} ${label}`}
|
|
||||||
</Text>
|
|
||||||
{/* Background for better readability */}
|
|
||||||
<mesh position={[0, 0, -0.01]}>
|
|
||||||
<planeGeometry args={[0.4, 0.12]} />
|
|
||||||
<meshBasicMaterial color="#ffffff" opacity={0.9} transparent />
|
|
||||||
</mesh>
|
|
||||||
</group>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Door3DEnhanced() {
|
export function Door3DEnhanced() {
|
||||||
@@ -128,7 +89,7 @@ export function Door3DEnhanced() {
|
|||||||
position={[-doorWidth / 2 + stileWidth / 2, 0, 0]}
|
position={[-doorWidth / 2 + stileWidth / 2, 0, 0]}
|
||||||
castShadow
|
castShadow
|
||||||
>
|
>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
|
|
||||||
{/* RIGHT STILE - Vertical profile */}
|
{/* RIGHT STILE - Vertical profile */}
|
||||||
@@ -139,7 +100,7 @@ export function Door3DEnhanced() {
|
|||||||
position={[doorWidth / 2 - stileWidth / 2, 0, 0]}
|
position={[doorWidth / 2 - stileWidth / 2, 0, 0]}
|
||||||
castShadow
|
castShadow
|
||||||
>
|
>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
|
|
||||||
{/* TOP RAIL - Horizontal profile */}
|
{/* TOP RAIL - Horizontal profile */}
|
||||||
@@ -150,7 +111,7 @@ export function Door3DEnhanced() {
|
|||||||
position={[0, doorHeight / 2 - railHeight / 2, 0]}
|
position={[0, doorHeight / 2 - railHeight / 2, 0]}
|
||||||
castShadow
|
castShadow
|
||||||
>
|
>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
|
|
||||||
{/* BOTTOM RAIL - Horizontal profile */}
|
{/* BOTTOM RAIL - Horizontal profile */}
|
||||||
@@ -161,7 +122,7 @@ export function Door3DEnhanced() {
|
|||||||
position={[0, -doorHeight / 2 + railHeight / 2, 0]}
|
position={[0, -doorHeight / 2 + railHeight / 2, 0]}
|
||||||
castShadow
|
castShadow
|
||||||
>
|
>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
|
|
||||||
{/* INTERMEDIATE RAILS (Grid dividers) */}
|
{/* INTERMEDIATE RAILS (Grid dividers) */}
|
||||||
@@ -174,7 +135,7 @@ export function Door3DEnhanced() {
|
|||||||
position={[0, yPos, 0]}
|
position={[0, yPos, 0]}
|
||||||
castShadow
|
castShadow
|
||||||
>
|
>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
@@ -187,7 +148,7 @@ export function Door3DEnhanced() {
|
|||||||
position={[0, 0, 0]}
|
position={[0, 0, 0]}
|
||||||
castShadow
|
castShadow
|
||||||
>
|
>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -212,7 +173,7 @@ export function Door3DEnhanced() {
|
|||||||
position={[0, 0, railDepth / 2 + 0.01]}
|
position={[0, 0, railDepth / 2 + 0.01]}
|
||||||
castShadow
|
castShadow
|
||||||
>
|
>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -220,7 +181,7 @@ export function Door3DEnhanced() {
|
|||||||
{doorType === "scharnier" && handle === "klink" && (
|
{doorType === "scharnier" && handle === "klink" && (
|
||||||
<group position={[doorWidth / 2 - stileWidth - 0.1, 0, railDepth / 2 + 0.01]}>
|
<group position={[doorWidth / 2 - stileWidth - 0.1, 0, railDepth / 2 + 0.01]}>
|
||||||
<RoundedBox args={[0.08, 0.02, 0.02]} radius={0.003} smoothness={4} castShadow>
|
<RoundedBox args={[0.08, 0.02, 0.02]} radius={0.003} smoothness={4} castShadow>
|
||||||
<SteelMaterial color={frameColor} finish={finish} />
|
<SteelMaterial color={frameColor} />
|
||||||
</RoundedBox>
|
</RoundedBox>
|
||||||
<mesh position={[0.04, 0, 0]} castShadow>
|
<mesh position={[0.04, 0, 0]} castShadow>
|
||||||
<sphereGeometry args={[0.015, 32, 32]} />
|
<sphereGeometry args={[0.015, 32, 32]} />
|
||||||
|
|||||||
Reference in New Issue
Block a user