🕗 🧒🏿 🌡️ सबसे छोटे के लिए तीन.js पर तीन आयामी उत्पाद प्रस्तुतियों 👸🏾 💃🏻 🙌🏽

3 डी में सभी प्रकार की उत्पाद प्रस्तुतियां हमारे समय में इतनी दुर्लभ नहीं हैं, लेकिन ये कार्य शुरुआती डेवलपर्स से बहुत सारे सवाल पैदा करते हैं। आज हम कुछ आधारभूत बातों पर गौर करेंगे जो इस विषय में आने में मदद करेंगी और एक ब्राउज़र में त्रि-आयामी मॉडल को प्रदर्शित करने जैसे सरल कार्य पर ठोकर नहीं खाएगी। एक सहायता के रूप में, हम इस क्षेत्र में सबसे लोकप्रिय उपकरण के रूप में थ्री.जे का उपयोग करेंगे।

काम पर लगना

सबसे पहले, हम अपने लिए एक HTML टेम्पलेट बनाते हैं। उदाहरण को जटिल नहीं करने के लिए, हम किसी भी चीज़ का उपयोग नहीं करेंगे, कोई असेंबलर, प्रीप्रोसेसर, आदि।

हमें कैनवास के लिए एक कंटेनर और स्क्रिप्ट का एक सेट चाहिए - वास्तव में तीन.js, obj प्रारूप में मॉडल के लिए एक लोडर, और माउस के साथ कैमरे को नियंत्रित करने के लिए एक स्क्रिप्ट।

<div class='canvas-container'></div> <script src='https://unpkg.com/three@0.99.0/build/three.min.js'></script> <script src='https://unpkg.com/three@0.99.0/examples/js/loaders/OBJLoader.js'></script> <script src='https://unpkg.com/three@0.99.0/examples/js/controls/OrbitControls.js'></script> <script src='./main.js'></script>

यदि आपका प्रोजेक्ट NPM और बिल्डरों का उपयोग करता है, तो आप पैकेज तीन से यह सब आयात कर सकते हैं। दरअसल, अगर किसी को पता नहीं है, तो अनपैक सभी एनपीएम पैकेज लेता है।

यदि आपको कुछ पैकेज से अपने पेज पर जल्दी से कनेक्ट करने की आवश्यकता है, लेकिन आपको सीडीएन का लिंक नहीं मिला है - अनपैक के बारे में याद रखें, तो सबसे अधिक संभावना है कि आपको इसकी आवश्यकता है।

मुख्य स्क्रिप्ट वैश्विक चर के एक समूह के साथ शुरू होगी। यह उदाहरण को सरल करेगा।

 let SCENE; let CAMERA; let RENDERER; let LOADING_MANAGER; let IMAGE_LOADER; let OBJ_LOADER; let CONTROLS; let MOUSE; let RAYCASTER; let TEXTURE; let OBJECT;

थ्री.जेएस में, यह सभी दृश्य के साथ शुरू होता है, इसलिए इसे इनिशियलाइज़ करें और कुछ प्रकाश स्रोत बनाएं:

 function initScene() { SCENE = new THREE.Scene(); initLights(); } function initLights() { const ambient = new THREE.AmbientLight(0xffffff, 0.7); SCENE.add(ambient); const directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(0, 1, 1); SCENE.add(directionalLight); }

प्रकाश स्रोत अलग हैं। ज्यादातर ऐसे कार्यों में, परिवेश का उपयोग किया जाता है - एक निश्चित दिशा में प्रकाश भरना, और दिशात्मक - प्रकाश। अभी भी प्रकाश के बिंदु स्रोत हैं, लेकिन हमें अभी तक उनकी आवश्यकता नहीं है। हम चमक के रंग को सफेद बनाते हैं ताकि कोई विकृतियां न हों।

भरण चमक के रंग के साथ खेलना उपयोगी हो सकता है, विशेष रूप से भूरे रंग के रंगों के साथ, इसलिए आप एक नरम छवि बना सकते हैं।

दूसरी महत्वपूर्ण चीज कैमरा है। यह एक ऐसी इकाई है जो उस बिंदु को निर्धारित करती है जिस पर हम हैं और जिस दिशा में हम देखते हैं।

 function initCamera() { CAMERA = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000); CAMERA.position.z = 100; }

कैमरा पैरामीटर आमतौर पर आंख से चुने जाते हैं और उपयोग किए गए मॉडल पर निर्भर करते हैं।

तीसरी वस्तु जो हमें चाहिए वह है रेंडर। वह छवि प्रदान करने के लिए जिम्मेदार है। इसका प्रारंभ स्वयं बोलता है:

 function initRenderer() { RENDERER = new THREE.WebGLRenderer({ alpha: true }); RENDERER.setPixelRatio(window.devicePixelRatio); RENDERER.setSize(window.innerWidth, window.innerHeight); }

विभिन्न प्रारूपों के डेटा को लोड करने के लिए लोडर की आवश्यकता होती है। यहां आप विकल्पों की एक लंबी सूची पा सकते हैं, लेकिन हमें केवल दो की आवश्यकता है - चित्रों के लिए एक (यह किट के साथ आता है) और एक मॉडल के लिए (हमने इसे शुरुआत में जोड़ा)।

 function initLoaders() { LOADING_MANAGER = new THREE.LoadingManager(); IMAGE_LOADER = new THREE.ImageLoader(LOADING_MANAGER); OBJ_LOADER = new THREE.OBJLoader(LOADING_MANAGER); }

हम मॉडल को लोड करने के लिए आगे बढ़ते हैं। जैसा कि अपेक्षित था, यह एसिंक्रोनस रूप से होता है। मॉडल लोड करने के बाद, हम इसके मापदंडों के साथ खेल सकते हैं:

 function loadModel() { OBJ_LOADER.load('./model.obj', (object) => { object.scale.x = 0.3; object.scale.y = 0.3; object.scale.z = 0.3; object.rotation.x = -Math.PI / 2; object.position.y = -30; OBJECT = object; SCENE.add(OBJECT); }); }

यह बैरल अंग शुरू करने के लिए बनी हुई है:

 function animate() { requestAnimationFrame(animate); render(); } function render() { CAMERA.lookAt(SCENE.position); RENDERER.render(SCENE, CAMERA); }

नतीजतन, हमें छाया के साथ बस एक सफेद क्रिसमस का पेड़ मिलता है (मैंने यहां से मॉडल लिया)।

एक, दो, तीन, क्रिसमस ट्री जला! लेकिन बनावट के बिना, निश्चित रूप से, यह जला नहीं जाएगा। हां, और हम कुछ अन्य समय आग और अन्य तत्वों की छाया के बारे में बात करेंगे ... लेकिन कम से कम हम देख सकते हैं कि क्रिसमस ट्री का मॉडल "टीवी पर" है।

बनावट पर जाने से पहले, इवेंट हैंडलर का आकार बदलने वाली एक मानक ब्राउज़र विंडो जोड़ना उपयोगी है:

 function initEventListeners() { window.addEventListener('resize', onWindowResize); onWindowResize(); } function onWindowResize() { CAMERA.aspect = window.innerWidth / window.innerHeight; CAMERA.updateProjectionMatrix(); RENDERER.setSize(window.innerWidth, window.innerHeight); }

बनावट जोड़ें

हमारे मॉडल और चित्र बनावट बच्चों के उपकरणों के मॉडल पर स्टिकर-अनुवादकों के सिद्धांत पर काम करते हैं। जैसा कि हम पहले से ही जानते हैं, वेबजीएल के संदर्भ में वस्तुओं में त्रिकोणों का ढेर होता है। अपने आप से, उनके पास कोई रंग नहीं है। प्रत्येक त्रिकोण के लिए बनावट के साथ एक ही त्रिकोणीय "स्टिकर" है जिसे आपको उस पर छड़ी करने की आवश्यकता है। लेकिन अगर हमारे पास 1000 त्रिकोण हैं, तो हमें 1000 बनावट चित्रों को लोड करने की आवश्यकता है? बिल्कुल नहीं। स्प्राइट बनाया गया है, सीएसएस आइकनों के लिए समान है (आप शायद काम पर उनके पास आए थे), और इस बारे में जानकारी है कि मॉडल को किस त्रिभुज और कहां पर जोड़ा गया है। और फिर तीन.js पहले से ही स्वतंत्र रूप से सब कुछ समझते हैं और हम तैयार परिणाम देखते हैं। वास्तव में, सब कुछ थोड़ा अधिक जटिल है, लेकिन विचार को इस तरह से समझा जाना चाहिए।

क्रिसमस ट्री की शाखाएं एक बहुत ही खुलासा उदाहरण नहीं हैं। वे सभी समान हैं। इस तरह की बनावट की संरचना बल्बसौर के उदाहरण पर बहुत बेहतर दिखाई देगी:

लेकिन पर्याप्त शब्द, चलो कार्रवाई करने के लिए नीचे उतरें। बनावट को प्रारंभिक करें और इसके साथ एक चित्र लोड करें:

 function initTexture() { TEXTURE = new THREE.Texture(); } function loadTexture() { IMAGE_LOADER.load('./texture.jpg', (image) => { TEXTURE.image = image; TEXTURE.needsUpdate = true; }); }

अब हमें मॉडल लोडिंग फ़ंक्शन का विस्तार करने की आवश्यकता है। अगर हमारे पास बल्बसौर जैसी बनावट होती, तो सब कुछ सरल होता। लेकिन क्रिसमस के पेड़ के साथ, बनावट केवल शाखाओं को कवर करती है। उन्हें किसी तरह अलग करना और केवल उन्हें लागू करना आवश्यक है। यह कैसे करना है? आप इस मुद्दे पर अलग-अलग तरीकों से संपर्क कर सकते हैं। यह कंसोल.लॉग का उपयोग करने और मॉडल को देखने का समय है।

यदि आप मॉडल के किसी विशिष्ट भाग को हाइलाइट करना नहीं जानते हैं, तो कंसोल का उपयोग करें। यह आमतौर पर यह पता लगाने का सबसे तेज़ तरीका है कि भागों में अंतर कैसे होता है।

आमतौर पर हमारे पास मॉडल को भागों में विभाजित करने के दो विकल्प हैं। पहला (अच्छा) वह है जब 3 डी कलाकार ने मॉडल के घटक भागों पर हस्ताक्षर किए हैं और हमारे पास उनके नाम क्षेत्रों तक पहुंच है और हम उनसे निर्धारित कर सकते हैं कि क्या है। हमारे उदाहरण में, यह नहीं है, लेकिन सामग्रियों के नाम हैं। हम उनका उपयोग करेंगे। "Christmas_Tree" सामग्री से मॉडल के कुछ हिस्सों के लिए हम बनावट का उपयोग करेंगे:

 function loadModel() { OBJ_LOADER.load('./model.obj', (object) => { object.traverse(function(child) { if (child instanceof THREE.Mesh) { switch (child.material.name) { case 'Christmas_Tree': child.material.map = TEXTURE; break; // . . . } } }); // . . .

तो हमें कुछ ऐसा मिलता है:

"लाल" और "गुलाबी" सामग्री से बने भागों के लिए (ये गेंदें हैं - क्रिसमस गेंदें), हम बस एक यादृच्छिक रंग सेट करते हैं। ऐसे मामलों में, HSL का उपयोग करना सुविधाजनक है:

 switch (child.material.name) { case 'Christmas_Tree': child.material.map = TEXTURE; break; case 'red': child.material.color.setHSL(Math.random(), 1, 0.5); break; case 'pink': child.material.color.setHSL(Math.random(), 1, 0.5); break; }

कलाकारों के लिए ध्यान दें: मॉडल में सब कुछ को सार्थक नाम दें। हमारे उदाहरण में सामग्रियों के नाम केवल मस्तिष्क को तोड़ते हैं। यहां लाल हरा हो सकता है। मैंने उन्हें नहीं बदला कि जो कुछ हो रहा था, उसे पूरी बेतुकी दिखाने के लिए। सार नाम "गेंदों के लिए सामग्री" अधिक सार्वभौमिक होगा।

समबाहु प्रक्षेपण

रूसी में अनुवाद में यौगिक शब्द समबाहु प्रक्षेपण समान-से-मध्यवर्ती प्रक्षेपण है। घर में अनुवादित - एक आयत पर गेंद को खींचा। आप मुझे उद्धृत कर सकते हैं। हम सभी ने स्कूल में एक विश्व मानचित्र देखा - यह आयताकार है, लेकिन हम समझते हैं कि यदि हम इसे थोड़ा रूपांतरित करते हैं, तो हमें एक ग्लोब मिलता है। यह बात है। यह समझने के लिए कि ये विकृतियाँ कैसे व्यवस्थित होती हैं, चित्र पर एक नज़र डालें:

विभिन्न उत्पादों के थंबनेल बनाते समय, पृष्ठभूमि अक्सर ऐसे अनुमानों का उपयोग करके बनाई जाती है। हम पर्यावरण के साथ एक विकृत तस्वीर लेते हैं और इसे एक बड़े क्षेत्र पर प्रदर्शित करते हैं। कैमरा इसके अंदर प्रतीत होता है। यह कुछ इस तरह दिखता है:

 function initWorld() { const sphere = new THREE.SphereGeometry(500, 64, 64); sphere.scale(-1, 1, 1); const texture = new THREE.Texture(); const material = new THREE.MeshBasicMaterial({ map: texture }); IMAGE_LOADER.load('./world.jpg', (image) => { texture.image = image; texture.needsUpdate = true; }); SCENE.add(new THREE.Mesh(sphere, material)); }

एक उदाहरण के रूप में, मैंने जानबूझकर किनारों को कम कर दिया है, इसलिए यदि आप जीथब से उदाहरण का उपयोग करते हैं, तो आप एक अलग सीम पा सकते हैं जिसके साथ चित्र बंद हो जाता है। अगर किसी को दिलचस्पी है, तो इसका मूल यहां से लिया जाता है ।

फिलहाल हमारे पास कुछ इस तरह है:

रंगीन गेंदों के साथ एक क्रिसमस का पेड़ बहुत प्यारा लगता है।

ऑर्बिट कंट्रोल करता है

तीन-आयामी कमरे की सुंदरता की सराहना करने के लिए, माउस नियंत्रण जोड़ें। और फिर सब कुछ 3 डी में लगता है, आपको यह सब मोड़ने की जरूरत है। आमतौर पर, OrbitControls का उपयोग ऐसे कार्यों में किया जाता है।

 function initControls() { CONTROLS = new THREE.OrbitControls(CAMERA); CONTROLS.minPolarAngle = Math.PI * 1 / 4; CONTROLS.maxPolarAngle = Math.PI * 3 / 4; CONTROLS.update(); }

कोणों पर प्रतिबंध लगाना संभव है जिसके द्वारा आप कैमरे को घुमा सकते हैं, ज़ूम और अन्य विकल्पों पर प्रतिबंध लगा सकते हैं। दस्तावेज़ीकरण पर ध्यान देना उपयोगी है, बहुत सारी दिलचस्प चीजें हैं।

आप इस प्रकार के नियंत्रण के बारे में बहुत कुछ नहीं बता सकते। कनेक्ट, चालू और यह काम करता है। बस नियमित रूप से राज्य को अद्यतन करने के लिए मत भूलना:

 function animate() { requestAnimationFrame(animate); CONTROLS.update(); render(); }

यहां आप थोड़ा विचलित हो सकते हैं, क्रिसमस ट्री को अलग-अलग दिशाओं में घुमा सकते हैं ...

Raycaster

रेकास्टर आपको निम्नलिखित करने की अनुमति देता है: यह अंतरिक्ष में एक सीधी रेखा खींचता है और उन सभी वस्तुओं को ढूंढता है जिनके साथ यह अंतरित होता है। यह आपको कई अलग-अलग दिलचस्प चीजें करने की अनुमति देता है, लेकिन उत्पाद प्रस्तुतियों के संदर्भ में दो मुख्य मामले होंगे - यह कुछ पर माउस होवर का जवाब देना और कुछ पर माउस क्लिक करने का जवाब देना है। ऐसा करने के लिए, आपको माउस के निर्देशांक के साथ बिंदु के माध्यम से स्क्रीन पर लंबवत रेखाएं खींचनी होंगी और चौराहों की तलाश करनी होगी। यही हम करेंगे। रेंडर फ़ंक्शन को बढ़ाएं, गेंदों के साथ चौराहों की तलाश करें और उन्हें फिर से दबाएं:

 function render() { RAYCASTER.setFromCamera(MOUSE, CAMERA); paintHoveredBalls(); // . . . } function paintHoveredBalls() { if (OBJECT) { const intersects = RAYCASTER.intersectObjects(OBJECT.children); for (let i = 0; i < intersects.length; i++) { switch (intersects[i].object.material.name) { case 'red': intersects[i].object.material.color.set(0x000000); break; case 'pink': intersects[i].object.material.color.set(0xffffff); break; } } } }

माउस के सरल आंदोलनों के साथ, हम यह सुनिश्चित करते हैं कि सब कुछ काम करता है।

लेकिन एक सूक्ष्मता है - तीन.js नहीं जानते कि कैसे आसानी से रंग बदलना है। और सामान्य तौर पर, यह पुस्तकालय मूल्यों में सुचारु परिवर्तन के बारे में नहीं है। यहां कुछ उपकरण को जोड़ने का समय है जो इसके लिए डिज़ाइन किया गया है, उदाहरण के लिए Anime.js।

 <script src='https://unpkg.com/animejs@2.2.0/anime.min.js'></script>

हम इस पुस्तकालय का उपयोग चेतन मूल्यों के लिए करते हैं:

 switch (intersects[i].object.material.name) { case 'red': // intersects[i].object.material.color.set(0x000000); anime({ targets: intersects[i].object.material.color, r: 0, g: 0, b: 0, easing: 'easeInOutQuad' }); break; // . . . }

अब रंग आसानी से बदल जाते हैं, लेकिन माउस के गेंद से दूर जाने के बाद ही। कुछ तय करना होगा। हम इसके लिए प्रतीकों का उपयोग करेंगे - वे हमें वस्तुओं में मेटा जानकारी को सुरक्षित रूप से जोड़ने की अनुमति देते हैं, और हमें केवल इस बारे में जानकारी जोड़ने की आवश्यकता है कि गेंद एनिमेटेड है या नहीं।

ES6 + में प्रतीक एक बहुत ही शक्तिशाली उपकरण है, जो अन्य बातों के अलावा, आपको बिना किसी डर के तीसरे पक्ष के पुस्तकालयों से वस्तुओं को जानकारी जोड़ने की अनुमति देता है जिससे यह एक नाम संघर्ष या तर्क को तोड़ देगा।

हम एक वैश्विक स्थिरांक बनाते हैं (सिद्धांत रूप में, यह ऐसे सभी प्रतीकों के लिए एक वैश्विक वस्तु बनाने के लायक होगा, लेकिन हमारे पास एक सरल उदाहरण है, हम इसे जटिल नहीं करेंगे):

 const _IS_ANIMATED = Symbol('is animated');

और हम गेंदों को फिर से रंगने के कार्य में एक जाँच जोड़ते हैं:

 if (!intersects[i].object[_IS_ANIMATED]) { anime({ targets: intersects[i].object.material.color, r: 0, g: 0, b: 0, easing: 'easeInOutQuad' }); intersects[i].object[_IS_ANIMATED] = true; }

अब वे आसानी से मँडरा पर तुरंत repainted। इस प्रकार, प्रतीकों की सहायता से, आप सभी गेंदों की अलग-अलग जगह पर बचत के बिना एनिमेशन में समान चेक जोड़ सकते हैं।

टूलटिप्स

आज हम जो आखिरी काम कर रहे हैं वह है टूलटिप्स। यह कार्य अक्सर सामना किया जाता है। शुरुआत के लिए, हमें बस उन्हें बनाने की जरूरत है।

 <div class='popup-3d'>  !</div>

 .popup-3d { color: #fff; font-family: 'Pacifico', cursive; font-size: 10rem; pointer-events: none; }

यदि आपको उनकी आवश्यकता नहीं है, तो पॉइंटर-ईवेंट को अक्षम करना याद रखें।

यह CSS3DRenderer जोड़ने के लिए बना हुआ है। यह वास्तव में काफी रेंडरर नहीं है, बल्कि यह एक ऐसी चीज है जो बस CSS परिवर्तनों को तत्वों में जोड़ता है और ऐसा लगता है कि वे एक आम दृश्य में हैं। पॉप-अप लेबल के लिए - यह सिर्फ वही है जो आपको चाहिए। हम ग्लोबल वेरिएबल CSSRENDERER बनाते हैं, इसे इनिशियलाइज़ करते हैं और रेंडर फंक्शन को कॉल करना नहीं भूलते हैं। सब कुछ एक नियमित रेंडरर की तरह दिखता है:

 function initCSSRenderer() { CSSRENDERER = new THREE.CSS3DRenderer(); CSSRENDERER.setSize(window.innerWidth, window.innerHeight); CSSRENDERER.domElement.style.position = 'absolute'; CSSRENDERER.domElement.style.top = 0; } function render() { CAMERA.lookAt(SCENE.position); RENDERER.render(SCENE, CAMERA); CSSRENDERER.render(SCENE, CAMERA); }

फिलहाल कुछ नहीं हुआ है। दरअसल, हमने कुछ नहीं किया। हम पॉप-अप तत्व को आरंभीकृत करते हैं, हम तुरंत इसके आकार और स्थान के साथ खेल सकते हैं:

 function initPopups() { const popupSource = document.querySelector('.popup-3d'); const popup = new THREE.CSS3DObject(popupSource); popup.position.x = 0; popup.position.y = -10; popup.position.z = 30; popup.scale.x = 0.05; popup.scale.y = 0.05; popup.scale.z = 0.05; console.log(popup); SCENE.add(popup); }

अब हम शिलालेख "3 डी" में देखते हैं। वास्तव में, यह पूरी तरह से 3 डी में नहीं है, यह कैनवास के ऊपर स्थित है, लेकिन पॉप-अप युक्तियों के लिए यह इतना महत्वपूर्ण नहीं है, प्रभाव महत्वपूर्ण है

अंतिम स्पर्श रहता है - कोण की एक निश्चित सीमा में शिलालेख को आसानी से दिखाने के लिए। फिर से, वैश्विक प्रतीक का उपयोग करें:

 const _IS_VISIBLE = Symbol('is visible');

और हम कैमरा के रोटेशन के कोण के आधार पर पॉप-अप तत्व की स्थिति को अपडेट करते हैं:

 function updatePopups() { const popupSource = document.querySelector('.popup-3d'); const angle = CONTROLS.getAzimuthalAngle(); if (Math.abs(angle) > .9 && popupSource[_IS_VISIBLE]) { anime({ targets: popupSource, opacity: 0, easing: 'easeInOutQuad' }); popupSource[_IS_VISIBLE] = false; } else if (Math.abs(angle) < .9 && !popupSource[_IS_VISIBLE]) { anime({ targets: popupSource, opacity: 1, easing: 'easeInOutQuad' }); popupSource[_IS_VISIBLE] = true; } }

सब कुछ काफी सरल है। अब शिलालेख आसानी से दिखाई देता है और गायब हो जाता है। आप ऑटो-रोटेट जोड़ सकते हैं और परिणाम का आनंद ले सकते हैं।

 CONTROLS.autoRotate = true; CONTROLS.autoRotateSpeed = -1.0;

निष्कर्ष

आज हमने देखा कि हमारे पृष्ठ पर तीन-आयामी मॉडल कैसे प्रदर्शित किए जाते हैं, उन्हें माउस से कैसे चालू किया जाए, टूलटिप्स कैसे बनाया जाए, मॉडल के कुछ हिस्सों पर होवर करने के लिए माउस का जवाब कैसे दिया जाए, और विभिन्न एनिमेशन के संदर्भ में पात्रों का उपयोग कैसे किया जाए। आशा है कि यह जानकारी सहायक है। खैर, आगामी सभी के साथ, अब आप जानते हैं कि छुट्टियों के दौरान आप क्या सीख सकते हैं।

पुनश्च: हेरिंगबोन उदाहरण के लिए पूर्ण स्रोत गीथूब पर उपलब्ध हैं।

सबसे छोटे के लिए तीन.js पर तीन आयामी उत्पाद प्रस्तुतियों