โปรแกรมดู 3 มิติ: 4 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

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

ขั้นตอนที่ 1: ทฤษฎี

เพื่อให้เข้าใจทฤษฎีของมุมมอง 3 มิตินี้ คุณสามารถตรวจสอบวิธีที่คุณมองสภาพแวดล้อมของคุณ (จะช่วยให้มีแหล่งกำเนิดแสงที่สำคัญเพียงแหล่งเดียว) สังเกตว่า:

1. วัตถุที่อยู่ไกลจากคุณจะมีขอบเขตการมองเห็นเพียงเล็กน้อย
2. วัตถุที่อยู่ไกลจากแหล่งกำเนิดแสงจะมีสีเข้มขึ้น
3. เมื่อพื้นผิวขนานกันมากขึ้น (ตั้งฉากน้อยลง) กับแหล่งกำเนิดแสง สีก็จะดูเข้มขึ้น

ฉันตัดสินใจที่จะแสดงขอบเขตการมองเห็นด้วยเส้นหลายเส้นที่เกิดจากจุดเดียว (คล้ายกับลูกตา) เช่นเดียวกับลูกบอลแหลม เส้นจะต้องเว้นระยะห่างเท่าๆ กันเพื่อให้แน่ใจว่าแต่ละส่วนของช่องการมองเห็นนั้นแสดงอย่างเท่าเทียมกัน ในภาพด้านบน สังเกตว่าเส้นที่มาจากลูกเดือยจะมีระยะห่างมากขึ้นเมื่อเคลื่อนออกจากจุดศูนย์กลางของลูกบอลมากขึ้น ซึ่งจะช่วยให้เห็นภาพการใช้งานโปรแกรมการสังเกต 1 เนื่องจากความหนาแน่นของเส้นลดลงเมื่อวัตถุเคลื่อนห่างจากจุดศูนย์กลางมากขึ้น

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

ขั้นตอนที่ 2: ทฤษฎีการปฏิบัติ

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

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

เพื่อทำให้คณิตศาสตร์ง่ายขึ้น แผนที่ 3 มิติจะประกอบด้วยระนาบที่มีตัวแปรร่วม (x, y หรือ z ทั่วไป) ในขณะที่ตัวแปรที่ไม่ธรรมดาอีกสองตัวจะถูกจำกัดอยู่ภายในช่วง ทำให้คำจำกัดความของแต่ละระนาบสมบูรณ์

ในการมองไปรอบๆ ด้วยเมาส์ สมการของโปรแกรมจะพิจารณาการหมุนในแนวตั้งและแนวนอนระหว่างการแปลงระหว่างระบบพิกัดทรงกลมและระบบพิกัด xyz สิ่งนี้มีผลในการปรับรูปแบบการหมุนล่วงหน้าบนชุดเส้นเล็ง "ลูกสไปค์บอล"

ขั้นตอนที่ 3: คณิตศาสตร์

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

r=ระยะทาง t=theta(มุมแนวนอน), p=phi(มุมแนวตั้ง), A=การหมุนรอบแกน Y(การหมุนในแนวตั้ง), B=การหมุนรอบแกน Z(การหมุนในแนวนอน)

Kx=(บาป(p)*cos(t)*cos(A)+cos(p)*บาป(A))*cos(B)-บาป(p)*บาป(t)*บาป(B)

Ky=(บาป(p)*cos(t)*cos(A)+cos(p)*บาป(A))*บาป(B)+บาป(p)*บาป(t)*cos(B)

Kz=-sin(p)*cos(t)*sin(A)+cos(p)*cos(A)

x=r*Kx

y=r*Ky

z=r*Kz

r^2=x^2+y^2+z^2

แสง=Klight/r*(Kx หรือ Ky หรือ Kz)

p=arccos((x*sin(A)*cos(B)+y*sin(A)*sin(B)+z*cos(A))/r)

t=arccos((x*cos(B)+y*sin(B)-p*sin(A)*cos(p))/(r*cos(A)*sin(p)))

ขั้นตอนที่ 4: โปรแกรม

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