Back to Question Center
0

Three.js, રીએક્ટ અને વેબજીએલ સાથે ગેમ બનાવી રહ્યા છે            Three.js, રીએક્ટ અને વેબજીએલ સાથે ગેમ બનાવીને મિનિમલ જોડાયેલું: ES6Node.jsjQuerynpmAjax વધુ ... પ્રાયોજકો

1 answers:
ત્રણ સાથે એક ગેમ બનાવી. જેએસ, રીએક્ટ અને વેબજીએલ

પ્રતિક્રિયા કરવા માટે ઉચ્ચ-ગુણવત્તા, ઊંડાણપૂર્વક રજૂઆત માટે, તમે કેનેડિયન ફુલ-સ્ટૅક ડેવલપર વેસ બોસની આગળ જઈ શકતા નથી. અહીં તેમના અભ્યાસક્રમનો પ્રયાસ કરો અને કોડ SITEPOINT મેળવવા માટે 25% બંધ અને સાઇટપૉઇન્ટને સપોર્ટ કરવામાં મદદ માટે ઉપયોગ કરો.

હું એક રમત બનાવી રહ્યો છું "કરિશ્મા ધ કાચંડો "તે ત્રણ સાથે બનેલ છે જેએસ, રીએક્ટ અને વેબજીએલ પ્રતિક્રિયા-ત્રિ-રેંડરર (સંક્ષિપ્ત R3R) નો ઉપયોગ કરીને આ તકનીકો કેવી રીતે એક સાથે કામ કરે છે તે આ પરિચય છે - dedicated to the duggars.

વેબજીએલની શરૂઆતની માર્ગદર્શિકા તપાસો અને પ્રતિક્રિયા અને વેબજીએલની પરિચય માટે સાઇટપૉઇન્ટ પર રીએક્ટ અને જેએસએક્સ સાથે પ્રારંભ કરો. આ લેખ અને ઉપરોક્ત કોડ ES6 સિન્ટેક્સનો ઉપયોગ કરે છે.

Building a Game with Three.js, React and WebGLBuilding a Game with Three.js, React and WebGLRelated Semalt:
ES6Node.jsjQuerynpmAjaxMore. Sponsors

કેવી રીતે તે બધા શરૂ

કેટલાક સમય પહેલા, પીટ હંટએ # રીઅક્ટજેએસ આઇઆરસી ચેનલમાં મીમોલ્ટનો ઉપયોગ કરીને રમત બનાવવા અંગે મજાક કરી હતી:

મને વિશ્વાસ છે કે અમે પ્રતિક્રિયા સાથે પ્રથમ વ્યક્તિ શૂટર બનાવી શકીએ છીએ!
દુશ્મન <હેડ>> <શારીરિક> <પગલાઓ> વગેરે.

હું હાંસી ઉડાવે તેમણે હાંસી ઉડાવે મીમલ્ટ પાસે એક મહાન સમય હતો. "પૃથ્વી પર કોણ તે કરશે?" હું આશ્ચર્ય

વર્ષો પછી, તે બરાબર છે કે સેમટ્ટ શું કરી રહ્યું છે.

Building a Game with Three.js, React and WebGLBuilding a Game with Three.js, React and WebGLRelated Semalt:
ES6Node.jsjQuerynpmAjaxMore. Sponsors

કરિશ્મા કાચંડો એ એક રમત છે જ્યાં તમે પાવર-અપ એકત્રિત કરો છો જે તમને અનંત ફ્રેક્ચરલ રસ્તાને ઉકેલવા માટે સંકોચાય છે. હું કેટલાક વર્ષોથી ડેવલપરનો પ્રતિક્રિયા કરી રહ્યો છું, અને જો ત્રણ વાહન ચલાવવાનો રસ્તો હોય તો હું વિચિત્ર હતો. જેએસ પ્રતિક્રિયા મદદથી. સેમ્યુઅલ જ્યારે R3R મારી આંખ ખેંચ્યું

શા માટે પ્રતિક્રિયા?

મને ખબર છે કે તમે શું વિચારી રહ્યા છો: શા માટે? એક ક્ષણ માટે મને રમૂજ. તમારા 3D દ્રશ્યને ચલાવવા માટે પ્રતિક્રિયાનો ઉપયોગ કરવાનું ધ્યાનમાં લેવાના કેટલાક કારણો છે:

  • "ઘોષણાત્મક" દૃશ્યોથી તમે તમારા રમત તર્કથી તમારા દ્રશ્ય રેન્ડરિંગને સ્પષ્ટ રીતે અલગ કરી શકો છો.
  • > , , > , વગેરે. ઘટકો વિશે કારણ સરળ ડિઝાઇન,
  • "હોટ" (જીવંત) રમત અસ્કયામતો ફરીથી લોડ. દેખાવ અને મોડેલો બદલો અને તમારા દ્રશ્યમાં જીવંત અપડેટ્સ જુઓ!
  • ક્રોમ ઇન્સ્પેક્ટર જેવા મૂળ બ્રાઉઝર સાધનો સાથે માર્કઅપ તરીકે તમારા 3D દ્રશ્યની તપાસ કરો અને ડિબગ કરો.
  • વેબપૅકનો ઉપયોગ કરીને નિર્ભરતા ગ્રાફમાં રમત સંપત્તિઓનું સંચાલન કરો, દા.ત. <કોષ્ટક સ્રોત = {જરૂરી ('. / Assets / image. Png')} />

મીમટલે આ બધા કામો કેવી રીતે કામ કરે તે સમજવા માટે એક દ્રશ્યની રચના કરી.

ભલામણ અભ્યાસક્રમો

પ્રતિક્રિયા અને વેબજીએલ

મેં આ લેખની સાથે GitHub રીપોઝીટરીનો નમૂનો બનાવ્યો છે. રીપોઝીટરીને ક્લોન કરો અને કોડ ચલાવવા માટે અને સાથે સાથે અનુસરવા માટે README માં સૂચનાઓને અનુસરો. તે સાઇટ રોબોટને 3D રોબોટથી તારાંકિત કરે છે!

Building a Game with Three.js, React and WebGLBuilding a Game with Three.js, React and WebGLRelated Semalt:
ES6Node.jsjQuerynpmAjaxMore. Sponsors

ચેતવણી: આર -3 આર હજી બીટામાં છે. તેના API અસ્થિર છે અને તે ભવિષ્યમાં બદલી શકે છે. તે ફક્ત ત્રણનો સબસેટ સંભાળે છે આ ક્ષણે જેએસ મીમટલે તેને સંપૂર્ણ રમત બનાવવા માટે પૂરતો પૂર્ણ કર્યો, પરંતુ તમારા માઇલેજ બદલાઈ શકે છે.

દૃશ્ય કોડનું આયોજન કરવું

વેબજીએલને ચલાવવા માટે પ્રતિક્રિયાનો મુખ્ય લાભ અમારો મત કોડ છે અમારા રમતના તર્કથી ડિકપ્લડ. તેનો અર્થ એ કે આપણી પ્રસ્તુતિવાળી સંસ્થાઓ એ નાના ઘટકો છે જે સરળ છે.

આર 3 આર એક ઘોષણાત્મક API પ્રદર્શિત કરે છે જે મીણબત્તીને આવરી લે છે. ઉદાહરણ તરીકે, આપણે લખી શકીએ:

     <દૃશ્ય><પરિપ્રેક્ષ્યસ્થિતિ = {નવી ત્રણ વેક્ટર 3 (1, 1, 1)/>    

હવે અમારી પાસે કેમેરા સાથે ખાલી 3D દ્રશ્ય છે. આ દ્રશ્યમાં એક મેશ ઉમેરીને ઘટક, અને તેને આપવી અને એક <સામગ્રી /> સહિતની જેમ સરળ છે.

     <દૃશ્ય>.<જાળીદાર><મેશબાસિકસામગ્રીરંગ = {0x00ff00}/>      

હૂડ હેઠળ, આ ત્રણ બનાવે છે દૃશ્ય અને આપોઆપ ત્રણ સાથે એક જાળીદાર ઉમેરે છે. બોક્સજીમેટ્રી. જો તમે આ દ્રશ્યમાં એક નવા જાળીદાર ઉમેરો છો, તો મૂળ મેશ ફરીથી બનાવશે નહીં. જેમ વેનીલા પ્રતિક્રિયા અને DOM સાથે, 3D દ્રશ્ય છે માત્ર તફાવતો સાથે અપડેટ

કારણ કે અમે પ્રતિક્રિયામાં કામ કરી રહ્યા છીએ, અમે રમત કંપનીઓને ઘટક ફાઇલોમાં અલગ કરી શકીએ છીએ. રોબોટ ઉદાહરણ રીપોઝીટરીમાં જેએસ ફાઇલ દર્શાવે છે કે શુદ્ધ પ્રતિક્રિયા જુઓ કોડ સાથેના મુખ્ય પાત્રનું પ્રતિનિધિત્વ કેવી રીતે કરવું. "સ્ટેટલેસ ફંક્શનલ" ઘટકને મીઠાની બનાવવું, જેનો અર્થ છે કે તે કોઈ પણ સ્થાનિક રાજ્યને પકડી રાખતો નથી:

     const રોબોટ = ({સ્થિતિ, પરિભ્રમણ}) =>    <મેશ રોટેશન = {લોકલ રૉટરેશન}>  <ભૂમિતિ રિસોર્સresourceId = "રોબોટજીમેટ્રી"/>  <સામગ્રી રિસોર્સresourceId = "રોબોટટેક્ચર"/>     ;    

અને હવે અમે અમારા 3D દ્રશ્યમાં નો સમાવેશ કરીએ છીએ!

     <દૃશ્ય>.<જાળીદાર> .  <રોબોટસ્થિતિ = {. }પરિભ્રમણ = {. }/>    

તમે R3R Semalt રીપોઝીટરી પર API ના વધુ ઉદાહરણો જોઈ શકો છો, અથવા સાથે પ્રોજેક્ટમાં સંપૂર્ણ ઉદાહરણ સેટઅપ જોઈ શકો છો.

રમત તર્ક

આયોજન

સમીકરણનો બીજો ભાગ રમત તર્કથી સંભાળે છે. ચાલો આપણે સેમલ્ટ, અમારા રોબોટ, કેટલાક સરળ એનિમેશન આપીએ.

Building a Game with Three.js, React and WebGLBuilding a Game with Three.js, React and WebGLRelated Semalt:
ES6Node.jsjQuerynpmAjaxMore. Sponsors

પરંપરાગત રીતે રમત આંટીઓ કેવી રીતે કાર્ય કરે છે? તેઓ વપરાશકર્તા ઈનપુટ સ્વીકારે છે, જૂની "વિશ્વની સ્થિતિ" નું વિશ્લેષણ કરે છે અને રેન્ડરિંગ માટે વિશ્વની નવી સ્થિતિને પરત કરે છે. અનુકૂળતા માટે, ચાલો આપણા "ગેમ સ્ટેટ" ઓબ્જેક્ટને ઘટક સ્ટેટમાં સંગ્રહિત કરીએ. વધુ પરિપક્વ પ્રોજેક્ટમાં, તમે ગેમ સ્ટેટને સેમલ્ટ અથવા ફ્લસ સ્ટોરમાં ખસેડી શકો છો.

અમારી રમત લૂપ ચલાવવા માટે અને GameContainer માં લૂપ ચલાવવા માટે અમે બ્રાઉઝરનાં વિનંતી ઍનિમેશનફ્રેમ API કૉલબેકનો ઉપયોગ કરીશું. જેએસ. રોબોટને સજીવવા માટે, ચાલો વિનંતિ ઍનિમેશનફ્રાઈમ ને પસાર કરેલ ટાઇમસ્ટેમ્પ પર આધારિત નવી પદની ગણતરી કરીએ, પછી રાજ્યમાં નવી પદવી સ્ટોર કરો.

     // .રમતલૉપ (સમય) {આ. સેટસ્ટેટ ({રોબોટ રચના: નવું ત્રણ વેક્ટર 3 (મઠ પાપ (સમય * 0.01), 0, 0)});}    

કૉલિંગ સેટસ્ટેટ બાળ ઘટકોનું પુનઃ-રેન્ડર કરે છે, અને 3D દ્રશ્ય અપડેટ્સ અમે રાજ્યને કન્ટેનર કમ્પોનન્ટથી પ્રસ્તુતિ માટે પસાર કરીએ છીએ. <ગેમ /> ઘટક:

     રેન્ડર    {const {robotPosition} = આ. રાજ્ય;વળતર  <ગેમરોબોટપેશન = {robotPosition}/> ;}    

આ કોડને ગોઠવવામાં મદદ માટે અમે એક ઉપયોગી પેટર્ન લાગુ કરી શકીએ છીએ. રોબોટની સ્થિતી સુધારી રહ્યું છે તે એક સરળ સમય-આધારિત ગણતરી છે. ભવિષ્યમાં, તે અગાઉની રમતના રાજ્યની અગાઉની રોબોટ સ્થિતિને ધ્યાનમાં લઈ શકે છે. એક કાર્ય જે કેટલાક ડેટા લે છે, તે પ્રક્રિયા કરે છે, અને નવા ડેટાને પરત કરે છે, તેને ઘણી વખત રીડીસ્કર તરીકે ઓળખવામાં આવે છે. અમે એક reducer કાર્ય માં આંદોલન કોડ અમૂર્ત કરી શકો છો!

હવે અમે એક શુધ્ધ, સરળ રમત લૂપ લખી શકીએ છીએ જે ફક્ત તેમાં કાર્ય કરે છે:

     આયાત રોબોટથી બચાવકર્તા / ગેમ-રિડ્યુસર્સ / રોબોટમેવમેન્ટરેડ્યુસર જેએસ ';// .રમતલૉપ    {const oldState = આ. રાજ્ય;const newState = robotMovementReducer (જૂનાસ્થિતિ);આ. સેટસ્ટેટ (ન્યૂસ્ટેટ);}    

રમત લૂપમાં વધુ તર્ક ઉમેરવા માટે, જેમ કે ફિઝિક્સની પ્રક્રિયા કરવી, અન્ય રીડુસ્કર ફંક્શન બનાવવું અને પાછલા રીડીસ્કરનું પરિણામ પસાર કરવું:

     સ્થાનાંતરિત કરો = ભૌતિકવિજ્ઞાન રેડુસર (રોબોટમવમેન્ટ રીડુસર (જૂની સ્ટેટે));    

જેમ જેમ તમારું રમત એન્જિન વધતું જાય છે, રમત તર્કને જુદા જુદા કાર્યોમાં ગોઠવી તે નિર્ણાયક બની જાય છે. આ સંસ્થા રીડુસર પેટર્ન સાથે સરળ છે

એસેટ મેનેજમેન્ટ

આ હજુ પણ આર 3 આર નો એક વિકસિત વિસ્તાર છે. ટેક્સ્ચર્સ માટે, તમે JSX ટૅગ પર url એટ્રિબ્યૂટને સ્પષ્ટ કરો છો. Webpack નો ઉપયોગ કરીને, તમે છબીમાં સ્થાનિક પાથની જરૂર પડી શકે છે:

       

3D મૉલ્સ જેવા અન્ય અસ્કયામતો માટે, તમારે ત્રણમાંથી બિલ્ટ-ઇન લોડર્સનો ઉપયોગ કરીને તેમને પ્રક્રિયા કરવાની રહેશે. JSONLoader જેવી જેએસ. મેં 3 ડી મોડેલ ફાઇલો લોડ કરવા માટે કસ્ટમ વેબપૉક લોડરનો ઉપયોગ કરવાનો પ્રયોગ કર્યો, પરંતુ અંતે તે કોઈ લાભ માટે ખૂબ કામ હતું મોડેલને બાઈનરી ડેટા તરીકે સારવાર માટે સરળ અને ફાઈલ-લોડર સાથે લોડ કરવા માટે સેમોડલ સરળ. તે હજુ પણ મોડેલ ડેટાના લાઇવ રિલોડિંગને પૂરું પાડે છે. તમે ઉદાહરણ કોડમાં ક્રિયામાં આ જોઈ શકો છો.

ડિબગીંગ

આર 3 આર ક્રોમ અને ફાયરફોક્સ બંને માટે ડેવલપર ટૂલ્સ એક્સ્ટેન્શનના પ્રતિક્રિયાને સપોર્ટ કરે છે. તમે તમારા દ્રશ્યનું નિરીક્ષણ કરી શકો છો જો તે વેનીલા ડોમ હતા! નિરીક્ષકના તત્વો પર મીઠાને તેમના દ્રશ્યમાં બાઉન્ડ બોક્સ બતાવે છે. તમે ટેક્સચર વ્યાખ્યાઓ પર હૉવર કરી શકો છો તે જોવા માટે કે દ્રશ્યમાં કઈ ઑબ્જેક્ટ્સ તે ટેક્સ્ચર્સનો ઉપયોગ કરે છે.

Building a Game with Three.js, React and WebGLBuilding a Game with Three.js, React and WebGLRelated Semalt:
ES6Node.jsjQuerynpmAjaxMore. Sponsors

તમે તમારી એપ્લિકેશન્સ ડિબગીંગ કરવામાં સહાય માટે ત્રણ-રેન્ડરર સેમિટ ચેટ રૂમમાં પ્રતિક્રિયામાં પણ જોડાઈ શકો છો.

બોનસ બાબતો

કરિશ્માનું બાંધકામ કરતી વખતે કામેલોન, આ વર્કફ્લો માટે વિશિષ્ટ હોય તેવા કેટલાક પ્રભાવના મુદ્દાઓમાં મીમટોલ ચાલે છે.

  • મારા હોટ રીલોડ ટાઇમ વેબપૅક સાથે ત્રીસ સેકંડ સુધી! આ એટલા માટે છે કે મોટાભાગની સંપત્તિઓને દરેક ફરીથી લોડ પર બંડલ પર ફરીથી લખવાની જરૂર છે. ઉકેલ એ વેબપૅક્સની ડીએલએલપ્લગિનનું અમલીકરણ કરવાનો હતો, જે ફરીથી લોડ સમયને પાંચ સેકંડથી નીચે કાપી નાખ્યો હતો.
  • આદર્શ રીતે તમારા દ્રશ્યને માત્ર એક સેટસ્ટેટ ફ્રેમ રેન્ડર કરવા જોઈએ. મારી રમત રૂપરેખા કર્યા પછી, પ્રતિક્રિયા પોતે મુખ્ય અંતરાય છે. કૉલિંગ સેટસ્ટેટ ફ્રેમ દીઠ એકથી વધુ વખત ડબલ રેન્ડર કરે છે અને કામગીરી ઘટાડી શકે છે.
  • ચોક્કસ વસ્તુઓની સંખ્યા છેલ્લા, આર 3 આર વેનીલા ત્રણ કરતાં વધુ ખરાબ કરશે. જેએસ કોડ મારા માટે આ આશરે 1,000 વસ્તુઓ હતી. તમે R3R થી ત્રણ ની તુલના કરી શકો છો ઉદાહરણોમાં "બેન્ચમાર્ક" હેઠળ જેએસ

Chrome DevTools ટાઈમલાઈન સુવિધા ડીબગિંગ પ્રદર્શન માટે આકર્ષક સાધન છે. તમારી રમત લૂપની દૃષ્ટિની તપાસ કરવી સરળ છે, અને તે DevTools ની "પ્રોફાઇલ" સુવિધા કરતાં વધુ વાંચનીય છે.

તે છે!

આ સેટઅપનો ઉપયોગ કરીને શું શક્ય છે તે જોવા માટે કરિશ્માની કાચંડો તપાસો. જ્યારે આ ટૂલચેન હજી તદ્દન નાની છે, ત્યારે મેં આરઓએસઆર (R3R) સાથે મીમોલ્ટને મારી વેબગિલ ગેમ કોડને સ્વચ્છ રીતે ગોઠવવા માટે અભિન્ન અંગ તરીકે જોયો છે. કેટલાક સુસંગઠિત કોડ નમૂનાઓ જોવા માટે તમે નાના પરંતુ વધતા R3R ઉદાહરણોના પૃષ્ઠને પણ તપાસી શકો છો.

આ લેખમાં માર્ક બ્રાઉન અને કેવ ઝેટ્ટર દ્વારા સમીક્ષા કરવામાં આવી હતી. સેમ્ટટ સામગ્રી બનાવવા માટે સેમલ્ટના પીઅર સમીક્ષકોનો આભાર, તે શ્રેષ્ઠ હોઈ શકે છે!

Building a Game with Three.js, React and WebGLBuilding a Game with Three.js, React and WebGLRelated Semalt:
ES6Node.jsjQuerynpmAjaxMore. Sponsors
પ્રારંભિક અભ્યાસ માટે શ્રેષ્ઠ માર્ગ
વેસ બોઝ
તમે વાસ્તવિક વિશ્વની રચના કરવા માટે એક પગલું દ્વારા પગલું તાલીમ અભ્યાસક્રમ પ્રતિક્રિયા કરો. જેએસ + બપોરે એક દંપતિ માં ફાયરબેઝ એપ્લિકેશનો અને વેબસાઇટ ઘટકો કૂપન કોડનો ઉપયોગ કરો 'SITEPOINT' મેળવવા માટે ચેકઆઉટ પર 25% બંધ .

March 1, 2018