ব্রাউজারে মাউসলুক কীভাবে প্রয়োগ করবেন?

Question

আমি বর্তমানে ওয়েবজিএল ব্যবহার করে ব্রাউজারে একটি 3 ডি প্রথম ব্যক্তি শ্যুটার গেম তৈরি করছি game আমি কীভাবে এই জাতীয় গেমটির জন্য মাউস লুক / ফ্রি লুক বাস্তবায়ন করব ?

Comments

ফার্স্ট পার্সন কন্ট্রোল ক্লাসের THREE.js এর প্রয়োগটি দেখুন । খেলোয়াড়ের চারপাশে নিখরচায় দেখার জন্য আপনাকে পয়েন্টারটি লকও করতে হতে পারে। এটি চেষ্টা করুন: পয়েন্টার লক । দুর্ভাগ্যক্রমে এটি অপেরা এবং আইই তে প্রয়োগ করা হয়নি তবে ওয়েবজিএল সেগুলি ব্রাউজারগুলিতে প্রয়োগ করা হয়নি।

— সিজমন ওয়েগনাস্কি

Answer 1

মাউসলুক এখন ডাব্লু 3 সি পয়েন্টার লক নির্দিষ্টকরণের মাধ্যমে ক্রোম এবং ফায়ারফক্সে সমর্থিত supported মূলত:

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;

একটি ভাল টিউটোরিয়াল নিবন্ধটি হ'ল এইচটিএমএল 5 রকসে পয়েন্টার লক এবং প্রথম ব্যক্তি শ্যুটার নিয়ন্ত্রণ ।

Comments

বাগটি অবশ্যই ঠিক করতে হবে, কারণ এই ডেমোটি এখন ফায়ারফক্সে কাজ করে: mdn.github.io/pointer-lock-demo আপনি যদি আপনার মন্তব্য আপডেট করেন তবে আমি আপনাকে একটি 'আপ' দেব

— xaxxon

Answer 2

mousemoveইভেন্টগুলি ক্যাপচার করুন screenXএবং screenYক্যামেরার অবস্থান আপডেট করার জন্য ইভেন্ট অবজেক্টের বৈশিষ্ট্য এবং বৈশিষ্ট্যগুলি ব্যবহার করুন ( চলাচলের পরিমাণ পাওয়ার জন্য ডেল্টাটি সর্বশেষে screenXএবং screenYঅবস্থানের জন্য ব্যবহার করুন )।

যদি আপনার কাছে কিছুটা দৃশ্যের চিত্র থাকে তবে আপনি নীচের মতো নোড-সেটআপ তৈরি করতে পারেন:

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

এক্স-এক্সিসে গতিবেগ ইয়াউনোডকে ঘোরায় এবং ওয়াই-অ্যাক্সিসে চলাচল পিচনোডকে ঘোরায়। প্লেয়ারটি সরে গেলে ক্যামেরানোড সরানো হবে।

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];
  };

একই ক্যামেরা মুভমেন্ট কোড

ক্যামেরা ঘূর্ণন পরিচালনা করার জন্য এখানে কিছু নমুনা কোড's এক্স বা ওয়াই নির্দেশে মাউসটি যে পিক্সেলটি সরিয়ে নিয়েছে তা দিয়ে ক্যামেরাটিকে অনেকগুলি ডিগ্রি ঘোরান।

 /**
   * 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]);
  }

পরে, আপনি যখন সত্যই আপনার বিশ্বকে রেন্ডার করতে যান, কেবল আপনার ক্যামেরা থেকে মডেল-ভিউ ম্যাট্রিক্স উত্পন্ন করুন। (ক্যামেরার অবস্থান, ইয়া, পিচ এবং ভেক্টরগুলিতে রূপান্তর করা আপনি গ্লুলুকএটে যেতে পারেন)) এবং আপনাকে যেতে হবে ভাল।