폭발적인 제품 페이지 렌더 프롬프트

2x2 그리드 16:9, 이걸 4개의 특이하지만 실제하는 요트(흰색, 파란색, 주황색, 노란색 배경)에 대해 수행하세요: // SYSTEM: R3F Z-DEPTH RENDER ENGINE import { Canvas } from ' @ react-three/fiber'; import { Html, Line } from '@ react-three/drei'; export default function ExplodedProductPage({ invention = "[$INVENTION]" }) { const cascade = useInferenceCascade(invention); return ( <div className="aspect-[16/10] bg-neutral-900 grid grid-cols-[300px_1fr]"> {/* FRAME: Left Rail Spec Strip (Z-Index: 5) */} <section className="ui-chrome z-50 text-white"> <h1 className="text-8xl">{cascade.measurement.value}</h1> <span className="text-xl">{cascade.measurement.unit}</span> </section> {/* 3D Canvas */} <Canvas camera={{ position: [0, 0, 10], fov: 45 }}> <ambientLight intensity={0.5} /> {/* DEPTH 1: Ghost Blueprint */} <mesh opacity={0.15} rotation={[0, Math.PI/4, 0]}> <Model asset={cascade.assembled_hero} material="draft_overlay" /> </mesh> {/* DEPTH 2 & 3: Single-Axis Parts & Leader Lines */} <group position={[-5, 0, 0]}> { cascade. parts. map((part, index) => ( <mesh key={part. id} position={[index * 2.5, 0, 0]}> {/* MATERIAL_CALLOUT & COLOR_DISCIPLINE */} <Model asset={part} material={part.isInnovation ? "SignalColor" : part.realMaterial} /> {/* DEPTH 4: Labels (with collision dodge algorithm) */} <Html position={[0, 2 + (index % 2 === 0 ? 0.5 : 0), 0]}> <div className="material-label">{part.material_name}</div> </Html> </mesh> ))} </group> </Canvas> </div> ); } // INSTRUCTION: Render this component tree visually as a single high-fidelity image.