आपले स्वतःचे एचटीएमएल 5 डी इंजिन तयार करा

लेखक: John Stephens
निर्मितीची तारीख: 22 जानेवारी 2021
अद्यतन तारीख: 18 मे 2024
Anonim
How to write your own pseudo-3d game in 10 minutes? ( @javidx9 )
व्हिडिओ: How to write your own pseudo-3d game in 10 minutes? ( @javidx9 )

वेबवर 3 डी साठी अनेक ऑफ-द-शेल्फ सोल्यूशन्स आहेत. तथापि, ही निराकरणे सर्व साइटसाठी योग्य नाहीत आणि कधीकधी आपल्यास संपूर्ण नियंत्रणाची आवश्यकता असते जी आपल्या स्वतःच्या कोडबेसची इन आणि आउट जाणून घेतल्यास येते. Www.bjork.com तयार करण्याची वेळ आली तेव्हा, रिअल-टाइम प्रस्तुत 3 डी मॉडेलची वैशिष्ट्यीकृत साइट, आम्ही आमचे स्वतःचे इंजिन बनविण्याचे ठरविले जेणेकरून आम्हाला पाहिजे त्या मार्गाने जावे.

हा एक चांगला शिकण्याचा अनुभव होता आणि यामुळे आम्हाला इंजिन सुव्यवस्थित करण्याची परवानगी मिळाली जेणेकरुन साइटने उत्कृष्ट प्रदर्शन केले. हे ट्यूटोरियल इंजिनचे घटक भाग तोडतो जेणेकरून ते थ्रीडी क्षीण होईल. अगदी अगदी अनुभवी विकसक देखील त्यांची स्वतःची 3 डी इंजिन स्क्रॅचपासून बांधणे फारच अवघड काम म्हणून शोधू शकतात कारण त्यात गणित आणि सिद्धांत यांचा बराचसा सहभाग आहे. तथापि, एकदा आपल्याला त्यामागील मूलभूत तत्त्वे आणि सिद्धांत समजल्यानंतर, हे आपल्याला वाटेल तितके कठीण नाही. आशा आहे की आम्ही पूर्ण केल्यावर आपण स्वतःचे 3 डी अनुभव तयार करण्यास तयार असाल.


कोणत्याही 3 डी इंजिनचे कोनशिला हे एक समीकरण आहे:

स्केल = फोकल-लांबी / (झेड + फोकल-लांबी)

हे 3 डी ते 2 डी पर्यंत जाण्याचे समीकरण आहे. हे 3 डी ते 2 डी पर्यंत प्रोजेक्ट करते.

आपण ते कसे वापराल हे खालीलप्रमाणे आहे:

var point3D = {x: 100, y: 133, z: 230}; var focalLength = 1000; var स्केल = फोकललेंथ / (point3D.z + फोकललेंथ); var point2D = {x: point3D.x * स्केल, y: point3D.y * स्केल};

हे जाणून घेतल्याने आम्ही आपले छोटे / कार्यक्षम कॅनव्हास-आधारित 3 डी इंजिन तयार करणे सुरू करू शकतो. आपण कोणताही प्रकल्प सुरू करण्यापूर्वी, आपण काय साध्य करू इच्छिता ते शोधा आणि कागदावर त्याचे नकाशे तयार करा. हे 3 डी इंजिन आर्किटेक्ट कसे असेल आणि आम्हाला काय रेखांकित करायचे आहे हे शोधून काढले पाहिजे.

3 डी ऑब्जेक्ट्स प्रस्तुत करणे हे सीपीयू करू शकणार्‍या सर्वात करदात्यांपैकी एक काम आहे, म्हणून आम्हाला शक्य तितके आपले इंजिन ऑप्टिमाइझ करावे लागेल. कोड ऑप्टिमाइझ करण्याचा सर्वात सोपा मार्ग म्हणजे केआयएसएसच्या नियमांचे पालन करणे (हे सोपे ठेवा, मूर्ख). आपण आपला कोड शक्य तितका सोपा ठेवल्यास बहुधा सुरवातीपासूनच त्याची ऑप्टिमाइझ केली जाईल किंवा नंतर ते ऑप्टिमाइझ करणे खूप सोपे होईल.

मी खरोखर ऑब्जेक्ट ओरिएंटेड प्रोग्रामिंगच्या बाजूने आहे आणि माझा मेंदू त्या ओळींमध्ये विचार करू इच्छित आहे. म्हणून आपण काय साध्य करायचे आहे आणि आपल्याला काय हवे आहे याबद्दल विचार करणे सुरू केले पाहिजे. आमच्या 3 डी इंजिनसाठी आम्ही रेषा प्रस्तुत करीत आहोत. जर आपण त्याबद्दल विचार केला तर एक ओळ दोन रेषांनी बनविली आहे जी वास्तविक रेषेशी जोडलेली आहे. आपल्याला एक पॉईंट 3 डी वर्ग आणि लाइन 3 डी वर्ग हवा आहे. हे काहीतरी एकत्र ठेवून नक्कीच छान वाटेल म्हणून आम्ही सीन 3 डी नावाचा वर्ग बनवू.

चला Scene3D वर प्रारंभ करूया.


फंक्शन सीन 3 डी (कॅनव्हास) {this.focalLength = 1000; this.context = canvas.getContext ("2 डी"); this.sceneWidth = कॅनव्हास.विड्थ; this.sceneHeight = कॅनव्हास.हाइट; this.pPoint3D = []; this.pPoint2D = []; this.numPPoint = 0; this.render = फंक्शन () {}}

आता हे विचित्र वाटू शकते कारण आम्ही वर पॉईंट 3 डी बद्दल बोललो आहे परंतु मला अजूनही सर्व वास्तविक स्थिती डेटा सीन 3 डी मध्ये ठेवायचा आहे. सामान्यत: कारण आम्ही नंतर पॉइंट 3 डी न दाबता या बिंदू डेटावर ऑपरेशन्स करू शकतो. माझ्या म्हणण्याचा अर्थ तुम्हाला नंतर दिसेल. आम्ही नंतर रेंडर फंक्शन मध्ये परत येऊ.

चला आता पॉईंट 3 डी क्लास करू. म्हणूनच आपल्याला 3 डी बिंदू डेटा सीन 3 डी मध्ये ठेवू इच्छित असल्यामुळे आम्हाला हा 3 डी डेटा accessक्सेस आणि सुधारित करण्यासाठी पॉईंट 3 डी चा मार्ग आवश्यक आहे. यासाठी आम्ही गेटर्स आणि सेटर वापरू. गेटर्स आणि सेटर हे खास फंक्शन्स असतात जे वर्गाच्या बाहेर कोणत्याही जुन्या वर्गाच्या मालमत्तेसारखे दिसतात. पण जेव्हा ती प्रॉपर्टी सेट केली जाते किंवा विचारली जाते तेव्हा ती फंक्शन्स प्रत्यक्षात कॉल केली जातात. म्हणून जेव्हा आपल्या बाबतीत जेव्हा पॉईंट 3 डी चे एक्स पोझिशन सेट केले जाते तेव्हा आम्हाला एक्स पोजीशन सेट करायचे असते आणि सीन 3 डी चा पॉईंट 3 डी अ‍ॅरे अद्यतनित करायचा असतो. जावास्क्रिप्टमध्ये आपण गेटर आणि सेटरर्स खालीलप्रमाणे करत असल्याचे परिभाषित केले आहे:


हे .__ DefineGetter __ ("x", this.getX); हे .__ DefineSetter __ ("x", this.setX);

हे.गेटएक्सएक्स आणि हे.सेटएक्स ही फंक्शन्स आहेत जिथे ही प्रॉपर्टी "गेट" किंवा "सेट" होत असताना कॉल केली पाहिजे.

चला तर पॉइंट 3 डी वर्ग लिहू:

फंक्शन पॉईंट 3 डी (xVal, yVal, zVal) {var _x = xVal! = अपरिभाषित? xVal: 0; var _y = yVal! = अपरिभाषित? yVal: 0; var _z = zVal! = अपरिभाषित? zVal: 0; var myScene = शून्य; var xIdx; var yIdx; var zIdx; var xIdx2D; var yIdx2D; this.setupWithScene = फंक्शन (देखावा) {myScene = देखावा; var आयडीएक्स = सीन.सेटअपपॉईंट (_ एक्स, _ वाय, _ झेड); var i3 = आयडीएक्स * 3; var i2 = आयडीएक्स * 2; xIdx = i3; yIdx = i3 + 1; zIdx = i3 + 2; xIdx2D = i2; yIdx2D = i2 + 1; } this.getSceneIdx = फंक्शन () my mySceneIdx रिटर्न; } this.getX = फंक्शन () {रिटर्न _ x; } this.setX = फंक्शन (मूल्य) {if (myScene! = null) myScene.pPoint3D [xIdx] = मूल्य; _ x = मूल्य; } this.getY = फंक्शन () {रिटर्न _वाय; } this.setY = फंक्शन (मूल्य) {if (myScene! = null) myScene.pPoint3D [yIdx] = मूल्य; _य = मूल्य; } this.getZ = फंक्शन () {परतावा _z; } this.setZ = फंक्शन (मूल्य) {if (myScene! = null) myScene.pPoint3D [zIdx] = मूल्य; _z = मूल्य; } this.getX2D = फंक्शन () my myScene.pPoint2D [xIdx2D] परत करा; } this.getY2D = फंक्शन () my myScene.pPoint2D [yIdx2D] परत करा; } हे .__ DefineGetter __ ("सीनआयडीएक्स", this.getSceneIdx); हे .__ DefineGetter __ ("x", this.getX); हे .__ DefineGetter __ ("y", this.getY); हे .__ DefineGetter __ ("z", this.getZ); हे .__ DefineSetter __ ("x", this.setX); हे .__ DefineSetter __ ("y", this.setY); हे .__ DefineSetter __ ("z", this.setZ); हे .__ DefineGetter __ ("x2D", this.getX2D); हे .__ DefineGetter __ ("y2D", this.getY2D);

म्हणून पॉईंट 3 डीला सीन 3 डीबद्दल जाणून घेण्यासाठी ते एका दृश्यात जोडले जाणे आवश्यक आहे. त्याऐवजी पॉईंट 3 डी सीन 3 डी च्या पॉईंट 3 डी अ‍ॅरे अद्यतनित करण्यास सक्षम होण्यासाठी त्यास डेटा अद्यतनित करण्याची परवानगी कुठे आहे हे माहित असणे आवश्यक आहे. सीन 3 डी चा पॉईंट 3 डी अ‍ॅरे हा एक आयामी अ‍ॅरे आहे जो दिसेल: [x, y, z, x, y, z, ...] म्हणून डेटा 3 च्या संचामध्ये आहे. अशाप्रकारे हे करणे कदाचित वेडे वाटते, 2D अ‍ॅरे किंवा ऑब्जेक्टचा अ‍ॅरे का वापरू नये? तथापि हे केआयएसएस नियमात परत येते. आपली डेटा स्ट्रक्चर्स शक्य तितक्या सोपी ठेवून आपण चुकीचे होऊ शकत नाही (हे ऑप्टिमाइझ करणे सोपे आहे किंवा ऑप्टिमायझेशनची आवश्यकता नाही).

चला फंक्शन सेटअपशिवाय, पाहुया:

this.setupWithScene = फंक्शन (देखावा) {myScene = देखावा; var आयडीएक्स = सीन.सेटअपपॉईंट (_ एक्स, _ वाय, _ झेड); var i3 = आयडीएक्स * 3; var i2 = आयडीएक्स * 2; xIdx = i3; yIdx = i3 + 1; zIdx = i3 + 2; xIdx2D = i2; yIdx2D = i2 + 1;

प्रथम आपण नुकतेच मायस्सीन सेट केले. तर आता पॉईंट 3 डीला माहित आहे की ते कोणत्या सीन 3 डीचे आहे. पुढे आम्ही फंक्शन कॉल करीत आहोत आम्ही अद्याप सीन D डी मध्ये लिहिलेले नाही परंतु काय करतो ते सध्या बिंदू D डी वर सेट केलेला एक्स, वाय, झ ​​डेटा जोडून त्या दृश्यासाठी आयडीएक्स देतो. या निर्देशांकातून आम्ही 3 डी डेटा आणि 2 डी डेटासाठी निर्देशांकांची गणना करू शकतो. आम्ही देखावा मध्ये थ्रीडी डेटा सेव्ह करत असल्याने 2 डी डेटा का नाही?

Scene3D वर फंक्शन सेटअपपॉईंट जोडू:

this.setupPoint = फंक्शन (x, y, z) return var रिटर्वल = this.numPPoint; this.pPoint2D [this.pPoint2D.leight] = 0; this.pPoint2D [this.pPoint2D.leight] = 0; this.pPoint3D [this.pPoint3D.leight] = x; this.pPoint3D [this.pPoint3D.leight] = y; this.pPoint3D [this.pPoint3D.leight] = z; this.numPPoint ++; रिटर्न रिटर्वल;

याक्षणी आम्ही खरोखरच Scene3D साठी रेंडर फंक्शन लिहू शकतो. तथापि, हे दृश्य कॅनव्हासवर प्रत्यक्षात रेखांकन करेल की आपला भविष्यातील लाइन 3 डी वर्ग रेखांकन करेल की नाही हे आम्हाला निश्चित करावे लागेल. आता अर्थातच मी लाइन 3 डी वर्गाला इशारा दिला असल्याने आम्ही त्याचा वापर करणार आहोत. आपले थ्रीडी इंजिन आर्किटेक्ट करणे जेणेकरून ऑब्जेक्ट्स स्वत: ला प्रस्तुत करतात ते अधिक विस्तारक बनतात कारण कोणत्याही वेळी आम्ही सहजपणे प्रस्तुत करू शकणारी एक नवीन आयटम जोडू शकतो. उदाहरणार्थ जर आपल्याला पार्टिकल जोडायचे असतील तर आम्ही ते करू शकलो.

तर Line3D क्लास लिहू. कॅनव्हास बद्दल एक मस्त गोष्ट म्हणजे आपला एक मार्ग अनेक ओळींचा असू शकतो. तर आम्ही याचा लाभ घेऊ. प्रत्यक्षात एक लांब मार्ग रेखाटणे हा मार्ग वैयक्तिक रेषाखंड म्हणून रेखाटण्यापेक्षा बरेच चांगले कार्य करते.

फंक्शन लाइन 3 डी () {this.colour = "# एएएएएए"; this.pPoint = []; this.startPoint = नवीन पॉईंट 3 डी (); this.endPoint = नवीन पॉईंट 3 डी (); this.addToScene = फंक्शन (देखावा) {for (var i = 0; ithis.pPoint.leight; i ++) {this.pPoint [i] .setupWithScene (देखावा); ;} this.addPoint = फंक्शन (बिंदू) {this.pPoint [this.pPoint.length] = point; } this.render = कार्य (संदर्भ) {संदर्भ.बेजिनपाथ (); प्रसंग .strokeStyle = this.colour; (var i = 0; ithis.pPoint.length; i ++) {प्रसंग .lineTo (हे.बिंदू [i] .x2D, this.pPoint [i] .y2D); } संदर्भ.स्ट्रोक (); }}

लांब मार्ग तयार करण्याचा फायदा घेण्यासाठी आणि फक्त लहान रेषाखंड नाही तर प्रति ओळीत अनेक गुण संग्रहित करावे लागतील.

आम्ही या ओळींचे प्रस्तुत करणे सुरू करण्यापूर्वी आम्हाला त्यांना सीन 3 डीमध्ये जोडणे आवश्यक आहे म्हणून आपण सीन 3 डी वर एक Iड आयटम फंक्शन लिहा.

this.addItem = फंक्शन (आयटम) {this.items [this.items.length] = आयटम; product.addToScene (हे);

आपल्याला Scene3D मध्ये आयटम अ‍ॅरे व्हेरिएबल देखील जोडावे लागेल.

this.items = [];

मला वाटते आता आम्ही शेवटी सीन 3 डी साठी रेंडर फंक्शन लिहून काढण्यास तयार आहोत. कॅनव्हासच्या स्पष्ट रेखांकनाच्या रेंडर फंक्शनमध्ये आपल्याला काय करावे लागेल? आता आपल्याला 3 डी डेटा 2 डी मध्ये बदलण्याची गणना करावी लागेल. चला शेवटी रेंडर फंक्शन लिहू.

this.render = फंक्शन () {var अर्धाविड्थ = this.sceneWidth * 0.5; var halfHeight = this.sceneHeight * 0.5; (var i = 0; ithis.numPPoint; i ++) साठी {var i3 = i * 3; var i2 = i * 2; var x = this.pPoint3D [i3]; var y = this.pPoint3D [i3 + 1]; var z = this.pPoint3D [i3 + 2]; var स्केल = this.focalLength / (z + this.focalLength); this.pPoint2D [i2] = x * स्केल + अर्धी रूंदी; this.pPoint2D [i2 + 1] = y * स्केल + अर्धाहाइट; } this.context.save (); this.context.fillStyle = "आरजीबी (0, 0, 0);"; this.context.fillRect (0, 0, this.sceneWidth, this.sceneHeight); (var i = 0; ithis.items.leight; i ++) {this.items [i] .render (this.context) साठी; } this.context.restore ();}

3 डी ते 2 डी मध्ये केलेले बदल कदाचित परिचित वाटू शकतात कारण आम्ही हा लेख ज्यापासून सुरू केला त्यास हे अगदी चांगले आहे.

तर आता आम्ही आपले साधारण 3 डी इंजिन वापरण्यास तयार आहोत. हे वापरण्यासाठी आम्हाला पुढील गोष्टी करणे आवश्यक आहे:

  1. आम्ही काढत असलेले कॅनव्हास मिळवा
  2. सीन 3 डी ऑब्जेक्ट तयार करा
  3. काही लाइन 3 डी ऑब्जेक्ट्स तयार करा आणि त्यांना सीन 3 डी जोडा
  4. मध्यांतर लूपमध्ये सीन 3 डीडी प्रस्तुत करणे प्रारंभ करा

तर हा कोड सारखा दिसेल. एचटीएमएल दस्तऐवज लोड केल्यावर ते चालते:

फंक्शन ऑनइनिट () {कॅनव्हास = डॉक्युमेंट.ेटएलिमेंटबायआयडी ("मेनकॅनवास"); देखावा = नवीन सीन 3 डी (कॅनव्हास); var numLinesSeਮੈਂਟ = pointData.length / 4; var ओळ = नवीन Line3D (); line.colour = "आरजीबी (255, 0, 0)"; (var i = 0; inLLinesSeਮੈਂਟ; i ++) साठी i var i4 = i * 4; लाइन.एडडपॉईंट (नवीन पॉईंट 3 डी (पॉईंटडाटा [i4], पॉईंटडाटा [आय 4 + 1], पॉईंट डेटा [आय + + २])); } देखावा.अड्डी आयटम (ओळ); सेटइंटरवल (ऑनरेंडर,) 33);} आमचे रेंडर लूप फंक्शन असे दिसते: फंक्शन ऑनरेंडर () {सीन.रेन्डर ();}

एक गोष्ट आपण कदाचित विचार करू शकता की फंक्शन पॉईंट डेटा कुठून आला आहे? साधारणपणे थ्रीडी डेटा सेट बरेच मोठे असतात आणि म्हणून मी बाह्य .js फाइलमध्ये डेटा सेट ठेवतो. आम्ही jsdo.it वर वापरत असलेला डेटा सेट मी होस्ट केला आहे.

आम्ही jsdo.it/MikkoH/RadioHead3DContiguous वर लिहित आहोत हे उदाहरण आपण पाहू शकता.

आम्ही लिहित असलेला कोड आपण चालवित असताना आपल्या लक्षात येईल अशी एक बाब तथापि ती 3 डी दिसत नाही. वस्तुतः आपल्याला काही रेखा दिसतील ज्या काहीही दिसत नाहीत आणि त्या अगदी लहान आहेत. आमचे 3 डी मॉडेल फिरविणे, स्केलिंग आणि हलविण्यासाठी आम्हाला 3 डी मॅट्रिक्स वापरुन आमच्या मॉडेलचे रूपांतरण सुरू करावे लागेल. हे गुंतागुंतीचे वाटत आहे परंतु खरोखर ते फार वाईट नाही. एक मॅट्रिक्स प्रत्येक बिंदूसाठी नवीन रूपांतरित स्थितीची गणना करेल.

JSDo.it बद्दल छान गोष्ट म्हणजे आपण एखाद्याच्या एलिस कोडमध्ये जाऊ शकता आणि "काटा" (वापर आणि सुधारित) करू शकता आणि त्यास सुधारित करू शकता. म्हणून मी या प्रकल्पासाठी वापरू शकणार्या मेट्रिक्स 3 डी तयार करण्यासाठी हे केले आहे. मी आत गेलो आणि मसायुकी दाजीमा लिखित मॅट्रिक्स क्लास बनविला.

तर आपल्या सीन 3 डी मध्ये मॅट्रिक्स जोडू जेणेकरून आपण आपला देखावा फिरवू शकाल. रोटेशन एक्स, रोटेशन वाई आणि आमच्या देखाव्यावरील स्केलसाठी गुणधर्म मिळविणे देखील चांगले होईल, तर आपण त्या देखील जोडा.

फंक्शन सीन 3 डी (कॅनव्हास) {this.matrix = नवीन मॅट्रिक्स 3 डी (); this.rotationX = 0; this.rotationY = 0; this.scale = 1; this.focalLength = 1000; this.context = canvas.getContext ("2 डी"); this.sceneWidth = कॅनव्हास.विड्थ; this.sceneHeight = कॅनव्हास.हाइट; this.pPoint3D = []; this.pPoint2D = []; this.numPPoint = 0; this.items = []; ...

प्रस्तुत करण्यापूर्वी गुणांचे रूपांतर करण्यासाठी हे मॅट्रिक्स 3 डी वापरण्यासाठी आम्ही सीन 3 डी च्या रेंडर फंक्शनमध्ये बदल करू. अशाप्रकारे आम्ही आमचे मॉडेल वाढवू आणि नंतर फिरवू.

this.render = फंक्शन () {var अर्धाविड्थ = this.sceneWidth * 0.5; var halfHeight = this.sceneHeight * 0.5; this.matrix.identity (); this.matrix.scale (हे. स्केल, हे.स्केल, हे. स्केल); this.matrix.rotateX (this.rotationX); this.matrix.rotateY (this.rotationY); this.matrix.translate (0, 0, 1000); var transmitted = this.matrix.transformArray (this.pPoint3D); (var i = 0; ithis.numPPoint; i ++) साठी {var i3 = i * 3; var i2 = i * 2; var x = रूपांतरित [i3]; var y = रूपांतरित [i3 + 1]; var z = रूपांतरित [i3 + 2]; var स्केल = this.focalLength / (z + this.focalLength); this.pPoint2D [i2] = x * स्केल + अर्धी रूंदी; this.pPoint2D [i2 + 1] = y * स्केल + अर्धासाइट; } this.context.save (); this.context.fillStyle = "आरजीबी (0, 0, 0);"; this.context.fillRect (0, 0, this.sceneWidth, this.sceneHeight); (var i = 0; ithis.items.leight; i ++) {this.items [i] .render (this.context) साठी; } this.context.restore ();}

चला मॅट्रिक्स सामग्रीमधून जाऊया:

जेव्हा आम्ही असे.matrix.identity () म्हणतो; आम्ही मॅट्रिक्स फक्त "रीसेट" करत आहोत. ओळख मॅट्रिक्स ही अशी गोष्ट असते जी दुसर्‍या क्रमांकाच्या गुणाकारानंतर काहीही करत नाही. ही संख्या १ सारखीच आहे. उदाहरणार्थ जेव्हा आपण एखादी ओळ 6 * 1 = 6 करतो तेव्हा 1 खरोखर काहीही करत नाही.

आपल्याला त्वरीत ज्या गोष्टींबद्दल बोलायचे आहे ते म्हणजे मॅट्रिक्स गुणाकार परिवर्तनशील नाही. याचा अर्थ असा आहे की ए * बी! = बी * ए. तर आपल्या उदाहरणामध्ये याचा अर्थ काय आहे ते ते योग्य दिसण्यासाठी आम्हाला आपल्या विशिष्ट बदलांमध्ये एका विशिष्ट क्रमाने जोडणे आवश्यक आहे. आम्हाला प्रथम स्केल करणे, फिरविणे आणि नंतर आमचे मॉडेल भाषांतरित करायचे आहे. तर आम्ही येथे काय करतोः

हे. , 1000);

शेवटी आपण आपले मुद्दे बदलू शकतो.

var transmitted = this.matrix.transformArray (this.pPoint3D);

आम्ही जे बांधत आहोत त्याबद्दल मला एक सामायिक करणे खूप लहान आहे.

आमचे कोनस्टोन समीकरण लक्षात ठेवाः

var स्केल = फोकललेंथ / (point3D.z + फोकलॅन्गथ);

असो पॉईंट 3 डी.झेड खूपच लहान झाल्यास काय होते? मग मूलत: आपला ऑब्जेक्ट आपल्या मागे जात आहे? बरं आपण याची गणना करूया. समजू की फोकल लांबी 1000 आणि आमची झेड स्थिती -2000 आहे.

स्केल = 1000 / (- 2000 + 1000)
स्केल = 1000 / -1000 = -1

आमचा स्केल -1 आहे !!! याचा अर्थ असा की आमचे मॉडेल आपल्या मागे जाते तेव्हा ती उलथून फ्लिप होईल. हे खरोखर शोधून काढलेले आहे. आपण काय करू शकता हे तपासा की एखादा रेषाखंड आपल्या मागे आहे की नाही आणि तसे असल्यास, ते देऊ नका किंवा आपण काय करू शकता जसे आपण येथे करीत आहोत त्याप्रमाणे फसवणूक करणे आणि ऑब्जेक्ट नेहमी आपल्या समोर असल्याचे सुनिश्चित करणे. . म्हणूनच आम्ही मॉडेलचे भाषांतर करण्यापूर्वी ते 1000 पोझिशन्सद्वारे भाषांतरित करतो.

पण इथे अजून एक घाणेरडे छोटेसे रहस्य आहे. आमच्या फ्रेम रेटला उच्च-उच्च ठेवण्यासाठी आम्ही झेड-रोटेशन करत नाही. झेड-रोटेशन असे आहे जेव्हा आगाऊ आपण कोणते रेषाखंड प्रथम प्रस्तुत केले पाहिजेत हे आपण शोधून काढता. तथापि आपले संपूर्ण मॉडेल एकसारखेच रंग आहे तोपर्यंत आपण यापासून दूर जाऊ शकता, कारण प्रथम जे प्रस्तुत केले जात आहे आणि जे अंतिम प्रस्तुत केले गेले आहे ते फरक आपण कधीही सांगू शकणार नाही.

म्हणून जसे आपण पाहू शकता की तेथे निश्चितपणे अशी ठिकाणे आहेत जिथे आपण अद्याप हे साधे 3 डी इंजिन घेऊ शकता परंतु मुख्य म्हणजे ती चांगली कामगिरी करणे. म्हणून जेव्हा आपण प्रयोग करता तेव्हा KISS नियम लक्षात ठेवा आणि आपण चांगले व्हाल.

आणि 2012 मध्ये आपणास हॉलिवूडचे काय करायचे आहे हे पहायचे असल्यास, सर्वोत्कृष्ट 3 डी चित्रपट पहा.

पोर्टलवर लोकप्रिय
संवेदनांना हलविण्यासाठी 20 सुपर-कूल डिझाइन कार्यालये
पुढे वाचा

संवेदनांना हलविण्यासाठी 20 सुपर-कूल डिझाइन कार्यालये

असे दिसते की डिझाइन कार्यालये आमच्या आयुष्याचा संबंधित भाग असल्याने बराच काळ गेला होता. जवळजवळ अनन्य रिमोट कामकाजाच्या या विचित्र वेळासह, आमची गृह कार्यालये आमच्या आयुष्यात सांप्रदायिक कामाच्या जागी ज...
एंग्युलरजेएस वापरून लाइव्ह मॉकअप तयार करा
पुढे वाचा

एंग्युलरजेएस वापरून लाइव्ह मॉकअप तयार करा

वेब डिझायनरचे काम केवळ वेबसाइट्स सुंदर बनविणे नाही. त्यांना माहितीचा प्रवाह आणि वेब अनुप्रयोग वापरण्यास सुलभ कसे करावे याबद्दल विचार करावा लागतो. बर्‍याचदा, ते एक मॉकअप तयार करण्यासाठी इनव्हीशन किंवा ...
स्वत: ला अधिक रोजगार करण्यायोग्य बनविण्यासाठी 10 डी आणि एडी टिपा
पुढे वाचा

स्वत: ला अधिक रोजगार करण्यायोग्य बनविण्यासाठी 10 डी आणि एडी टिपा

मालक वीज शोधतात. त्यांना शिकण्याची दुरवस्था, नवीन गोष्टी तयार करण्याची इच्छा आणि एखाद्या प्रकारे आपली ऊर्जा हस्तांतरित करण्याची क्षमता - आपल्या व्यक्तिमत्त्वातून, आपल्या कार्याद्वारे आणि इतर गोष्टी बघ...