วิธีการเข้ารหัสเครื่องหมายความจริงเพิ่ม

Feb 7, 2026

วิธีการ

หน้า 1 จาก 2:

หน้า 1

หน้า 1
หน้า 2

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

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

บันทึก: ในการรับสิ่งนี้ในการทำงานบนเบราว์เซอร์ Chrome มือถือเนื้อหาจะต้องให้บริการโดยเลเยอร์ซ็อกเก็ตที่ปลอดภัย (I. ใน https มากกว่า http มาตรฐาน) ปัจจุบันเดสก์ท็อปใช้งานได้กับ HTTP ทั่วไป

ในการดาวน์โหลดไฟล์ที่คุณต้องการสำหรับการกวดวิชานี้ไปที่ filesilo เลือกเนื้อหาฟรีและเนื้อหาฟรีถัดจากการกวดวิชา

ในการกวดวิชานี้ฉันจะแสดงให้คุณเห็นวิธีการวางเครื่องหมายความเป็นจริงที่เพิ่มขึ้นที่ด้านหน้าของกล้องโทรศัพท์ เบราว์เซอร์นี้จะถูกหยิบขึ้นมาและ ar.js และเนื้อหาจะถูกแมปมากกว่าด้านบนในแบบ 3 มิติยึดติดกับเครื่องหมาย AR

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

01. เพิ่มไลบรารี

Start by linking up your project libraries — เริ่มต้นด้วยการเชื่อมโยงไลบรารีโครงการของคุณ

เมื่อคุณ ดาวน์โหลดไฟล์การสอน ไปที่โฟลเดอร์โครงการให้เปิดโฟลเดอร์เริ่มในตัวแก้ไขโค้ดของคุณแล้วเปิด index.html ไฟล์สำหรับการแก้ไข ในขั้นตอนนี้ห้องสมุดจะต้องมีการเชื่อมโยง - และมีเพียงไม่กี่สำหรับโครงการนี้! ห้องสมุดอยู่ในสามส่วน: Three.js, Jsartoolkit และส่วนขยายสาม.jsสำหรับ Artoolkit และ Marker

 & lt; สคริปต์ src = 'js / three.js' & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "ผู้ขาย / jsartoolkit5 / build / artoolkit.min.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "ผู้ขาย / jsartoolkit5 / js / artoolkit.api.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "threex-artoolkitsource.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "threex-artoolkitcontext.js" & gt; & lt; / script & gt;
& lt; สคริปต์ SRC = "threex-armarkerontrols.js" & gt; & lt; / script & gt;
& lt; สคริปต์ & gt; threex.artoolkitcontext.baseurl = '/' & lt; / script & gt;

02. ดูแลสไตล์ CSS

ใน ศีรษะ ส่วนของหน้าเพิ่มบางส่วน สคริปต์ แท็กและวางในกฎสไตล์สำหรับ ร่างกาย และ ผ้าใบ ธาตุ. สิ่งนี้ทำให้มั่นใจได้ว่าพวกเขาจะถูกวางอย่างถูกต้องในหน้าโดยไม่มีอัตรากำไรขั้นต้นเริ่มต้นที่เพิ่มโดยเบราว์เซอร์

 ร่างกาย {
  มาร์จิ้น: 0px;
  ล้น: ซ่อน;
}
ผ้าใบ {
  ตำแหน่ง: แน่นอน;
  ด้านบน: 0;
  ซ้าย: 0;
}

03. เพิ่มตัวแปรทั่วโลก

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

 var renderer, ฉาก, กล้อง;
var artoolkitcontext, onrenderfcts, artoolkitsource, markerroot, artoolkitmarker, lastimemsec;
รุ่น var, tube1, tube2, กลาง, รายละเอียด, ชีพจร;
Var Loader = New Three.Colladaloader ();

04. โหลดโมเดล

ก่อนที่ฉากจะตั้งค่ารุ่นจะถูกโหลดเพื่อให้สามารถแสดงได้เมื่อตรวจพบเครื่องหมาย นี่คือการปรับขนาดลง 10 เพื่อให้พอดีกับเครื่องหมาย AR โมเดลคือ 10 ซม. สำหรับความกว้างและความสูงดังนั้นเครื่องหมายคือ 1 ซม. ซึ่งแปลเป็น 1 เพิ่มขึ้นในสาม.j

loader.load ('รุ่น / scene.dae', ฟังก์ชั่น (Collada) {
  รุ่น = Collada.Scene;
  model.scale.x = model.scale.y = model.scale.z = 0.1;
  รายละเอียด = Model.GetObjectByName ("รายละเอียด", TRUE);

05. แก้ไขปัญหาการแสดงผลบางอย่าง

ยังคงอยู่ในรหัสการโหลด Collada เมื่อโหลดโมเดลจะมีหลอดสองสามท่อที่หมุนไปมาเพื่อให้พวกเขาพบในฉาก Collada พบหลอดแรกและวัสดุของมันจะถูกคว้า ที่นี่วัสดุถูกตั้งค่าเป็นเพียงเรนเดอร์ที่ด้านในของรุ่นไม่ใช่ภายนอก

 tube1 = model.getObjectbyname ("tube1", จริง);
var a = tube1.children . material;
a.transparent = true;
A. ไซด์ = สาม ["ด้านหลัง"];
a.blending = สาม ["additiveblending"];
a.Opacity = 0.9;

06. ทำซ้ำการแก้ไข

If the transparency and additive blending is not enabled, the model looks like this when loaded and displayed on top of the AR marker – not very exciting and barely visible! — หากไม่เปิดใช้งานความโปร่งใสและการผสมสารเติมแต่งรุ่นนี้จะมีลักษณะเช่นนี้เมื่อโหลดและแสดงที่ด้านบนของเครื่องหมาย AR - ไม่น่าตื่นเต้นและแทบจะมองไม่เห็น!

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

 tube2 = model.getObjectbyname ("tube2", จริง);
c = tube2.children  .material;
c.transparent = true;
c.side = สาม ["ด้านหลัง"];
c.blending = สาม ["additiveblending"];
c.Opacity = 0.9;

07. Final Fix

รุ่นสุดท้ายคือวงกลมปั่นที่อยู่ตรงกลางของการออกแบบ นี่เป็นไปตามกฎเดียวกันกับก่อน แต่ไม่ได้แสดงผลด้านหลังของวัตถุเพียงด้านหน้า ความทึบของแต่ละวัสดุเหล่านี้ถูกตั้งค่าเป็น 90% เพียงเพื่อให้มันนุ่มขึ้นเล็กน้อย เมื่อโหลดรุ่นโหลดฟังก์ชั่น INIER เรียกว่า

 mid = model.getObjectbyname (กลาง ", จริง);
  b = mid.children . วัสดุ;
  B.Transparent = TRUE;
  b.bliends = สาม ["additiveblending"];
 B.Opacity = 0.9;
  ในนั้น();
});

08. เริ่มต้นฉาก

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

 ฟังก์ชั่นเริ่มต้น () {
  Renderer = New Three.WebGlrenderer ({
  อัลฟ่า: จริง
  });
  renderer.setclearcolor (ใหม่สาม. สี ('Lightgrey'), 0);
  renderer.setsize (window.innerwidth, window.innerHeight);
  document.body.ephendchild (renderer.domelement);

09. สร้างการแสดงผลที่เกิดเหตุ

Renderer ถูกสร้างขึ้นให้มีขนาดเท่ากับหน้าต่างเบราว์เซอร์และเพิ่มไปยังรูปแบบวัตถุเอกสารของหน้า ตอนนี้มีการสร้างอาร์เรย์ที่ว่างเปล่าที่จะเก็บวัตถุที่ต้องแสดงผล ฉากใหม่ถูกสร้างขึ้นเพื่อให้เนื้อหาสามารถแสดงภายในนี้ได้

 onRenderfcts = [];
ฉาก = ใหม่สาม.Scene ();

10. สว่างขึ้น

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

Experiment with the lighting colours to give some different tints — ทดลองกับสีแสงเพื่อให้โทนสีที่แตกต่างกัน

 var ambient = new three.ambientlight (0x666666);
Scene.add (รอบข้าง);
Var Directionallight = New Three.DireContallight (0x4E5BA0);
Directionallight.position.set (-1, 1, 1) .Normalize ();
Scene.add (Directionallight);

ถัดไป: เสร็จสิ้นเครื่องหมาย AR ของคุณ

หน้าปัจจุบัน: หน้า 1

หน้าต่อไป หน้า 2

วิธีการเข้ารหัสเครื่องหมายความจริงเพิ่ม

01. เพิ่มไลบรารี

02. ดูแลสไตล์ CSS

03. เพิ่มตัวแปรทั่วโลก

04. โหลดโมเดล

05. แก้ไขปัญหาการแสดงผลบางอย่าง

06. ทำซ้ำการแก้ไข

07. Final Fix

08. เริ่มต้นฉาก

09. สร้างการแสดงผลที่เกิดเหตุ

10. สว่างขึ้น

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

วิธีทำ meme ใน Photoshop

พัฒนาทักษะศิลปะแนวคิดของคุณใน Photoshop

วิธีการสร้างแอป AR

วิธีการออกแบบสัตว์จินตนาการที่น่าเชื่อ

3 เคล็ดลับสำหรับการประดิษฐ์วัสดุส่งเสริมการขายพิมพ์ที่น่าทึ่ง

วิธีการออกแบบการพิมพ์สามมิติ

วิธีการทำพระคัมภีร์ตัวละครของคุณเอง

สร้างพื้นผิวอินทรีย์ในหมึก

หมวดหมู่