3 डी में जावास्क्रिप्ट: थ्री.जेएस का परिचय

नमस्कार, हेब्र! मैं आपके लिए ब्रेट कैमरन द्वारा दिए गए लेख "जावास्क्रिप्ट इन 3 डी: ए इंट्रोडक्शन टू थ्री।जेएस" का अनुवाद प्रस्तुत करता हूं।

परिचय

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

मुझे एकता और सी # गेम इंजन के साथ कुछ बुनियादी अनुभव हैं, लेकिन फिर भी, कई अवधारणाएं मेरे लिए नई हैं। मैं इस निष्कर्ष पर पहुंचा कि अब शुरुआती डेवलपर्स के लिए बहुत कम संसाधन हैं, इसलिए मैंने इस लेख को लिखने का फैसला किया। इसमें, हम बहुभुज जाल और सामग्री से ज्यामिति, लोडर और बहुत कुछ के तीन.js दृश्यों के मूल तत्वों पर विचार करेंगे।

इस लेख के अंत में, आपको अपने भविष्य की वेब परियोजना में एक अतिरिक्त आयाम जोड़ने के लिए आवश्यक बुनियादी पहलुओं की ठोस समझ होगी।

बेन ह्यूस्टन , थॉमस डीवाल्ड और स्ट्राइकरडोज़एनीमेशन के तीन उदाहरण ।

वैक्टर और कंटेनर - बुनियादी बिल्डिंग ब्लॉक

अक्सर थ्री.जेएस में दो मुख्य वर्ग होते हैं - वेक्टर 3 और बॉक्स 3 । यदि आप 3 डी में नए हैं, तो यह थोड़ा सार लग सकता है, लेकिन आप उनसे कई बार मिलेंगे।

Vector3

सबसे बुनियादी 3 डी वर्ग जिसमें तीन नंबर होते हैं: x, y और z । नंबर 3 डी अंतरिक्ष या दिशा और लंबाई में एक बिंदु के निर्देशांक हैं। उदाहरण के लिए:

const vect = new THREE.Vector3(1, 1, 1); 

तीन में से अधिकांश कंस्ट्रक्टर बॉक्स टाइप के लिए वेक्टर 3 की वस्तुओं को इनपुट तर्कों के रूप में स्वीकार करते हैं, उदाहरण के लिए बॉक्स 3

Box3

यह वर्ग क्यूबॉइड (3 डी कंटेनर) का प्रतिनिधित्व करता है। इसका मुख्य कार्य अन्य वस्तुओं के आसपास एक कंटेनर बनाना है - और यह सब, सबसे छोटा क्यूबॉइड जिसमें एक 3 डी ऑब्जेक्ट फिट होगा। प्रत्येक Box3 को x, y और z axes के बारे में संरेखित किया जाता है । वेक्टर 3 का उपयोग करके एक कंटेनर बनाने का एक उदाहरण:

 const vect = new THREE.Vector3(1, 1, 1); const box = new THREE.Box3(vect); 

मौजूदा 3D ऑब्जेक्ट के आसपास कंटेनर बनाने का एक उदाहरण:

 const box = new THREE.Box3(); box.setFromObject(object); 

आप इस गहन ज्ञान के बिना ग्रिड बना सकते हैं, लेकिन जैसे ही आप अपने मॉडल के साथ आना या बदलना शुरू करते हैं, ये कक्षाएं निश्चित रूप से काम में आएंगी। अब हम अमूर्तता से दूर दिखाई देने वाली चीजों की ओर बढ़ेंगे।

बहुभुज जाल

थ्री.जेएस में, मंच पर मुख्य दृश्य तत्व मेष है । यह एक 3 डी ऑब्जेक्ट है जो त्रिकोणीय आयतों (बहुभुज जाल) से बना है। यह दो वस्तुओं का उपयोग करके बनाया गया है:
ज्यामिति - इसके आकार को निर्धारित करती है, सामग्री - उपस्थिति को निर्धारित करती है।

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

ज्यामिति

जिस कार्य को आप प्राप्त करना चाहते हैं, उसके आधार पर, आप तीन के अंदर ज्यामिति को परिभाषित करना चाहते हैं या एक फ़ाइल से दूसरे को आयात कर सकते हैं।

THREE.TorusKnotGeometry जैसे कार्यों का उपयोग करके, हम कोड की एक पंक्ति के साथ जटिल ऑब्जेक्ट बना सकते हैं। हम इसे जल्द ही प्राप्त करेंगे, लेकिन पहले सरल रूपों पर विचार करें।
सबसे सरल 3 डी फिगर, क्यूबॉइड या कंटेनर, चौड़ाई , ऊंचाई और गहराई के मापदंडों द्वारा निर्दिष्ट किया जा सकता है।

 const geometry = new THREE.BoxGeometry( 20, 20, 20 ); 

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

 const geometry = new THREE.SphereGeometry( 20, 64, 64 ); 

यदि हम तेज या त्रिकोणीय आकार बनाना चाहते हैं, तो हम एक शंकु का उपयोग कर सकते हैं। उनके तर्क दो पिछले आंकड़ों के तर्कों का एक संयोजन हैं। नीचे, हम त्रिज्या , चौड़ाई और रेडियलसेगमेंट लिखते हैं ।

  const geometry = new THREE.ConeBufferGeometry( 5, 20, 32 ); 

यह सबसे आम आंकड़ों का हिस्सा है। तीन.js बॉक्स के अंदर बहुत सी आकृतियाँ हैं, जो प्रलेखन में पाई जा सकती हैं। इस लेख में, हम TorusKnotGeometry विधि के आधार पर निर्मित अधिक दिलचस्प रूपों को देखेंगे ।

ये आकृतियाँ ठीक उसी तरह से क्यों दिखती हैं जैसी वे दिखती हैं? यह प्रश्न इस लेख के दायरे से परे है, लेकिन मैं आपसे पैरामीटर मूल्यों के साथ प्रयोग करने का आग्रह करता हूं, क्योंकि आप एक पंक्ति के साथ बहुत ही रोचक आकृतियाँ प्राप्त कर सकते हैं!

 const geometry = new THREE.TorusKnotGeometry(10, 1.3, 500, 6, 6, 20); 

https://codepen.io/BretCameron/pen/gOYqORg

सामग्री

ज्यामिति हमारी 3 डी वस्तुओं के आकार को परिभाषित करती है, लेकिन उनकी उपस्थिति को नहीं। इसे ठीक करने के लिए, हमें सामग्रियों की आवश्यकता है।

तीन.js बॉक्स से 10 सामग्री प्रदान करते हैं, जिनमें से प्रत्येक के अपने फायदे और अनुकूलन योग्य पैरामीटर हैं। हम केवल सबसे उपयोगी भाग पर विचार करेंगे।

MeshNormalMaterial

त्वरित शुरुआत और शुरुआत के लिए उपयोगी।

हम MeshNormalMaterial के साथ शुरू करेंगे, बहुरंगा सामग्री जिसका उपयोग हमने ऊपर के उदाहरणों में किया है। यह आरजीबी पैनल में सामान्य वैक्टर से मेल खाता है, दूसरे शब्दों में, 3 डी अंतरिक्ष में वेक्टर की स्थिति निर्धारित करने के लिए रंगों का उपयोग किया जाता है।

 const material = new THREE.MeshNormalMaterial(); 

ध्यान दें कि यदि आप सामग्री का रंग बदलना चाहते हैं, तो आप CSS फ़िल्टर का उपयोग कर सकते हैं और संतृप्ति को बदल सकते हैं:

  filter: hue-rotate(90deg) . 

मेरे अनुभव में, यह सामग्री त्वरित स्ट्रैटम और लॉन्च के लिए अधिक उपयोगी है। अपनी वस्तुओं के अधिक नियंत्रण के लिए, कुछ और का उपयोग करना बेहतर है।

MeshBasicMaterial

केवल कंकाल को प्रदर्शित करते समय उपयोगी है।

यदि आप आकृति को एक ही रंग देना चाहते हैं, तो आप केवल प्रकाश व्यवस्था लागू नहीं होने पर MeshBasicMaterial का उपयोग कर सकते हैं। मुझे मॉडल के कंकाल को प्रस्तुत करने में उस सामग्री का उपयोग करना उपयोगी लगा। केवल कंकाल खींचने के लिए, आपको एक पैरामीटर के रूप में {वायरफ्रेम: ट्रू} पास करना होगा।

 const material = new THREE.MeshBasicMaterial({ wireframe: true, color: 0xdaa520 }); 

इस सामग्री का मुख्य नुकसान यह है कि सामग्री की गहराई के बारे में जानकारी पूरी तरह से खो जाती है। प्रत्येक सामग्री में केवल कंकाल प्रदर्शित करने का विकल्प होता है, लेकिन केवल एक सामग्री गहराई की कमी की समस्या को हल करती है - MeshDepthMaterial

MeshLambertMaterial

उच्च प्रदर्शन लेकिन कम सटीकता के लिए उपयोगी है।

यह पहली सामग्री है जो प्रकाश को ध्यान में रखती है, इसलिए आपको हमारे दृश्य में कुछ प्रकाश जोड़ने की आवश्यकता है। नीचे दिए गए कोड में, हम एक गर्म प्रभाव के साथ एक पीले रंग की टिंट के साथ स्पॉटलाइट जोड़ते हैं।

 const scene = new THREE.Scene(); const frontSpot = new THREE.SpotLight(0xeeeece); frontSpot.position.set(1000, 1000, 1000); scene.add(frontSpot); const frontSpot2 = new THREE.SpotLight(0xddddce); frontSpot2.position.set(-500, -500, -500); scene.add(frontSpot2); 

अब हमारे आंकड़े के लिए सामग्री जोड़ें। चूंकि हमारा आंकड़ा सजावट की तरह है, इसलिए मैं एक और सुनहरा रंग जोड़ने का सुझाव देता हूं। एक अन्य पैरामीटर, इमिसिव , ऑब्जेक्ट का स्वयं (प्रकाश स्रोत के बिना) ऑब्जेक्ट से आने वाला रंग है। अक्सर यह एक गहरे रंग के रूप में बेहतर काम करता है - उदाहरण के लिए, ग्रे के अंधेरे रंगों के रूप में, नीचे दिए गए उदाहरण में

 const material = new THREE.MeshLambertMaterial({ color: 0xdaa520, emissive: 0x111111, }); 

जैसा कि आप नीचे दिए गए उदाहरण में देख सकते हैं, रंग कम या ज्यादा सही है, लेकिन जिस तरह से यह प्रकाश के साथ बातचीत करता है, वह यथार्थवाद को नहीं जोड़ता है। इसे ठीक करने के लिए, हमें MeshPhongMaterial या MeshStandardMaterial का उपयोग करने की आवश्यकता है ।

MeshPhongMaterial

मध्यम प्रदर्शन और मध्यम सटीकता के लिए उपयोगी है।

यह सामग्री प्रदर्शन और रेंडरिंग सटीकता के बीच एक ट्रेडऑफ़ प्रदान करती है, इसलिए यह सामग्री एक ऐसे अनुप्रयोग के लिए एक अच्छा विकल्प है, जिसे अधिक सटीक प्रतिपादन के साथ-साथ MeshLambertMaterial के साथ उत्पादक होना चाहिए ।

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

 const material = new THREE.MeshPhongMaterial({ color: 0xdaa520, emissive: 0x000000, specular: 0xbcbcbc, }); 

नेत्रहीन, ऊपर से छवि प्रकाश को और अधिक दृढ़ता से दर्शाती है, लेकिन फिर भी सही नहीं है। सफेद रोशनी बहुत उज्ज्वल है और सामग्री धातुई की तुलना में अधिक रिब्ड दिखती है (और हम इसके लिए प्रयास करते हैं)। हम MeshStandardMaterial का उपयोग करके बेहतर परिणाम प्राप्त कर सकते हैं ।

MeshStandartMaterial

उच्च सटीकता लेकिन कम उत्पादकता के लिए उपयोगी है।

यह सभी की सबसे सटीक सामग्री है, हालांकि इसका उपयोग अधिक शक्ति का उपयोग करने की लागतों को आकर्षित करेगा। MeshStandartMaterial का उपयोग अतिरिक्त धातु और खुरदरापन मापदंडों के साथ किया जाता है, जिनमें से प्रत्येक 0 और 1 के बीच का मान लेता है।

धातुता पैरामीटर प्रभावित करता है कि वस्तु कैसे प्रतिबिंबित होती है, धातु की प्रकृति के करीब हो जाती है। इसका कारण यह है कि धातुओं जैसे प्रवाहकीय पदार्थों में अलग-अलग परावर्तक गुण होते हैं, मिट्टी के पात्र जैसे डाइलेक्ट्रिक्स के विपरीत।

खुरदरापन अनुकूलन के लिए एक अतिरिक्त परत जोड़ता है। आप इसे चमक के विपरीत के रूप में कल्पना कर सकते हैं: 0 - बहुत चमकदार, 1 - बहुत मैट।

 const material = new THREE.MeshStandardMaterial({ color: 0xfcc742, emissive: 0x111111, specular: 0xffffff, metalness: 1, roughness: 0.55, }); 

यह तीन.js में प्रस्तुत सभी की सबसे यथार्थवादी सामग्री है, लेकिन सबसे अधिक संसाधन-खपत भी है

जिन सामग्रियों के बारे में हमने नीचे चर्चा की है, वे ऐसी हैं जो मुझे सबसे अधिक बार मिलीं और आप डॉक में सभी विकल्प देख सकते हैं।

लोडर

जैसा कि हमने ऊपर चर्चा की है, आप मैन्युअल रूप से ज्यामिति और बहुभुज मेषों को परिभाषित कर सकते हैं। व्यवहार में, लोग अक्सर फ़ाइलों से अपने ज्यामितीय को लोड करते हैं। सौभाग्य से, थ्री। जेएस के पास कुछ समर्थित डाउनलोडर्स हैं जो कई 3 डी प्रारूपों का समर्थन करते हैं।

मुख्य ObjectLoader JSON ऑब्जेक्ट / सीन प्रारूप का उपयोग करके JSON फ़ाइल को लोड करता है । अधिकांश बूटलोडर्स को मैन्युअल रूप से आयात करने की आवश्यकता होती है। आप यहां समर्थित बूटलोडर्स की पूरी सूची पा सकते हैं और उन्हें आयात कर सकते हैं। नीचे एक छोटी सूची है कि आप क्या आयात कर सकते हैं।

 // GLTF import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; // OBJ import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js'; // STL import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js'; // FBX import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; // 3MF import { 3MFLoader } from 'three/examples/jsm/loaders/3MFLoader.js'; 

ऑनलाइन देखने के लिए अनुशंसित प्रारूप GLTF है, क्योंकि प्रारूप "रनटाइम में संपत्ति पहुंचाने, स्थानांतरण के लिए कॉम्पैक्ट और डाउनलोड के लिए तेज़" के उद्देश्य से है।

बेशक, एक निश्चित प्रकार की फ़ाइल को प्राथमिकता देने के कई कारण हो सकते हैं (उदाहरण के लिए, यदि गुणवत्ता एक प्राथमिकता है या 3 डी प्रिंटिंग के लिए सटीकता की आवश्यकता है)। GLTF आयात करते समय सबसे अच्छा ऑनलाइन प्रदर्शन होगा।

 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import model from '../models/sample.gltf'; let loader = new GLTFLoader(); loader.load(model, function (geometry) { // if the model is loaded successfully, add it to your scene here }, undefined, function (err) { console.error(err); }); 

यह सब एक साथ रखना

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

आपके कोड को व्यवस्थित करने का तरीका आपके ऊपर है। सरल उदाहरणों में, जैसे कि इस लेख में, यह सभी कोड को एक ही स्थान पर लिखने के लिए समझ में आता है। लेकिन व्यवहार में, कोड आधार और उसके प्रबंधन के विस्तार की संभावना के लिए व्यक्तिगत तत्वों को अलग करना उपयोगी है।

सादगी के लिए, हम उन तत्वों पर विचार करेंगे जो एक ही वस्तु के रूप में तैयार किए गए हैं, इसलिए हम सभी कोड एक फ़ाइल में डाल देंगे।

 // Import dependencies import * as THREE from 'three'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; //   const scene = new THREE.Scene(); scene.background = new THREE.Color(0x282c34); //  ,       const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.z = 5; //  ""      const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //   DOM   renderer.domElement   document.getElementById('threejs').appendChild(renderer.domElement); //  ,      DOM  let controls = new OrbitControls(camera, document.getElementById('threejs')); controls.target.set(0, 0, 0); controls.rotateSpeed = 0.5; controls.update(); //  ( )   const geometry = new THREE.TorusKnotGeometry(10, 1.3, 500, 6, 6, 20); //    const material = new THREE.MeshStandardMaterial({ color: 0xfcc742, emissive: 0x111111, specular: 0xffffff, metalness: 1, roughness: 0.55, }); //   ,       const mesh = new THREE.Mesh(geometry, material); mesh.scale.x = 0.1; mesh.scale.y = 0.1; mesh.scale.z = 0.1; scene.add(mesh); //  ,       const frontSpot = new THREE.SpotLight(0xeeeece); const frontSpot2 = new THREE.SpotLight(0xddddce); frontSpot.position.set(1000, 1000, 1000); frontSpot2.position.set(-500, -500, -500); scene.add(frontSpot); scene.add(frontSpot2); //   ,           const animate = function () { requestAnimationFrame(animate); mesh.rotation.x += 0.005; mesh.rotation.y += 0.005; mesh.rotation.z += 0.005; renderer.render(scene, camera); }; //    animate(); 

क्या मुझे एक रूपरेखा का उपयोग करने की आवश्यकता है?

अंत में, यह चर्चा करने का समय है कि क्या अपने पसंदीदा ढांचे के साथ थ्री.जे का उपयोग करें? फिलहाल, रिएक्ट के लिए एक अच्छा प्रतिक्रिया-तीन-फाइबर पैकेज है। रिएक्ट उपयोगकर्ताओं के लिए, इस तरह के पैकेज का उपयोग करने के स्पष्ट लाभ हैं - आप उन घटकों के साथ काम करने के लिए एक संरचना बनाए रखते हैं जो आपको कोड का पुन: उपयोग करने की अनुमति देता है।

शुरुआती लोगों के लिए, मैं आपको सामान्य वेनिला जेएस के साथ शुरू करने की सलाह देता हूं, क्योंकि तीन.js के बारे में लिखे गए अधिकांश ऑनलाइन सामग्री वेनिला JS पर तीन.js से संबंधित हैं। मेरे सीखने के अनुभव के आधार पर, यह एक पैकेज के माध्यम से सीखने के लिए भ्रामक और कठिन हो सकता है - उदाहरण के लिए, आपको तीन.js ऑब्जेक्ट्स और विधियों को घटकों और प्रॉप्स में अनुवाद करना होगा। (जैसे ही आप थ्री। जेएस सीखते हैं आप किसी भी पैकेज का उपयोग कर सकते हैं)।

फ्रेमवर्क में थ्रीजेज कैसे जोड़ें

तीन.js एक HTML ऑब्जेक्ट (जिसे अक्सर रेंडरर.डोमेमेंट कहा जाता है) प्रदान करता है जिसे आपके एप्लिकेशन में किसी भी HTML ऑब्जेक्ट में जोड़ा जा सकता है। उदाहरण के लिए, यदि आपके पास आईडी = "थ्रीज" के साथ एक डिव है , तो आप केवल अपने थ्री। जेएस कोड में निम्नलिखित कोड शामिल कर सकते हैं:

 document.getElementById('threejs').appendChild(renderer.domElement); 

कुछ चौखटों ने पेड़ के DOM नोड्स तक पहुंचने के लिए पसंदीदा रास्ते बनाए हैं। उदाहरण के लिए, प्रतिक्रिया में रेफरी , Vue में $ रेफ या कोणीय में ngRef और यह डोम तत्वों तक सीधी पहुंच की पृष्ठभूमि के खिलाफ एक बड़े पैमाने की तरह दिखता है। एक उदाहरण के रूप में, आइए प्रतिक्रिया के लिए त्वरित कार्यान्वयन देखें।

प्रतिक्रिया के लिए रणनीति

यदि आप React का उपयोग करते हैं, तो आपके घटकों में से एक में तीन.js फ़ाइलों को एम्बेड करने का एक तरीका है। फ़ाइल में तीनEntryPoint.js हम निम्नलिखित कोड लिखेंगे:

 export default function ThreeEntryPoint(sceneRef) { let renderer = new THREE.WebGLRenderer(); // ... sceneRef.appendChild(renderer.domElement); } 

हम इसे एक फ़ंक्शन के रूप में निर्यात करते हैं जो एक तर्क लेता है: हमारे घटक में एक तत्व का संदर्भ। अब हम अपना कंपोनेंट बना सकते हैं

 import React, { Component } from 'react'; import ThreeEntryPoint from './threejs/ThreeEntryPoint'; export default class ThreeContainer extends Component { componentDidMount() { ThreeEntryPoint(this.scene); } render() { return ( <> <div ref={element => this.scene = element} /> </> ); } } 

आयातित ThreeEntryPoint फ़ंक्शन को ComponentsDidMount विधि में बुलाया जाना चाहिए और संदर्भों का उपयोग करके एक तर्क के रूप में नई div पास करना चाहिए
कार्रवाई में इस दृष्टिकोण के एक उदाहरण के रूप में, आप भंडार को क्लोन कर सकते हैं और इसे स्वयं आज़मा सकते हैं: https://github.com/BretCameron/three-js-sample ।

निष्कर्ष

अभी भी बहुत कुछ है जो मैं थ्री.जेएस के बारे में बात कर सकता हूं, लेकिन मुझे उम्मीद है कि इस लेख ने आपको इस शक्तिशाली तकनीक का उपयोग शुरू करने के लिए पर्याप्त जानकारी दी है। जब मैंने थ्रीज सीखना शुरू किया, तो मुझे इस लेख जैसा एक भी संसाधन नहीं मिला, इसलिए मुझे उम्मीद है कि मैंने शुरुआती लोगों के लिए इस तकनीक को और अधिक सुलभ बनाने में मदद की।