สารบัญ:
วีดีโอ: โปรแกรมดู 3 มิติ: 4 ขั้นตอน
2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-13 06:58
สวัสดี! เพื่อตอบสนองความสนใจของฉันในการเขียนโปรแกรมและหวังว่าจะช่วยให้คุณพึงพอใจ ฉันต้องการแสดง 3D Viewer ที่ฉันเขียนโค้ดในจาวาสคริปต์ หากคุณต้องการทำความเข้าใจเกม 3D ให้มากขึ้น หรือแม้แต่สร้างเกม 3D ของคุณเอง โปรแกรมดู 3D ต้นแบบนี้เหมาะสำหรับคุณ
ขั้นตอนที่ 1: ทฤษฎี
เพื่อให้เข้าใจทฤษฎีของมุมมอง 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 ได้อย่างแน่นอน ด้วยการทำให้สมบูรณ์และเขียนโค้ดได้มากขึ้น