अब तक हमने जो 3D अनुभव बनाए, उनमें केवल एक canvas HTML तत्व शामिल था, जिसमें हमारी Three.js 3D scenes रेंडर होती थीं।

हमारे अनुभवों को अधिक इंटरएक्टिव बनाने के दो तरीके हैं:

• अपनी HTML पेज को वैसे ही बनाए जैसे आप सामान्यतः करते हैं और अपनी 3D scene को एक fullscreen canvas में बैकग्राउंड के रूप में जोड़ें। फिर इसे mouse events या page scroll के माध्यम से जोड़कर अच्छी तरह एकीकृत करें। हम animations lesson के scroll section में देखेंगे कि इसे कैसे प्राप्त किया जाए।
• अपनी HTML तत्वों को मानो वे हमारी 3D scenes में 3D objects हों, जोड़ें। यही हम इस पाठ में देखेंगे।

ये दोनों दृष्टिकोण परस्पर अनन्य नहीं हैं। आप उन्हें मिलाकर immersive experiences बना सकते हैं।

Ikea ऑनलाइन शोरूम

इस पाठ के लिए, मान लेते हैं कि हम Ikea के लिए एक ऑनलाइन शोरूम बनाना चाहते हैं। स्टार्ट पैक में विभिन्न किचन फर्नीचर के 3D मॉडल शामिल हैं (सभी Quaternius on Poly Pizza से आते हैं, आपका धन्यवाद 🙏)।

यह अब तक हमारे पास है। एक जापानी शैली का किचन।

हम किचन फर्नीचर पर लेबल जोड़ने का प्रयास करेंगे ताकि प्रत्येक वस्तु का नाम और कीमत दिखाई दे सके।

इसे करने से पहले, आइए समझें स्टार्ट पैक के कुछ हिस्सों को।

कोड को Generic बनाने के लिए, प्रत्येक आइटम को मैन्युअल रूप से घोषित करने और लोडिंग और पोज़िशनिंग लॉजिक को फिर से लिखने के बजाय, मैंने items के एक array बनाई।

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
  },
];

फिर मैंने एक generic component बनाया, जिसका नाम Item रखा, जो कि model path और अन्य transform props (position, rotation, scale...) लेता है:

Copy
const Item = ({ model, position, rotation, ...props }) => {
  const gltf = useGLTF(`models/${model}`);

  return (
    <group position={position} rotation={rotation}>
      <primitive object={gltf.scene} {...props} />
    </group>
  );
};

यह component 3D model को लोड करने और उसे दृश्य में स्थिति में लाने का काम करता है। मैंने एक रूट तत्व के रूप में एक group को चुना ताकि बाद में HTML तत्वों को बच्चों के रूप में जोड़ सकूं।

फिर हमने items array के through loop चलाया और प्रत्येक आइटम के लिए एक Item component रेंडर किया:

Copy
export const Experience = () => {
  return (
    <>
      {sceneItems.map((item, index) => {
        return <Item key={index} {...item} />;
      })}
    </>
  );
};

3D में HTML तत्व

अब जब हमारे पास एक सामान्य घटक है जो किसी भी 3D मॉडल को रेंडर कर सकता है और इसे दृश्य में पोजिशन कर सकता है, तो हम अपने फर्नीचर लेबल्स पर ध्यान केंद्रित कर सकते हैं।

आइए अपने items array में अधिक जानकारी जोड़ें, एक label और price प्रॉपर्टी जोड़कर:

Copy
const sceneItems = [
  {
    model: "Japanese Door.glb",
    position: [0, -0.88, -1.2],
    scale: 1.8,
    name: "Hemnes",
    price: 300,
  },
  {
    model: "Counter Sink.glb",
    position: [1.3, 0, -2.8],
    name: "Lillången",
    price: 450,
  },
  {
    model: "Chopping board.glb",
    position: [2.8, 1.9, -2.8],
    scale: 0.5,
    name: "Skogsta",
    price: 25,
  },
  {
    model: "Fridge.glb",
    position: [-2.1, 0, -3],
    name: "Lagan",
    price: 600,
  },
  {
    model: "Table.glb",
    position: [-1, 0, 2],
    scale: [1, 1, 1],
    name: "Lerhamn",
    price: 80,
  },
  {
    model: "Dango.glb",
    position: [-1.4, 1.64, 2],
    scale: 0.72,
    rotation: [0, Math.PI / 6, 0],
    name: "Dango",
    price: 4,
  },
];

नाम और कीमतों से नाराज न हों, उन्हें GitHub Copilot ने उत्पन्न किया है...

अब हम अपने Item घटक को अपडेट कर सकते हैं ताकि name और price प्रॉप्स को प्राप्त कर सकें और उन्हें HTML तत्वों के रूप में रेंडर कर सकें: