कंटेंट पर जाएँ
सीमित समयStarter अब $20 की जगह $9 प्रति माह है।प्लान देखें
charmotion
शुरू करें

अपनी वेबसाइट पर इंटरैक्टिव 3D लोगो कैसे लगाएँ

Charmotion टीम द्वारा · अपडेट:

गाइड का कवर इलस्ट्रेशन: अपनी वेबसाइट पर इंटरैक्टिव 3D लोगो कैसे लगाएँ, Charmotion डेमो कैरेक्टर के साथ

वेबसाइट पर इंटरैक्टिव 3D लोगो लगाने के लिए, लोगो को कॉम्पैक्ट glTF (GLB) मॉडल के रूप में एक्सपोर्ट करें, three.js से उसे ट्रांसपेरेंट canvas में लोड करें, environment map से रोशनी दें और पॉइंटर की स्थिति को हल्के रोटेशन में बदलें। पहले एक स्थिर पोस्टर इमेज दिखाएँ, ऑफ़-स्क्रीन होने पर रेंडरिंग रोकें और reduced motion के लिए स्थिर इमेज रखें।

मुख्य बातें

  • glTF (.glb फ़ाइल) वह फ़ॉर्मेट है जिसकी सलाह three.js मैनुअल देता है; एक्सपोर्ट से पहले curves को mesh बनाना ज़रूरी है, और Blender की area lights और World lighting एक्सपोर्ट नहीं होतीं।
  • लोगो को कोड में environment map से रोशनी दें, वरना मेटल और चमकदार मटीरियल फ़्लैट और अंधेरे दिखते हैं।
  • पॉइंटर को कुछ डिग्री के रोटेशन से जोड़ें और धीरे-धीरे उसकी ओर ease करें, फ़्रेम timestamp का इस्तेमाल करके ताकि 60 Hz और 120 Hz पर एहसास एक जैसा रहे।
  • सिर्फ़ तब रेंडर करें जब कुछ हिल रहा हो, canvas के ऑफ़-स्क्रीन होने पर रोक दें, और हाई-डेंसिटी फ़ोन पर pixel ratio सीमित रखें।
  • पहले पेंट के रूप में और WebGL न होने व reduced motion के fallback के रूप में एक पोस्टर इमेज दें।
  • जब लोगो को सिर्फ़ चलना हो तो वीडियो इस्तेमाल करें, और जब सीन किसी डिज़ाइनर के हाथ में बिना कोड के रहना चाहिए तो Spline।

पहले से कोई कैरेक्टर या लोगो है? असली ऐप स्क्रीन में उदाहरण देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन, और हर एक में चलने वाला एनिमेशन।

वेबसाइट पर इंटरैक्टिव 3D लोगो लगाने के लिए क्या चाहिए?

पाँच हिस्से। ज़्यादातर टूटे हुए 3D लोगो में आखिरी दो गायब होते हैं।

हिस्सायह क्या हैआम विकल्प
मॉडलमटीरियल के साथ 3D mesh के रूप में लोगोBlender से एक्सपोर्ट की गई .glb फ़ाइल
Rendererमॉडल को canvas में ड्रॉ करने वाला कोडthree.js (WebGL)
लाइटिंगमटीरियल क्या रिफ़्लेक्ट करते हैंएक environment map और एक या दो लाइट
इंटरैक्शनलोगो पॉइंटर या स्क्रॉल पर कैसे जवाब देता हैहल्का, ease किया हुआ रोटेशन
Fallbackलोड होने से पहले, WebGL के बिना या reduced motion के साथ लोग क्या देखते हैंउसी लोगो की एक स्थिर पोस्टर इमेज

काम साफ़ तौर पर बँट जाता है: मॉडलिंग एक बार 3D टूल में होती है, और पेज सिर्फ़ तैयार फ़ाइल लोड करता है। अगर आपने अभी मॉडल नहीं बनाया है, तो फ़्लैट लोगो को 3D में बदलना Blender में extrude और bevel करना समझाता है।

वेब के लिए लोगो को GLB मॉडल में कैसे बदलें?

वेक्टर लोगो से शुरू करें, 3D टूल में उसे गहराई दें, फिर glTF एक्सपोर्ट करें। three.js मैनुअल कहता है: "जहाँ संभव हो, हम glTF (GL Transmission Format) इस्तेमाल करने की सलाह देते हैं। इस फ़ॉर्मेट के .GLB और .GLTF दोनों वर्ज़न अच्छी तरह सपोर्टेड हैं।" फ़ॉर्मेट को मेंटेन करने वाला Khronos बताता है कि JSON core "एक ही बाइनरी glTF फ़ाइल (.glb) में रखा जा सकता है", जो होस्ट करने का सबसे आसान रूप है।

Blender के glTF exporter के कुछ नियम लोगो के लिए अहम हैं:

  • Curves को mesh में बदलें। Blender में import किया गया SVG curves के रूप में आता है, और exporter कहता है कि "curves और दूसरा non-mesh डेटा सुरक्षित नहीं रहता, और एक्सपोर्ट से पहले उसे mesh में बदलना ज़रूरी है।"
  • Principled BSDF इस्तेमाल करें। Exporter उसी से base color, metallic और roughness पढ़ता है। शून्य से ज़्यादा Coat KHR_materials_clearcoat extension जोड़ता है और Transmission KHR_materials_transmission जोड़ता है।
  • ग्लास के साथ सावधान रहें। Blender के डॉक्स चेतावनी देते हैं कि transmission "real-time rendering engines के लिए लागू करना जटिल है" और इस extension का सपोर्ट "अभी व्यापक नहीं है।" three.js का GLTFLoader इसे सपोर्टेड बताता है, लेकिन इसे फ़ोन पर टेस्ट करें।
  • लाइट साथ नहीं आतीं। "Blender का Area light type और World lighting, glTF में सपोर्टेड नहीं हैं, और एक्सपोर्ट के दौरान अनदेखे कर दिए जाएँगे।" लोगो को three.js में रोशनी देने की योजना बनाएँ।

फ़ाइल छोटी रखने के लिए three.js loader के ज़रिए Draco mesh compression और KTX2 textures सपोर्ट करता है। DRACOLoader के डॉक्स कहते हैं कि compressed geometry "काफ़ी छोटी हो सकती है, लेकिन क्लाइंट डिवाइस पर अतिरिक्त decoding समय की कीमत पर," इसलिए यह सादे extrude किए हुए निशान के बजाय डिटेल वाले mesh के लिए ज़्यादा फ़ायदेमंद है।

three.js से 3D लोगो को लोड और लाइट कैसे करें?

ट्रांसपेरेंट बैकग्राउंड वाला renderer बनाएँ, GLB लोड करें और सीन को एक environment map दें। three.js का RoomEnvironment HDR फ़ाइल भेजे बिना PBR मटीरियल के लिए image-based lighting बनाता है।

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";

const canvas = document.querySelector("#logo3d");
const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(30, 1, 0.1, 100);
camera.position.set(0, 0, 6);

const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment()).texture;

const gltf = await new GLTFLoader().loadAsync("/logo.glb");
const logo = gltf.scene;
scene.add(logo);

alpha: true रखें ताकि पेज का बैकग्राउंड दिखता रहे। MDN की WebGL best practices समझाती हैं कि alpha: false से ब्राउज़र canvas को "जैसे वह opaque हो" वैसे composite करता है।

अगर कुछ नहीं दिखता, तो three.js मैनुअल की चेकलिस्ट लागू होती है: loader की errors log करें, "मॉडल को 1000 गुना बड़ा या छोटा करके देखें", और "कोई light source जोड़कर उसकी जगह तय करें। हो सकता है मॉडल अंधेरे में छिपा हो।"

3D लोगो को पॉइंटर और स्क्रॉल पर रिएक्ट कैसे कराएँ?

pointermove सुनें, एक target angle स्टोर करें, और हर फ़्रेम पर लोगो को उसकी ओर थोड़ा-थोड़ा घुमाएँ। MDN के अनुसार, pointer events हैंडलर के एक ही सेट से "माउस, पेन/स्टाइलस या टच" को कवर करते हैं।

let targetX = 0, targetY = 0, last = 0;

window.addEventListener("pointermove", (e) => {
  targetY = ((e.clientX / innerWidth) * 2 - 1) * 0.35;  // radians, left/right
  targetX = ((e.clientY / innerHeight) * 2 - 1) * 0.2;  // radians, up/down
});

function frame(t) {
  const dt = last ? t - last : 16;
  last = t;
  const k = 1 - Math.exp(-dt / 120); // same easing at 60 Hz and 120 Hz
  logo.rotation.y += (targetY - logo.rotation.y) * k;
  logo.rotation.x += (targetX - logo.rotation.x) * k;
  renderer.render(scene, camera);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

Timestamp अहम है। MDN चेतावनी देता है कि अगर आप प्रोग्रेस मापने के लिए इसका इस्तेमाल नहीं करते, तो "हाई रिफ़्रेश-रेट स्क्रीन पर एनिमेशन तेज़ चलेगा।"

स्क्रॉल: उसी फ़्रेम लूप के अंदर स्क्रॉल पोज़िशन पढ़ें और लोगो के दिखते रहने तक उसे हल्के घुमाव या उठाव से जोड़ें। WCAG का Animation from Interactions मानदंड parallax और स्क्रॉल से चलने वाली मोशन को ऐसी मोशन के आम उदाहरण बताता है जिसे यूज़र बंद कर सकें, इसलिए स्क्रॉल इफ़ेक्ट नीचे वाले reduced-motion चेक के पीछे होने चाहिए।

टच: फ़ोन पर कोई ठहरा हुआ पॉइंटर नहीं होता। MDN बताता है कि hover के बिना वाले डिवाइस पर enter और leave events दबाने और छोड़ने के साथ आते हैं, इसलिए लोगो सिर्फ़ तब रिएक्ट करता है जब उंगली स्क्रीन पर हो। इसके बजाय टच यूज़र को धीमी idle मोशन या टैप पर रिएक्शन दें, और बड़े canvas पर touch-action: none सेट न करें, वरना उसके नीचे पेज स्क्रॉल होना बंद हो जाता है।

3D लोगो का परफ़ॉर्मेंस बजट कितना होना चाहिए?

कोई एक तय संख्या नहीं है। web.dev परफ़ॉर्मेंस बजट को "साइट परफ़ॉर्मेंस पर असर डालने वाले मेट्रिक्स पर लगाई गई सीमाओं का सेट" बताता है: GLB साइज़, three.js के लिए जोड़ी गई JavaScript, और हीरो के दिखने तक के समय के लिए एक बजट तय करें, फिर उसके हिसाब से मापें। इसके तरीके:

तरीकाक्योंसोर्स
ज़रूरत पड़ने पर रेंडर करेंकुछ न बदलने पर भी लगातार रेंडर करना "डिवाइस की पावर की बर्बादी है" और पोर्टेबल डिवाइस पर बैटरी की भीthree.js मैनुअल
ऑफ़-स्क्रीन होने पर रोकेंIntersection Observer API दिखने के आधार पर "यह तय करने के लिए है कि कोई काम या एनिमेशन प्रोसेस चलाना है या नहीं"MDN
Pixel ratio सीमित करें3x डिस्प्ले का मतलब है "9 गुना रेंडरिंग"; मैनुअल अंदरूनी resolution को सीमित करने का सुझाव देता हैthree.js मैनुअल
मॉडल को compress करेंgeometry के लिए Draco, textures के लिए KTX2, दोनों GLTFLoader में सपोर्टेडthree.js डॉक्स
Context loss संभालेंwebglcontextlost "तब emit हो सकता है जब GPU की मेमोरी खत्म हो जाए"MDN

लोगो के लिए, ज़रूरत पड़ने पर रेंडर करने का मतलब है कि लोगो के धीरे-धीरे ठहर जाने पर फ़्रेम लूप रोक दें और अगली पॉइंटर हरकत पर फिर शुरू करें। ब्राउज़र पहले से ही requestAnimationFrame को "background tabs या छिपे हुए <iframe> में" रोक देते हैं, इसलिए आपको सिर्फ़ स्क्रॉल करके दूर जाने वाला केस खुद संभालना है।

लोडिंग भी मायने रखती है। Largest Contentful Paint में गिने जाने वाले एलिमेंट की web.dev की लिस्ट में इमेज, वीडियो पोस्टर, बैकग्राउंड इमेज और टेक्स्ट आते हैं, और उसमें <canvas> का ज़िक्र नहीं है। असल में आपकी पोस्टर इमेज या हेडलाइन ही मापी जाती है, इसलिए पोस्टर को तेज़ बनाएँ और three.js उसके बाद लोड करें।

WebGL के बिना या reduced motion के साथ विज़िटर को क्या दिखना चाहिए?

वही लोगो, स्थिर। मॉडल का आराम की मुद्रा वाला एक फ़्रेम WebP या PNG में रेंडर करें, उसे alt टेक्स्ट के साथ सामान्य <img> के रूप में दिखाएँ, और मॉडल लोड होने के बाद ही canvas लगाएँ।

  • WebGL नहीं। three.js मैनुअल "कुछ भी रेंडर करने की कोशिश से पहले" सपोर्ट जाँचने के लिए WebGL.isWebGL2Available() दिखाता है। अगर यह false लौटाए, तो पोस्टर ही रखें।
  • स्क्रीन रीडर। MDN बताता है कि canvas कंटेंट "accessibility tools के सामने नहीं आता," इसलिए ब्रांड का नाम इमेज के alt टेक्स्ट या आस-पास के टेक्स्ट में होना चाहिए, canvas में नहीं।
  • Reduced motion। prefers-reduced-motion बताता है कि यूज़र ने "अपने डिवाइस पर reduced motion की सेटिंग चालू की है।" W3C इस media query को WCAG 2.3.3 के लिए एक पर्याप्त तकनीक (C39) के रूप में लिस्ट करता है।
const still = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (!still && WebGL.isWebGL2Available()) {
  startLogo(); // load three.js and the GLB, then hide the poster
}

मोशन सेटिंग के और पैटर्न accessible एनिमेशन और reduced motion में हैं।

Spline या वीडियो कब three.js से बेहतर विकल्प हैं?

three.jsSplineवीडियो
इसे कौन बनाता हैएक डेवलपरSpline के एडिटर में एक डिज़ाइनर3D या वीडियो टूल वाला कोई भी
पॉइंटर पर प्रतिक्रिया देता हैहाँ, आप जैसे भी कोड करेंहाँ, एडिटर में सेट किए गए events के ज़रिएNo
एम्बेडआपका अपना कोड और मॉडल फ़ाइलएक <spline-viewer> वेब कंपोनेंट, एक पब्लिक URL या कोड एक्सपोर्टएक <video> टैग
किसके लिए बेस्टकस्टम बिहेवियर, टाइट फ़ाइल बजटबिना कोड के तेज़ बदलावसिर्फ़ चलने वाला लोगो, जटिल लाइट और ग्लास के साथ

Spline के डॉक्स (नवंबर 2026 तक) कहते हैं कि Viewer डिफ़ॉल्ट रूप से lazy-load करता है, canvas को "सिर्फ़ तब लोड करता है जब canvas स्क्रीन पर दिखता है," माउस events को पूरे पेज पर या सिर्फ़ अपने container के अंदर ट्रैक कर सकता है, और जब कोई इंटरैक्ट न करे तो एक hint इमेज दिखा सकता है। कोड एक्सपोर्ट Vanilla JS, three.js, React, Next.js और react-three-fiber कवर करता है, लेकिन "एनिमेशन और events सिर्फ़ Vanilla js और React में एक्सपोर्ट करने पर चालू होते हैं।" Spline "डिफ़ॉल्ट रूप से WebGPU पर ड्रॉ करता है और अपने आप WebGL पर fallback करता है।" इनके फ़ायदे-नुकसान Rive vs Spline में तुलना किए गए हैं।

जब कुछ भी रिएक्ट न करना हो तो वीडियो चुनें। रेंडर किया गया वीडियो refraction और soft shadow दिखा सकता है जो real time में महँगे होते हैं। ट्रांसपेरेंट बैकग्राउंड के लिए आपको दो फ़ाइलें चाहिए: Chrome और Firefox के लिए VP9 WebM और Safari के लिए MOV में HEVC, जिसमें HEVC सोर्स पहले लिस्ट हो ताकि Safari उसे चुने (Jake Archibald का लेख इसकी वजह समझाता है)। वेबसाइट पर ट्रांसपेरेंट वीडियो देखें।

क्या खुद बनाए बिना इंटरैक्टिव 3D लोगो मिल सकता है?

हाँ। Charmotion का Motion Studio आपकी अपनी लोगो फ़ाइल से वेबसाइट हीरो बनाता है: यह लोगो के हिस्से ढूँढकर उन्हें हिलाता है, इसलिए कुछ भी दोबारा ड्रॉ नहीं होता। हीरो पॉइंटर के पीछे चलता है, hover पर रिएक्ट करता है और idle रहते हुए लूप करता है। आपको एक होस्टेड embed मिलता है जो ऑफ़-स्क्रीन होने पर रुकता है और reduced motion का सम्मान करता है, self-host फ़ाइलें, एक React कंपोनेंट, और MP4 के साथ ट्रांसपेरेंट WebM।

तीनों कॉन्सेप्ट हर प्लान में फ़्री हैं। किसी एक को बनाना Starter (नवंबर 2026 तक $9/माह, हर महीने 3 लोगो एनिमेशन) से शुरू होता है, जो Rive और इंटरैक्टिव three.js के साथ बनाता है। रेंडर किया गया सिनेमैटिक 3D वीडियो All in one ($100/माह) पर है। अगर आप कोड पर पूरा कंट्रोल चाहते हैं, तो ऊपर के स्टेप ही काफ़ी हैं।

वेबसाइट में इंटरैक्टिव 3D लोगो कैसे जोड़ें

  1. लोगो का मॉडल बनाएँ. 3D टूल में वेक्टर लोगो को extrude और bevel करें, curves को mesh में बदलें और Principled BSDF मटीरियल इस्तेमाल करें।
  2. GLB एक्सपोर्ट करें. glTF को एक .glb फ़ाइल के रूप में एक्सपोर्ट करें, और geometry को Draco से सिर्फ़ तभी compress करें जब mesh में ज़्यादा डिटेल हो।
  3. लोड करें और रोशनी दें. three.js GLTFLoader से GLB को ट्रांसपेरेंट canvas में लोड करें और RoomEnvironment से scene.environment सेट करें।
  4. पॉइंटर रिएक्शन जोड़ें. pointermove को हल्के target rotation से जोड़ें और फ़्रेम timestamp से हर फ़्रेम पर उसकी ओर ease करें।
  5. पावर बचाएँ. लोगो के ठहर जाने या ऑफ़-स्क्रीन होने पर रेंडरिंग रोकें, और हाई-डेंसिटी डिस्प्ले पर pixel ratio सीमित रखें।
  6. Fallback जोड़ें. पहले एक स्थिर पोस्टर इमेज दिखाएँ, और उसे बिना WebGL वाले ब्राउज़र और prefers-reduced-motion के लिए रखें।

अक्सर पूछे जाने वाले सवाल

3D लोगो GLB फ़ाइल होनी चाहिए या glTF?

दोनों चलते हैं: three.js मैनुअल कहता है कि दोनों अच्छी तरह सपोर्टेड हैं। .glb, JSON, geometry और textures को एक बाइनरी फ़ाइल में पैक करता है, इसलिए यह एक ही request है और फ़ाइलें इधर-उधर करते समय इसके टूटने की संभावना कम है। अलग फ़ाइलों वाली .gltf हाथ से जाँचना आसान है।

क्या 3D लोगो Largest Contentful Paint को नुकसान पहुँचाता है?

आमतौर पर सीधे नहीं। LCP एलिमेंट की web.dev की लिस्ट में इमेज, वीडियो पोस्टर, बैकग्राउंड इमेज और टेक्स्ट आते हैं, और canvas का ज़िक्र नहीं है। आपकी पोस्टर इमेज या हेडलाइन ही मापी जाती है, इसलिए पोस्टर छोटा रखें और three.js व मॉडल उसके बाद लोड करें।

क्या इंटरैक्टिव 3D लोगो फ़ोन पर काम करेगा?

हाँ, दो बदलावों के साथ। टच स्क्रीन पर hover नहीं होता, इसलिए लोगो को पॉइंटर इनपुट सिर्फ़ तब मिलता है जब उंगली स्क्रीन पर हो; idle मोशन या टैप रिएक्शन जोड़ें। हाई-डेंसिटी स्क्रीन पर रेंडर होने वाले पिक्सेल कई गुना हो जाते हैं, इसलिए फ़्रेम रेट बनाए रखने के लिए canvas resolution सीमित रखें।

स्रोत

संबंधित गाइड