เริ่มต้นใช้งาน webgl โดยใช้ three.js

Feb 17, 2026
วิธีการ
Web developer creating 3D shape graphics

webgl ซึ่งรองรับอย่างกว้างขวางในเบราว์เซอร์ที่ทันสมัยทั้งหมดช่วยให้คุณสามารถทำงานกับกราฟิก 3 มิติที่เร่งด้วยฮาร์ดแวร์ได้ จาวาสคริปต์ เปิดความเป็นไปได้มากมายสำหรับแอพและเกมเบราว์เซอร์ที่ใช้เบราว์เซอร์ - เพียงแค่ตรวจสอบสิ่งเหล่านี้ 20 ตัวอย่างที่น่าทึ่งของ WebGL ในการดำเนินการ สำหรับการพิสูจน์

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

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

01. รับสาม.js

คุณจะต้องเริ่มต้นด้วยการจับ สาม.js . เมื่อคุณมีการสร้างล่าสุดให้วาง Three.js ในโฟลเดอร์โครงการของคุณ จากนั้นเราจะเพิ่มเป็นสคริปต์ในหน้าของเราเช่นไลบรารี JavaScript อื่น ๆ เราจะวางรหัสของเราเองไว้ในไฟล์ JavaScript แยกต่างหาก 

 & lt;! Doctype HTML & GT;
& lt; html & gt;
  & lt; หัว & gt;
  & lt; Meta Charset = UTF-8 & GT;
  & lt; ชื่อ & gt; เริ่มต้นใช้งานด้วย three.js & lt; / ชื่อ & gt;
  & lt; / head & gt;
  & lt; body style = "margin: 0;" & gt;
  & lt; สคริปต์ SRC = "three.js" & gt; & lt; / script & gt;
  & lt; สคริปต์ src = "demo.js" & gt; & lt; / script & gt;
  & lt; / body & gt;
& lt; / html & gt;

02. ตั้งฉาก

เราต้องการสามสิ่งที่จะเริ่มต้นกับ WebGL: ฉากกล้องและตัวเรนเดอร์ ฉากคือที่ที่เราวางวัตถุที่จะแสดงโดย Three.js กล้องเป็นมุมมองที่เราจะเห็นพวกเขา Renderer นำทั้งสองเข้าด้วยกันและดึงหน้าจอตามนั้น เมื่อเรามีการตั้งค่าเหล่านี้เราเพิ่ม Renderer ลงในเอกสาร 

 var width = window.innerwidth;
ความสูง = window.innerHeight;
var varglangle = 45;
var nearclipping = 0.1;
Var Farclipping = 9999;
Var Scene = New Three.Scene ();
Var Camera = New Three.PerspectiveCamera (ViewGLE, ความกว้าง / ความสูง, ใกล้, Farlipping);
Var Renderer = New Three.WebGlrenderer ();
renderer.setsize (ความกว้างความสูง);
document.body.ephendchild (renderer.domelement);

03. สร้างลูป

ต่อไปเราต้องสร้างลูปเพื่อสร้างฉากของเรา เราทำสิ่งนี้โดยใช้ renderer.render () ฟังก์ชั่น แต่ส่วนสำคัญคือการใช้ซ้ำ SewionAnmationFrame () ซึ่งเป็นฟังก์ชั่นในตัวที่ช่วยให้เบราว์เซอร์ร้องขอเฟรมอื่นเมื่อพร้อมที่จะวาดหนึ่ง การใช้ SewionAnmationFrame () ง่ายกว่าและส่งผลให้เคลื่อนไหวที่ราบรื่นกว่าการพยายามใช้เวลาในการวาดเฟรมด้วยตัวคุณเอง 

 ฟังก์ชั่นเคลื่อนไหว () {
  SecureSimationFrame (Animate);
  renderer.render (ฉากกล้อง);
}
Animate ();

04. สร้างวัตถุพื้นฐาน

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

 Var CouseGeometry = ใหม่สาม.boxgeometry (1, 1, 1);
var cubeMaterial = ใหม่สาม.Meshlambertmaterial ({สี: 0xFF0000});
Var Cube = New Three.Mesh (CubeGeometry, CubeMaterial);
var conebetomry = new three.conegeometry (0.5, 1, 4);
var conematerial = ใหม่สาม.meshlambertmaterial ({สี: 0x00ff00});
Var Cone = New Three.mesh (ComeGeometry, Conematerial);
var sphereometry = new three.sphereometry (0.5, 8, 8);
Var SphereMaterial = New Three.Meshlambertmaterial ({สี: 0x0000ff});
Var Sphere = New Three.mesh (SphereGeometry, SphereMaterial);

05. ระบุตำแหน่ง

ตามค่าเริ่มต้นวัตถุจะถูกเพิ่มที่จุดกำเนิด (x = 0, y = 0, z = 0) ของฉากซึ่งเป็นที่ที่กล้องของเราอยู่ดังนั้นเราจะต้องระบุตำแหน่งสำหรับพวกเขาเช่นกัน เราพร้อมที่จะเพิ่มตาข่ายให้กับฉากของเราซึ่งหมายความว่าพวกเขาจะแสดงผลโดยอัตโนมัติใน Animate () ลูป. 

 cube.position.x = -2
cube.position.z = -5;
CONE.Position.z = -5;
sphere.position.z = -5;
sphere.position.x = 2;
cube.position.z = -5;
Scene.add (ลูกบาศก์);
Scene.add (กรวย);
Scene.add (ทรงกลม);

06. เพิ่มแหล่งกำเนิดแสง

หากคุณดูหน้าของคุณตอนนี้คุณจะพบว่าสิ่งต่าง ๆ ดูแบนเล็กน้อย ไม่มีแสงที่ใช้กับวัตถุดังนั้นพวกเขาจึงเป็นสีหลักที่เป็นของแข็งและดูสองมิติ เพื่อแก้ไขปัญหานี้เราต้องเปลี่ยนจาก meshbasicmaterial เป็นวัสดุที่รองรับแสงสว่าง เราจะใช้ Meshlambertmaterial . นอกจากนี้เรายังต้องเพิ่มแหล่งกำเนิดแสงไปยังฉาก 

 Var Light = New Three.PointLight (0xFFFFFF);
Light.position.x = 0;
Light.position.y = 10;
light.position.z = 0;
Scene.add (แสง);

07. ย้ายแหล่งที่มา

ตอนนี้เรากำลังไปที่นั่นแล้ว! คุณควรเห็นสิ่งที่ค่อนข้างชัดเจนสามมิติในหน้าของคุณ สิ่งที่เรายังไม่ได้ทำจะได้รับประโยชน์อย่างเต็มที่จาก Animate () ฟังก์ชั่น. มาทำการเปลี่ยนแปลงเล็กน้อยเพื่อให้แหล่งกำเนิดแสงของเราเคลื่อนที่ไปรอบ ๆ ในการเคลื่อนที่เป็นวงกลมเหนือวัตถุ 

 var lightangle = 0;
ฟังก์ชั่นเคลื่อนไหว () {
  lightangle + = 5;
  ถ้า (lightangle & gt; 360) {lightangle = 0;};
  light.position.x = 5 * math.cos (lightangle * math.pi / 180);
  light.position.z = 5 * math.sin (lightangle * math.pi / 180);
  SecureSimationFrame (Animate);
  renderer.render (ฉากกล้อง); }

08. เพิ่มพื้นผิว

ในทางปฏิบัติเราอาจไม่ต้องการให้วัตถุของเราเป็นสีแบน มันจะเป็นเรื่องปกติมากขึ้นที่จะใช้พื้นผิวกับไฟล์จากไฟล์ เราสามารถทำสิ่งนี้ได้ Three.TextureLoader () . มาเปลี่ยนวิธีสร้างวัตถุกรวยของเราเพื่อใช้ประโยชน์จากพื้นผิวที่เราโหลดจากไฟล์ ฟังก์ชั่นเรียกว่าเมื่อโหลดไฟล์

  • สถานที่ที่จะหาพื้นผิวฟรีสำหรับโครงการ 3D 
 var texture loader = ใหม่ three.textureLoader ();
textureloader.load ("./ grass_texture.jpg", พื้นผิว = & gt; {
  var conebetomry = new three.conegeometry (0.5, 1, 4);
  Var Conematerial = ใหม่สาม.Meshlambertmaterial ({แผนที่: พื้นผิว});
  Var Cone = New Three.mesh (ComeGeometry, Conematerial);
  CONE.Position.z = -5;
  Scene.add (กรวย);
  },
);

09. ทำให้เป็นธรรมชาติ

สิ่งต่าง ๆ ดูดีขึ้น แต่บางสิ่งยังไม่เป็นธรรมชาติ พื้นผิวดูแบนมากและไม่ตอบสนองต่อแสง เราสามารถแก้ปัญหานี้ได้ด้วยการใช้การทำแผนที่ชนซึ่งช่วยให้เราสามารถใช้ชิ้นส่วนแสงและสีเข้มของภาพเพื่อจำลองพื้นผิวบนพื้นผิวของวัตถุ ลองทำสิ่งนี้ด้วยพื้นผิวที่แตกต่างกันบนทรงกลม เราจะเปลี่ยนเนื้อหาให้ meshphongmaterial ซึ่งช่วยให้เราระบุ การทำท่า คุณลักษณะ 

 var texture loader = ใหม่ three.textureLoader ();
textureloader.load ("./ bump_map.jpg", พื้นผิว = & gt; {
  var sphereometry = new three.sphereometry (0.5, 8, 8);
  Var SphereMaterial = New Three.meshphongmaterial ({สี: 0x0000FF, BUMPMAP: เนื้อ, Bumpscale: 1.0});
  Var Sphere = New Three.mesh (SphereGeometry, SphereMaterial);
  sphere.position.z = -5;
  sphere.position.x = 2;
  Scene.add (ทรงกลม);
  },
);

10. เพิ่มการควบคุม

เป็นสัมผัสสุดท้ายให้ผู้ใช้ควบคุมฉากเล็กน้อย เพื่อเพิ่มความสามารถในการเลื่อนไปรอบ ๆ มีห้องสมุดพิเศษที่จัดส่งด้วย Three.js ที่ทำให้ง่ายต่อการทำอย่างไม่น่าเชื่อ ตรวจสอบให้แน่ใจว่าได้แยก orbitcontrols.js จากแพ็คเกจ three.js ไปยังไดเรกทอรีโครงการของคุณและรวมไว้ในหน้าของคุณ นี่เป็นหนึ่งในห้องสมุดควบคุมหลายแห่งที่จัดส่งด้วย Three.js เพื่อเติมเต็มสไตล์การควบคุมกล้องทั่วไป 

 & lt; สคริปต์ SRC = "OrbitControls.js" & GT; & LT; / สคริปต์ & GT;

11. ใช้กับกล้อง

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

ด้วยที่เราทำกับการแนะนำของเรา คุณควรมีวัตถุสามชิ้นที่มีลักษณะที่แตกต่างกันของพื้นผิวแสงแบบไดนามิกบางอย่างและกล้องควบคุมที่ผู้ใช้จะเล่นด้วย 

 camera.position.z = 10;
Var Controls = New Three.orbitControls (กล้อง);

บทความนี้ให้ความสำคัญในปัญหา 268 ของนักออกแบบเว็บไซต์นิตยสารสร้างสรรค์ Web Design - เสนอแบบฝึกหัดผู้เชี่ยวชาญแนวโน้มที่ทันสมัยและทรัพยากรฟรี สมัครสมาชิกนักออกแบบเว็บไซต์ตอนนี้

ชอบสิ่งนี้? ลองเหล่านี้:

  • คู่มือที่สมบูรณ์ของ Coder สำหรับ APIs
  • วิธีการละลายวัตถุ 3 มิติด้วย three.js
  • เปิดบล็อกโดยใช้ WordPress API

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

วิธีการวาดสุนัข

วิธีการ Feb 17, 2026

บทช่วยสอนวันนี้จะแสดงวิธีการวาดสุนัข โครงกร�..

วิธีสร้างเว็บฟอร์มที่เข้าถึงได้

วิธีการ Feb 17, 2026

แบบฟอร์มเป็นองค์ประกอบสำคัญของเว็บเพราะพวกเ..

สร้างเอฟเฟกต์ข้อความที่สั่นคลอนด้วย JavaScript

วิธีการ Feb 17, 2026

การแนะนำเอฟเฟกต์ต่อข้อความและการพิมพ์สามารถ..

ทาสีเกม Sci-Fi ใน Photoshop

วิธีการ Feb 17, 2026

ฉันมักจะคิดว่าความคิดริเริ่มนั้นพบที่ไหนสัก..

วิธีมีอิทธิพลต่อการจัดอันดับ Google กับเนื้อหาของคุณ

วิธีการ Feb 17, 2026

เนื้อหาของคุณจะไม่มีที่ไหนเลยเว้นแต่ผู้คนสา..

สร้างข้อความที่สมบูรณ์แบบในไคลเอนต์อีเมลทั้งหมด

วิธีการ Feb 17, 2026

สำหรับแคมเปญการตลาดผ่านอีเมลใด ๆ ในการทำงานอีเมลจะต้องไปถึงกล่องจ..

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

วิธีการ Feb 17, 2026

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

วิธีการออกแบบฮีโร่เคลื่อนไหว

วิธีการ Feb 17, 2026

เคล็ดลับต่อไปนี้สลายกระบวนการของฉันสำหรับการเคลื่อนไหวแบบอนิเมช�..

หมวดหมู่