Indholdsfortegnelse:

3D Viewer: 4 trin
3D Viewer: 4 trin

Video: 3D Viewer: 4 trin

Video: 3D Viewer: 4 trin
Video: 3D Viewer Tutorial in 10 minutes 2024, Juli
Anonim
3D Viewer
3D Viewer

Hej! For at tilfredsstille min interesse for programmering og forhåbentlig hjælpe med at tilfredsstille din, vil jeg gerne vise dig en 3D Viewer, som jeg har kodet i javascript. Hvis du gerne vil øge din forståelse af 3D -spil eller endda oprette dit eget 3D -spil, er denne prototype 3D -fremviser perfekt til dig.

Trin 1: Teorien

Teorien
Teorien

For at forstå teorien om denne 3D -fremviser kan du blot undersøge den måde, du ser på dine omgivelser (det hjælper kun at have en betydelig lyskilde). Læg mærke til det:

  1. Objekter, der er længere væk fra dig, optager en mindre del af dit synsfelt.
  2. Objekter, der er længere væk fra lyskilden, virker mørkere i farven.
  3. Efterhånden som overflader bliver mere parallelle (mindre vinkelrette) til lyskilden, fremstår de mørkere i farven.

Jeg besluttede at repræsentere et synsfelt med en flok linjer, der stammer fra et enkelt punkt (analogt med øjeæblet). Ligesom en piggkugle skal linjerne være jævnt fordelt for at sikre, at hver del af synsfeltet er lige repræsenteret. På billedet ovenfor kan du se, hvordan linjerne, der kommer fra spidskuglen, bliver mere adskilt, når de bevæger sig længere væk fra midten af bolden. Dette hjælper med at visualisere programmets implementering af observation 1, da tætheden af linjer falder, når objekter bevæger sig længere væk fra midtpunktet.

Linjerne er den grundlæggende synsenhed i programmet, og de er hver kortlagt til en pixel på displayet. Når en linje skærer et objekt, farves dets tilsvarende pixel baseret på dens afstand fra lyskilden og dens vinkel fra lyskilden.

Trin 2: Implementeringsteori

Implementeringsteori
Implementeringsteori

For at forenkle programmet er lyskilden den samme som midtpunktet (øjeæblet: punkt, hvorfra kortet ses, og hvor linjerne stammer fra). Analogt med at holde et lys ved siden af dit ansigt, eliminerer dette skygger og gør det lettere at beregne lysstyrken for hver pixel.

Programmet bruger også sfæriske koordinater, med synspunktets centrum ved oprindelsen. Dette gør det muligt at generere linjerne (hver med en unik theta: vandret vinkel og phi: lodret vinkel) og danner grundlag for beregninger. Linjer med samme theta kortlægges til pixels i samme række. Phis for de tilsvarende vinkler stiger på tværs af hver række pixels.

For at forenkle matematikken er 3D-kortet sammensat af fly med en fælles variabel (fælles x, y eller z), mens de to andre ikke-almindelige variabler er begrænset inden for et område og fuldender definitionen af hvert plan.

For at se sig omkring med musen, programmets ligninger faktor i en lodret og vandret rotation under konverteringen mellem sfæriske og xyz koordinatsystemer. Dette har den virkning, at der på forhånd dannes en rotation på "spike ball" -sættet med synslinjer.

Trin 3: Matematik

De følgende ligninger gør det muligt for programmet at bestemme, hvilke linjer der skærer hvert objekt og oplysninger om hvert kryds. Jeg udledte disse ligninger fra de grundlæggende sfæriske koordinatligninger og 2D -rotationsligningerne:

r = afstand, t = theta (vandret vinkel), p = phi (lodret vinkel), A = rotation om Y -aksen (lodret rotation), B = rotation om Z -aksen (vandret rotation)

Kx = (sin (p)*cos (t)*cos (A)+cos (p)*sin (A))*cos (B) -sin (p)*sin (t)*sin (B)

Ky = (sin (p)*cos (t)*cos (A)+cos (p)*sin (A))*sin (B)+sin (p)*sin (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

belysning = Klight/r*(Kx eller Ky eller 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)))

Trin 4: Programmer

Program
Program

Jeg håber, at denne prototype 3D -fremviser hjalp dig med at forstå virkningen af virtuelle 3D -virkeligheder. Med noget mere perfektionering og kodning har denne fremviser helt sikkert potentialet til at blive taget i brug i 3D -spiludvikling.

Anbefalede: