สร้างเกมฟิสิกส์ WebGL ของคุณเอง

Sep 17, 2025
วิธีการ

โครงการนี้จะถูกแบ่งออกเป็นส่วนต่าง ๆ เราจะให้การแนะนำสั้น ๆ เกี่ยวกับ Heroku แสดงวิธีการใช้ Physijs ด้วย Three.js อธิบายวิธีจัดการเหตุการณ์ซ็อกเก็ตมากกว่า node.js และวิธีที่เราไปเกี่ยวกับการจัดการข้อมูลที่ส่ง

  • 20 ตัวอย่างที่น่าทึ่งของ WebGL ในการดำเนินการ

01. เฮโรคู

Heroku is an easy to use and free to trial node.js web server

Heroku เป็นเว็บเซิร์ฟเวอร์ทดลองใช้งานง่ายต่อการทดลองใช้งานง่ายและฟรี

โครงการนี้จะเป็นเจ้าภาพ เฮอร์โค ซึ่งเป็นแพลตฟอร์มคลาวด์ในการโฮสต์แอปของคุณ มันมีภาษาที่รองรับหลากหลายเช่น Ruby, Java, PHP และ Python เรากำลังจะใช้ node.js.

ลงทะเบียนสำหรับบัญชีและเลือก node.js. สำหรับโครงการนี้เราสามารถใช้เซิร์ฟเวอร์พื้นฐานซึ่งไม่มีค่าใช้จ่าย หลังจากลงทะเบียนคุณจะมาที่แผงควบคุมของคุณที่คุณสามารถสร้างแอปของคุณได้ สิ่งนี้จะสร้างโดเมนย่อยที่ Herokuapp.com

ในฐานะที่เป็นวิธีการใช้งานคุณสามารถเลือกที่จะใช้อินเทอร์เฟซบรรทัดคำสั่ง Heroku (CLI) เพื่อปรับใช้โดยใช้ที่เก็บ GIT ของมันหรือตั้งค่าการเชื่อมต่อถึง GitHub หรือ Dropbox ฉันเลือกที่จะไปกับ CLI; สิ่งนี้จะต้องมีการติดตั้ง แต่ในทางกลับกันคุณจะได้รับเครื่องมือที่เป็นประโยชน์ใหม่ ๆ มากมายซึ่งเป็นหนึ่งในสิ่งเหล่านี้คือการดีบักผ่านเทอร์มินัลของคุณ

สำหรับการตั้งค่าเซิร์ฟเวอร์ของคุณฉันขอแนะนำให้ทำตามขั้นตอน ตามที่อธิบายไว้ที่นี่ .

ในการปรับใช้คุณใช้คำสั่ง git เริ่มต้น แต่ละคนที่คุณใช้จะเรียกเซิร์ฟเวอร์ Build และแอปของคุณจะถูกปรับใช้กับเซิร์ฟเวอร์ Heroku แล้วสามารถดูได้ที่โดเมนย่อยของคุณ

เมื่อปรับใช้รหัสคุณสามารถดูโครงการของคุณได้ที่ [YourProject] .herokuapp.com หากต้องการดูบันทึกใช้คำสั่ง 'Heroku Logs - Tail' ในเทอร์มินัลของคุณ บางสิ่งที่แสดงคือสิ่งที่กำลังรับใช้กับลูกค้า - มันแสดงการเชื่อมต่อซ็อกเก็ตและหากคุณต้องการดีบักรหัสของคุณคุณสามารถใช้คอนโซลได้เพื่อส่งออกไปยังเทอร์มินัล

02. สร้างฉากฟิสิกส์

Tap your screen or hit the spacebar to bounce the table up

แตะที่หน้าจอของคุณหรือกด SPACEBAR เพื่อตีกลับตาราง

เราจะใช้ความนิยมมากที่สุด webgl กรอบ, สาม.js ในการสร้างฉาก 3 มิติที่มีวัตถุที่เราจะแนบฟิสิกส์ ห้องสมุดฟิสิกส์ของการเลือกคือ สรวงเคราะห์ ปลั๊กอินสำหรับสาม.js ในฐานะที่เป็นส่วนขยายของ Three.js, Physijs ใช้การทำโค้ดการเข้ารหัสเดียวกันทำให้ใช้งานง่ายขึ้นหากคุณคุ้นเคยกับ Three.js

สิ่งแรกคือโต๊ะพูล เรากำลังใช้ Physijs HeightfieldMesh เพราะตาข่ายนี้จะอ่านความสูงจากเครื่องบิน ดังนั้นโดยทั่วไปจะล้อมรอบวัตถุ Three.js 

 Var Tablegeometry = New Three.PlaneGeometry (650, 500, 10, 10);
var tablematerial = physijs.creatematerial (
  ใหม่สาม.Meshphongmaterial ({
    shininess: 1,
    สี: 0xB00000,
    Emissive: 0x111111,
    ด้านข้าง: สาม .. ดักฟัง
  }),
  .8, // แรงเสียดทาน
  .4 // การซ่อมแซม
);
ตาราง = New Physijs.HeightFieldMesh (Tablegeometry, Tablematerial, 0);

ดังนั้น HeightfieldMesh ต้องใช้รูปทรงเรขาคณิต แต่ยังเป็นวัสดุทางกายภาพ เรากำลังเพิ่มคุณสมบัติใหม่สองประการให้กับวัสดุ Three.js นั่นคือ แรงเสียดทาน และ การซ่อมแซม ตัวแปร. แรงเสียดทานคือความต้านทานวัตถุที่ทำและการชดใช้ความเสียหายหมายถึง 'bounciness' ตัวแปรทั้งสองนี้จะกำหนดวิธีที่แท้จริงของฟิสิกส์จะรู้สึกเหมือนอยู่ในฉากของคุณ

สำหรับลูกสระว่ายน้ำที่สร้างขึ้นเราไม่ต้องการที่จะทำให้พวกเขาเด้งเกินไปดังนั้นให้อยู่ในระดับต่ำ เช่นเดียวกับ Three.js, Physijs ยังมีรูปทรงพื้นฐานที่จะไปรอบ ๆ ตาข่ายเดิม Spheremesh ห่อ รูปทรงกลม จะให้ฟิสิกส์ลูก เมื่อเริ่มต้นฉากเราโทร Buildball (8) ซึ่งจะทำให้เกิดฟังก์ชั่นต่อไปนี้ ... 

 var buildball = ฟังก์ชั่น (หมายเลข) {
 var balltexture = ใหม่สาม.texture ();
 var ballindex = ball.length;

เพิ่มพื้นผิว: 

 balltexture = three.imageutils.loadtexture ('พื้นผิว /' + numberball + '_ball.jpg', ฟังก์ชั่น (ภาพ) {
     balltexture.image = ภาพ;
  });

สร้างวัสดุที่เปิดใช้งานของสรวงวิทยาด้วยแรงเสียดทานที่ดีและคุณสมบัติการตีกลับ: 

var ballmaterial = physijs.creatematerial (
    ใหม่สาม.Meshlambertmaterial ({
      แผนที่: baltexture,
      shininess: 10,
      สี: 0xdddddd,
      Emissive: 0x111111,
      Side: Three.frontside
    }),
    .6, // แรงเสียดทาน
    .5 // การซ่อมแซม
  );

การทำแผนที่พื้นผิว: 

 ballmaterial.map.wraps = ballmaterial.map.wrapt = three.repeatwrapping;
  ballmaterial.map.repeat.set (1, 1);
 สร้าง Spheremesh ที่เปิดใช้งานฟิสิกส์และเริ่มต้นในอากาศ:

  Ball [Ballindex] = ใหม่ Physijs.spheremesh (
    ใหม่สาม.SphereGeometry (25, 25, 25),
    ballmaterial
    100
  );
  // y ชดเชยไปที่ด้านบนของผืนผ้าใบ
  ลูกบอล [ballindex] .position.y = 500;
  // เงา
  ลูกบอล [Ballindex] .receiveshadow = true;
  บอล [Ballindex]. castshadow = true;
  // เพิ่มลูกบอลลงบนผืนผ้าใบของคุณ
  Scene.add (Ball [Ballindex]);
};

เรากำลังเพิ่มพื้นผิวจากไฟล์. jpg สร้างวัสดุและใช้งานสำหรับ Spheremesh ในการสร้างวัตถุซึ่งเราจะวางแนวตั้งไปที่ด้านบนดังนั้นจึงลดลงในหน้าจอ

03. การเชื่อมต่อซ็อกเก็ต

The key goal of our game is emulating the physical movements to the screen

เป้าหมายสำคัญของเกมของเรากำลังเลียนแบบการเคลื่อนไหวทางกายภาพไปยังหน้าจอ

สำหรับการสื่อสารระหว่างเซิร์ฟเวอร์กับไคลเอนต์เราจะใช้ Socket.io . นี่เป็นหนึ่งในไลบรารีที่น่าเชื่อถือที่สุดสำหรับ node.js. มันสร้างขึ้นที่ด้านบนของ API WebSockets

ตอนนี้ฟิสิกส์เปิดใช้งานสำหรับตาข่ายเราต้องการข้อมูลผู้ใช้เพื่อทำให้เกมโต้ตอบ อุปกรณ์อินพุตที่เราใช้คืออุปกรณ์มือถือ เบราว์เซอร์มือถือเป็นตัวควบคุมที่จะให้ข้อมูล จาก accelerometer และ gyroscope ไปยังเดสก์ท็อปที่คุณจะเห็นเกม

ก่อนอื่นการเชื่อมต่อระหว่างเบราว์เซอร์มือถือและเบราว์เซอร์เดสก์ท็อปจะต้องทำ ทุกครั้งที่เบราว์เซอร์เชื่อมต่อกับแอป node.js ของเราเราต้องทำการเชื่อมต่อใหม่ การเชื่อมต่อฝั่งไคลเอ็นต์ถูกตั้งค่าโดยใช้สิ่งต่อไปนี้: 

 Var Socket = io.connect ();

สำหรับการส่งข้อความที่คุณใช้ ปล่อย ฟังก์ชั่น: 

 Socket.emit ('ชื่อเหตุการณ์', ข้อมูล);

และสำหรับการรับคุณใช้ .บน() ฟังก์ชั่น: 

 socket.on ('ชื่อเหตุการณ์', ฟังก์ชั่น () {});

03.1 การตั้งค่าเกมเดสก์ท็อป

หากเราอยู่บนเดสก์ท็อปเราจะส่ง Sockets อุปกรณ์ของเราปล่อยให้เซิร์ฟเวอร์ของเราเดสก์ท็อปเป็นเกมที่ใช้บรรทัดต่อไปนี้: 

 Var Socket = io.connect ();
// เมื่อข้อความต้อนรับเริ่มต้นตอบกลับด้วยประเภทอุปกรณ์ 'เกม'
Socket.on ('ยินดีต้อนรับ' ฟังก์ชั่น (ข้อมูล) {
  Socket.emit ("อุปกรณ์", {"ประเภท": "เกม"};
});

เซิร์ฟเวอร์จะส่งคืนรหัสคีย์ / เกมที่ไม่เหมือนใครให้เรา สร้างโดย crypto . สิ่งนี้จะปรากฏขึ้นกับเดสก์ท็อป 

 // สร้างรหัส
var gamecode = crypto.randombytes (3). tostring (hex ') substring (0, 4). stolowercase ();
// มั่นใจในเอกลักษณ์
ในขณะที่ (Gamecode ใน Socketcodes) {
  GameCode = crypto.randombytes (3). tostring ('hex') substring (0, 4). tolowercase ();
}
// เก็บรหัสเกม - & gt; สมาคมซ็อกเก็ต
SocketCodes [gamecode] = io.sockets.sockets [socket.id];
socket.gamecode = gamecode

บอกลูกค้าเกมเพื่อเริ่มต้นและแสดงรหัสเกมให้กับผู้ใช้ ... 

 socket.emit ("เริ่มต้น", gamecode);

03.2 เชื่อมต่อคอนโทรลเลอร์กับเกม

ในการเชื่อมต่ออุปกรณ์มือถือไปยังเกมเราจะใช้แบบฟอร์มเพื่อส่งโค้ดเกมจากหน้าจอเดสก์ท็อป ในแบบฟอร์มส่งเราจะส่งรหัสเกมไปยังเซิร์ฟเวอร์เพื่อการรับรองความถูกต้อง 

 socket.emit ("อุปกรณ์", {"ประเภท": "คอนโทรลเลอร์", "gamecode": gamecode});

เซิร์ฟเวอร์จะตรวจสอบว่ารหัสเกมถูกต้องและจะตั้งค่าการเชื่อมต่อกับเดสก์ท็อปเกม 

 ถ้า (device.gamecode ใน socketcodes) {
  // บันทึกรหัสเกมสำหรับคำสั่งคอนโทรลเลอร์
  socket.gamecode = device.gamecode
  // เริ่มต้นตัวควบคุม
  socket.emit ("เชื่อมต่อ", {});
  // เริ่มเกม
  SocketCodes [gamecode] .Emit ("เชื่อมต่อ", {});
}

เมื่อการเชื่อมต่อเป็นชุดทั้งหมดแล้วเราจะให้การผลักดัน 8 ลูกจาก X และ Z ด้วยคำสั่งต่อไปนี้ ... 

 บอล 
. เซ็ต linearvelocity (ใหม่สาม.Vector3 (30, 0, 30));

04. การส่งข้อมูล

ตอนนี้การเชื่อมต่อที่สร้างขึ้นเราต้องการส่งตัวแปร Gyro และ accelerometer ไปยังเกม โดยใช้ window.ondevicemotion และ window.ondeviceorientation กิจกรรมเรามีข้อมูลที่เราจำเป็นต้องเลียนแบบการเคลื่อนไหวเอียงเดียวกันของโทรศัพท์ของเราไปยังโต๊ะพูล ฉันเลือกใช้ช่วงเวลา 100ms เพื่อปล่อยค่าเหล่านั้น 

SetInterval (ฟังก์ชั่น () {
  Socket.emit ('ส่ง Gyro', [Math.Round (Roty), Math.Round (ROTX), AY, AX]);
}, intervaltime);

ในฝั่งไคลเอ็นต์เราจะแก้ไขความล่าช้าโดย Tweening ค่าขาเข้าจากเซิร์ฟเวอร์ไปจนถึงการเอียงของตารางพูล สำหรับ tweening เราใช้ tweenmax . 

 // จัดการข้อมูลไจโรขาเข้า
Socket.on ('Gyro ใหม่' ฟังก์ชั่น (ข้อมูล) {
  var degy = ข้อมูล 
 & lt; 0? Math.abs (ข้อมูล 
): -Data 
;
  tweenmax.to (table.rotation, 0.3, {
    X: Degtorad (DEGY - 90)
    y: degtorad (ข้อมูล 
)
    ความง่าย: linear.easenone,
    onupdate: ฟังก์ชั่น () {
        ตาราง. __ dirtyrotation = true;
    }
  });
});

05. กิจกรรมพิเศษ

More balls equals more fun. Try hitting the spacebar or tapping the screen of your mobile

ลูกบอลมากขึ้นเท่ากับความสนุกมากขึ้น ลองกดปุ่ม SPACEBAR หรือแตะที่หน้าจอมือถือของคุณ

เพื่อให้การโต้ตอบเพิ่มขึ้นเล็กน้อยฉันได้เพิ่มเหตุการณ์พิเศษสองสามข้อเพื่อให้ผู้ใช้เล่นกับ เราจะให้ตัวเลือกแก่ผู้ใช้ในการเพิ่มลูกบอลพิเศษถัดจาก 8 ลูกโดยใช้ตัวเลขบนแป้นพิมพ์

อีกอันหนึ่งคือการตีกลับตารางขึ้นไป สำหรับสิ่งนี้คุณสามารถกด SPACEBAR ได้ แต่เรายังเพิ่มกิจกรรมการแตะบนอุปกรณ์คอนโทรลเลอร์ สิ่งนี้จะส่งกิจกรรมไปยังโต๊ะพูลซึ่งจะเพิ่มตารางและส่งลูกบอลขึ้นมา

ครั้งแรกเราต้องจับเหตุการณ์แป้นพิมพ์ ... 

 // สร้างลูกบอล / ตาราง Slam บน Spacebar
document.addeventlistener ('keydown', ฟังก์ชั่น (e) {
  ถ้า (e.kearcode == 49) {// key: 1
    Buildball (1);
  } อื่นถ้า (e.kearcode == 50) {// key: 1
    Buildball (2);
  } อื่นถ้า (e.kearcode == 51) {// key: 1
    buildball (3);
  } อื่นถ้า (e.kearcode == 32) {// key: spacebar
    bouncetable ();
  }
});

ที่ buildball ฟังก์ชั่นเป็นฟังก์ชั่นเดียวกันที่เราใช้ในการสร้างทรงกลม 8 ลูก เราแค่ใช้พื้นผิวที่แตกต่างกันที่จะห่อทรงกลม สำหรับการผลักดันโต๊ะขึ้นเราให้ตารางการเคลื่อนไหวที่สูงขึ้นตามแนวแกน Y ด้วยรหัสนี้ ... 

 table.setlinearvelocity (ใหม่สาม.Vector3 (0, 500, 0));

บทสรุป

Add more balls and see how much your browser can handle

เพิ่มลูกบอลเพิ่มเติมและดูว่าเบราว์เซอร์ของคุณสามารถจัดการได้มากแค่ไหน

เมื่อคุณมีแนวคิดสำหรับเกมหรืออะไรก็ตามมันเป็นไปได้ทั้งหมดที่มีห้องสมุดที่นั่นซึ่งทำให้ชีวิตของคุณง่ายขึ้น นี่เป็นตัวอย่างที่แสดงให้เห็นว่าสิ่งนี้สามารถทำงานได้ เราหวังว่านี่จะช่วยจุดประกายความคิดสร้างสรรค์หรือช่วยคุณในโครงการปัจจุบันของคุณ ดูตัวอย่างสดของเกม ที่นี่ หรือค้นหามัน github .

บทความนี้ได้รับการตีพิมพ์ครั้งแรกในฉบับที่ 300 ของ สุทธิ นิตยสารชั้นนำของโลกสำหรับนักออกแบบเว็บไซต์และนักพัฒนามืออาชีพ ซื้อปัญหา 300 หรือ สมัครสมาชิกที่นี่ .

บทความที่เกี่ยวข้อง:

  • เริ่มต้นกับ WebGL โดยใช้ Three.js
  • 20 JavaScript Tools เพื่อเป่าจิตใจของคุณ
  • สร้างภาพ 3 มิติแบบโต้ตอบด้วย three.js

วิธีการ - บทความยอดนิยม

จัดการสถานะแบบฟอร์มตอบสนองด้วย Formik

วิธีการ Sep 17, 2025

(เครดิตรูปภาพ: Matt Crouch) ยินดีต้อนรับสู่คำแนะน�..

วิธีการสร้างแอปด้วย Vue.js

วิธีการ Sep 17, 2025

ระบบนิเวศ JavaScript มีการเปลี่ยนแปลงมานานกว่าทศวรร..

ทีละขั้นตอน: วิธีการเลียนแบบสีน้ำมันใน Corel Painter

วิธีการ Sep 17, 2025

มันรู้สึกเหมือนเมื่อวานนี้เมื่อฉันเล่นตามบทบาทกับเพื่อนในโรงเรี�..

รูปแบบที่ยืดหยุ่นแฟชั่นด้วย CSS Grid

วิธีการ Sep 17, 2025

กริด CSS เหมาะสำหรับการสร้างเลย์เอาต์สองแกนของ�..

กลยุทธ์ประสบการณ์ผู้ใช้หลัก

วิธีการ Sep 17, 2025

กลยุทธ์ UX เป็นกระบวนการที่ควรเริ่มต้นก่อ�..

วิธีการออกแบบโปรโมชั่นสำหรับแบรนด์จินตภาพ

วิธีการ Sep 17, 2025

เมื่อออกแบบแบรนด์ไม่ว่าจะเป็นหนึ่งในที่จัดตั้งขึ้นหรือเริ่มต้นท�..

สร้างเสื้อผ้า 3 มิติที่มีรอยย่นจริงและพับ

วิธีการ Sep 17, 2025

การทำเสื้อผ้าเสมือนจริงที่สมจริงเป็นหนึ่งใน..

วิธีเพิ่มข้อมูลในการออกแบบร่างของคุณ

วิธีการ Sep 17, 2025

การออกแบบหน้าจอมานานในไม่กี่ปีที่ผ่านมา ห่า�..

หมวดหมู่