ब्राउज़र में मूसलूक कैसे लागू करें?

Question

मैं वर्तमान में WebGL का उपयोग करके ब्राउज़र में एक 3D प्रथम-व्यक्ति शूटर गेम बना रहा हूं। मैं इस तरह के खेल के लिए मूसलूक / फ्री लुक कैसे लागू करूंगा ?

Comments

FirstPersonControls वर्ग के THREE.js के कार्यान्वयन को देखें । खिलाड़ी के चारों ओर स्वतंत्र रूप से देखने के लिए आपको सूचक को लॉक करने की भी आवश्यकता हो सकती है। इसे आज़माएं: पॉइंटर लॉक । दुर्भाग्य से यह ओपेरा और IE में लागू नहीं है, लेकिन WebGL उन ब्राउज़रों में भी लागू नहीं होता है।

— सिजमोन वायगेंस्की

Answer 1

W3C पॉइंटर लॉक स्पेसिफिकेशन के माध्यम से अब Mouselook क्रोम और फ़ायरफ़ॉक्स में समर्थित है । अनिवार्य रूप से:

document.onmousemove = function (e) {
  document.body.innerHTML = "<div>dx: " + 
    (e.movementX || e.mozMovementX || e.webkitMovementX || 0);
} 

document.body.onclick = document.body.requestPointerLock ||
                        document.body.mozRequestPointerLock ||
                        document.body.webkitRequestPointerLock;

एक अच्छा ट्यूटोरियल लेख पॉइंटर लॉक और HTML5Rocks पर पहले व्यक्ति शूटर नियंत्रण है।

Comments

बग को ठीक किया जाना चाहिए, क्योंकि यह डेमो अब फ़ायरफ़ॉक्स में काम करता है: mdn.github.io/pointer-lock-demo यदि आप अपनी टिप्पणी अपडेट करते हैं, तो मैं आपको एक 'अप'

— दूंगा

Answer 2

mousemoveघटनाओं को कैप्चर करें screenXऔर screenYकैमरा स्थिति को अपडेट करने के लिए इवेंट ऑब्जेक्ट के गुणों का उपयोग करें ( आंदोलन की मात्रा प्राप्त करने के लिए अंतिम screenXऔर screenYस्थिति के डेल्टा का उपयोग करें )।

यदि आपके पास कुछ दृश्य दृश्य हैं , तो आप निम्न की तरह नोड-सेटअप बना सकते हैं:

CameraNode (Scene Node)
 |
 +- YawNode (Scene Node)
     |
     +- PitchNode (Scene Node)
         |
         +- Camera (actual Camera Object)

एक्स-एक्सिस में मूवमेंट यवनोड को घुमाता है और वाई-एक्सिस में मूवमेंट पिचनेकोड को घुमाता है। खिलाड़ी के हिलने पर CameraNode स्थानांतरित हो जाएगा।

Answer 3

यह काफी सरल है, और बस दो चीजें लेता है।

1. माउस मूव इवेंट के लिए एक इवेंट हैंडलर।
2. एक कैमरा ऑब्जेक्ट आपके मूल मॉडल-व्यू ट्रांसफॉर्मेशन का प्रतिनिधित्व करता है

नमूना घटना कोड

ईवेंट हैंडलिंग करने के लिए कुछ नमूना स्रोत कोड यहां दिए गए हैं। सिस्टम मॉड्यूल (जो सभी गेम को संभालता है <-> ब्राउज़र इंटरैक्शन) दो चर का ट्रैक रखता है: lastMousePositionऔर lastMouseDelta।

माउस के साथ कैमरे को ट्रैक करने के लिए, आपको बस आवश्यकता lastMouseDeltaहै कि आप फ्रेम-टू-फ्रेम को घुमाने के लिए कितने डिग्री का पता लगाएंगे।

  var canvas = /* WebGL rendering context */
  canvas.onmousedown = function (event) { me.handleMouseDown(event); };
  canvas.onmouseup   = function (event) { me.handleMouseUp(event);   };
  canvas.onmousemove = function (event) { me.handleMouseMove(event); };

  // snip

  engine.SystemModule.prototype.handleMouseMove = function(event) {
    this.lastMouseDelta = [event.clientX - this.lastMousePosition[0],
                           event.clientY - this.lastMousePosition[1]];
    this.lastMousePosition = [event.clientX, event.clientY];
  };

वही कैमरा आंदोलन कोड

कैमरा रोटेशन को संभालने के लिए यहां कुछ सैंपल कोड दिए गए हैं। पिक्सल्स की संख्या को देखते हुए माउस X या Y दिशा में चला गया है, कैमरा को कई डिग्री घुमाएँ।

 /**
   * degrees/pixel
   * @const
   */
  var cameraMouseRotation = 0.5;


  // Mouse movement for camera angle.
  if (sys.isMouseDown()) {
    var positionChange = sys.getLastMousePositionDelta();
    camera.rotateYDegs(cameraMouseRotation * positionChange[0]);
    camera.rotateXDegs(-cameraMouseRotation * positionChange[1]);
  }

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