การใช้มุมมองบุคคลที่หนึ่งในรูปแบบ 3 มิติหมายถึงการใช้มุมมองบุคคลที่หนึ่งในเกมยิงปืน (FPS) เป็นวิดีโอเกมประเภทหนึ่งที่อิงจากมุมมองของบุคคลที่หนึ่งซึ่งมีศูนย์กลางอยู่ที่ปืนและอาวุธอื่นๆ ผู้เล่นที่ทะลุผ่าน สัมผัสประสบการณ์แอ็คชั่นผ่านสายตาของตัวเอก นับตั้งแต่เริ่มก่อตั้งประเภทนี้ กราฟิก 3 มิติขั้นสูงและกราฟิก 3 มิติจำลองได้ท้าทายการพัฒนาฮาร์ดแวร์ และการเล่นเกมแบบผู้เล่นหลายคนก็กลายเป็นสิ่งที่ขาดไม่ได้
ภาพหน้าจอจาก Doom หนึ่งในเกมแนวใหม่ที่แสดงมุมมองทั่วไปของเกมยิงมุมมองบุคคลที่หนึ่ง
ปัจจุบัน พิพิธภัณฑ์หรือบริษัทต่างๆ มักใช้แอนิเมชัน 3 มิติเพื่อสร้างวิดีโอโปรโมต ฯลฯ ข้อได้เปรียบที่ใหญ่ที่สุดของการตีความแอนิเมชัน 3 มิติคือทำให้ผู้คนมีความรู้สึกที่แท้จริงทั้งในแง่ของเนื้อหาและรูปแบบ มันใช้งานง่ายกว่างานกราฟิกและสมจริงมากกว่าแอนิเมชั่น 2D ดังนั้นจึงทำให้ผู้ชมรู้สึกเหมือนอยู่ในสภาพแวดล้อมการโฆษณา ซึ่งช่วยเพิ่มความโน้มน้าวใจในการโฆษณาได้อย่างมาก การพัฒนาเทคโนโลยี 3 มิติยังท้าทายความสามารถของผู้ชมในการแยกแยะ ส่งผลให้การตัดสินของผู้ชมอยู่ระหว่างความเป็นจริงและความเป็นจริง
นอกจากนี้ การใช้เอฟเฟกต์พิเศษ 3D ยังให้พื้นที่การคิดที่กว้างขึ้นสำหรับความคิดสร้างสรรค์ กลายเป็นการรับประกันที่เชื่อถือได้สำหรับการดำเนินการสร้างสรรค์ และเสริมสร้างรูปแบบและสไตล์ของความคิดสร้างสรรค์ ตามความดึงดูดใจในการแสดงของธีมโฆษณา คุณสามารถสร้างบรรยากาศที่เหมือนฝันและมหัศจรรย์เพื่อกระตุ้นและสร้างความประทับใจให้กับผู้ชมได้ จึงบรรลุวัตถุประสงค์ในการสื่อสารกับผู้ชม
วิดีโอโปรโมตแอนิเมชั่น 3 มิติผสมผสานแอนิเมชั่น 3 มิติ ภาพเอฟเฟกต์พิเศษ วิดีโอขององค์กร ภาพถ่าย อนาคตในอนาคต และเนื้อหาอื่น ๆ ผ่านการสังเคราะห์หลังการผลิต การพากย์ และการบรรยายเพื่อสร้างวิดีโอโฆษณาระดับองค์กรคุณภาพสูงที่ใช้งานง่าย สดใส และเป็นที่นิยม ช่วยให้ผู้คนจาก ระดับต่างๆ ของสังคม เพื่อสร้างความประทับใจเชิงบวก เชิงบวก และดีต่อบริษัท อันเป็นการสร้างความปรารถนาดีและความไว้วางใจในบริษัท และไว้วางใจในผลิตภัณฑ์หรือบริการของบริษัท
การพัฒนาอย่างรวดเร็วของ 3D ในปัจจุบันต้องขอบคุณการแสวงหาความเป็นจริงของมนุษยชาติ ดังนั้นการเรียนรู้ที่จะใช้ 3D ให้ดีจึงเป็นส่วนที่ขาดไม่ได้ของความสำเร็จในอนาคต
แนวคิดของตัวอย่างในบทความนี้คือการเยี่ยมชมห้องคอมพิวเตอร์ การเปิดประตูไม่สามารถเคลื่อนไหวได้มากไปกว่านี้ เมื่อประกอบกับการเลี้ยวที่เหมาะสม โดยพื้นฐานแล้วจะเป็นการจำลองผลกระทบของผู้ที่มาเยี่ยมชมห้องคอมพิวเตอร์ ข้อดีอีกประการหนึ่งคือ หากคุณต้องการสาธิตให้เจ้านายของคุณดูโดยไม่ต้องใช้งาน เจ้านายของคุณจะพอใจกับเอฟเฟกต์สุดเจ๋งนี้มาก!
http://www.hightopo.com/demo/room-walkthrough/index.html
ปุ่มรีเซ็ตและปุ่มเริ่มต้นบนอินเทอร์เฟซคือปุ่มที่เพิ่มเข้ากับเนื้อหาโดยตรง และกิจกรรมการคลิกจะถูกเพิ่มลงในปุ่มทั้งสองนี้:
<div></div><div></div>
ฉากทั้งหมดสร้างขึ้นจากส่วนประกอบ 3D ที่ห่อหุ้ม HT การสร้างฉากขนาดใหญ่ดังกล่าวต้องใช้โค้ดจำนวนหนึ่ง เพื่อให้ง่ายขึ้น ฉันจึงแยกฉากออกและใช้คลาส ht.JSONSerializer ที่ห่อหุ้ม HT เพื่อทำให้ฉากเป็นอนุกรม มีการแนะนำเฉพาะไฟล์ json ที่สร้างขึ้นเพื่อให้ชัดเจนยิ่งขึ้น ฉันจะยกตัวอย่างที่นี่ โดยสมมติว่าฉาก 3 มิติถูกสร้างขึ้น:
dm = new ht.DataModel();g3d = new ht.graph3d.Graph3dView(dm);//....สร้างฉาก dm.serialize();//คุณสามารถกรอกพารามิเตอร์ตัวเลขเป็นตัวย่อช่องว่างได้ เพิ่ม
ตอนนี้เราได้ตั้งค่าสภาพแวดล้อมและแปลงเป็นไฟล์ json แล้ว เป็นเรื่องยากที่จะควบคุมโค้ด ในกรณีนี้ เราจะทำการดีซีเรียลไลซ์โมเดลข้อมูล DataModel ฟังก์ชันของฟังก์ชันนี้คือการแปลงรูปแบบ json ให้เป็นอ็อบเจ็กต์ และดีซีเรียลไลซ์อ็อบเจ็กต์จะถูกส่งผ่านไปยังโมเดลข้อมูล DataModel สำหรับรายละเอียด โปรดดูที่ HT สำหรับคู่มือการทำให้เป็นอนุกรมของเว็บ:
var g3d = window.g3d = new ht.graph3d.Graph3dView(), dataModel = g3d.dm(), view = g3d.getView(), path = null;g3d.setMovableFunc(function(data) { return false;}) ;g3d.setVisibleFunc(function(data) { if (data.getName() === path) { return false; } กลับ จริง;});g3d.setEye([523, 5600, 8165]);g3d.setFar(60000);dataModel.deserialize(json);ขณะนี้เราจำเป็นต้องควบคุมประตูในที่เกิดเหตุและเส้นทางที่เราจะไป สำรวจโมเดลข้อมูล DataModel และรับข้อมูลทั้งสองนี้:
for (var i = 0; i < dataModel.size(); i++) { var data = dataModel.getDatas().get(i); if (data.getName() === gate) {//ตั้งค่าใน json ชื่อของ window.door = data; } if (data.getName() === path) { path = data; } if (window.door && path) {//รับประตูและเส้นทาง หลังจากข้อมูลแล้ว ให้แยกออกจากวง }}พูดง่ายๆ ก็คือ มีเพียงสี่การกระทำในตัวอย่างนี้ รีเซ็ตไปยังจุดเดิม เริ่มดำเนินการ ก้าวไปข้างหน้า และหยุด คลิกปุ่มเริ่มต้น ในการดำเนินการเริ่มต้น เราดำเนินการเพียงครั้งเดียวเท่านั้น นั่นคือการดำเนินการเปิดประตู หลังจากการดำเนินการเสร็จสิ้น เราจะเรียกฟังก์ชันไปข้างหน้าเพื่อเดินหน้า:
ฟังก์ชั่น startAnim() { if (window.isAnimationRunning) { return; } รีเซ็ต(); window.isAnimationRunning = true;// อยู่ระหว่างดำเนินการภาพเคลื่อนไหว ht.Default.startAnim ({ เฟรม: 30, // จำนวนภาพเคลื่อนไหว เฟรม ใช้เป็นค่าเริ่มต้น `ht.Default.animFrames`.interval: 20, //ช่วงเวลาเฟรมของภาพเคลื่อนไหวใช้ `ht.Default.animInterval` เป็นค่าเริ่มต้น function() {// ฟังก์ชั่นที่ถูกเรียกหลังจากภาพเคลื่อนไหวสิ้นสุดลง ไปข้างหน้า(); }, การกระทำ: ฟังก์ชั่น(t){/ // จะต้องจัดให้มีฟังก์ชั่นการกระทำเพื่อใช้การเปลี่ยนแปลงแอตทริบิวต์ในระหว่างการเคลื่อนไหว * คณิตศาสตร์ PI / 180 * t);ฟังก์ชั่นรีเซ็ตในที่นี้คือฟังก์ชั่นการรีเซ็ตกลับไปยังจุดเดิม เราใช้ฟังก์ชั่นนี้เพื่อคืนค่าการเปลี่ยนแปลงทั้งหมดไปยังตำแหน่งเริ่มต้น รวมถึงตำแหน่งของประตูด้วย:
ฟังก์ชั่นรีเซ็ต () { if (window.isAnimationRunning) { return; } g3d.setCenter ([0,0,0]); (0);}ในการย้าย คุณต้องมีเส้นทางเดินซึ่งเป็นเส้นทางที่เราเพิ่งได้รับมา รับองค์ประกอบทั้งหมดในเส้นทางผ่าน window.points = path.getPoints()._as; และเริ่มต้น window.forwardIndex = 0; ด้านหลังของเส้นทาง ตั้ง Eye และ Center ในฉาก 3D ไว้ที่ 2 จุด เพื่อสร้างเอฟเฟ็กต์ให้เราเป็นคนแรก:
var point1 = คะแนน[forwardIndex], point2 = คะแนน[forwardIndex + 1];var DistanceX = (point2.x - point1.x), DistanceY = (point2.y - point1.y), ระยะทาง = Math.sqrt(distanceX * ระยะทาง X + ระยะทาง Y * DistanceY)-200;//ระยะห่างระหว่างจุดสองจุดคำนวณผ่านทฤษฎีบทสามเหลี่ยมพีทาโกรัส ฉันกลัวชนกำแพง ดังนั้น -200g3d.setEye([point1.x, 1600, point1.y]);//Eye g3d.setCenter([point2 .x, 1600, point2.y]);//ฉัน
ส่วนประกอบ 3 มิติใน HT มีวิธีการเดิน (step, anim, firstPersonMode) ฟังก์ชันนี้จะเปลี่ยนตำแหน่งของดวงตาและศูนย์กลางในเวลาเดียวกัน นั่นคือดวงตาและศูนย์กลางจะเคลื่อนออฟเซ็ตเดียวกันในทิศทางเวกเตอร์ที่กำหนดโดย สองจุดในเวลาเดียวกัน step คือค่าความยาวเวกเตอร์ออฟเซ็ต เมื่อพารามิเตอร์ firstPersonMode ว่างเปล่า ค่าปัจจุบันของ Graph3dView#isFirstPersonMode() จะถูกใช้โดยค่าเริ่มต้น หากการดำเนินการเดินถูกเรียกสำหรับโหมดบุคคลที่หนึ่ง ฟังก์ชันนี้จะพิจารณาข้อจำกัดขอบเขตของ Graph3dView#getBoundaries()
g3d.walk(ระยะทาง, { เฟรม: 50, ช่วงเวลา: 30, การค่อยๆ เปลี่ยน: function(t) {return t; }, finishFunc: function() { forwardIndex += 1; if (points.length - 2 > forwardIndex) {/ /points.length = 5 g3d.setCenter([point2.x, 1600, point2.y]);//เปลี่ยนจุดสิ้นสุดเป็นจุดเริ่มต้น g3d.rotate(Math.PI / 2, 0, { เฟรม: 30, ช่วงเวลา: 30, การค่อยๆ เปลี่ยน: function(t) {return t;}, finishFunc : function() { ไปข้างหน้า ();} } } else { var lastPoint = จุด [points.length - 1]; // จุดของเส้นทางใน json จุดสุดท้าย g3d.setCenter([lastPoint.x, 1400, LastPoint.y]); g3d.rotate(-Math.PI / 2, 0, { เฟรม: 30, ช่วงเวลา: 30, finishFunc: function() { window . isAnimationRunning = เท็จ; } });ไม่ว่าจะมีกี่จุดในเส้นทาง คำชี้แจงนี้ยังคงสามารถทำงานได้ เฉพาะจุดสุดท้ายเท่านั้นที่จะข้ามออกจากฟังก์ชันที่เรียกหลังจากแอนิเมชั่น finishFunc สิ้นสุดลง และตั้งค่า window.isAnimationRunning เป็น false เพื่อหยุดฟังก์ชัน startAnim . หากไม่ใช่จุดสุดท้าย หลังจากที่ผู้ใช้หมุนแล้ว ฟังก์ชันส่งต่อจะถูกเรียกกลับ ณ จุดนี้ โค้ดทั้งหมดได้รับการอธิบายแล้ว โปรเจ็กต์ขนาดใหญ่ดังกล่าวสำเร็จได้ด้วยโค้ดที่สั้นมาก!
สรุปข้างต้นคือแอนิเมชันการโรมมิ่งห้องคอมพิวเตอร์เสมือน 3 มิติของ WebGL ที่ใช้ HTML5 ที่บรรณาธิการแนะนำ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!