Autor | Zpráva | ||
---|---|---|---|
peta Profil |
#1 · Zasláno: 23. 11. 2012, 09:26:55
Potreboval bych otocit pozice 1-8 objektu do 3d bez canvas. Jedna se o rozmisteni figurek. Muzu to udelat rucne nebo pouzit rovnice. Nevedel by jste nekdo rovnice?
function createPositions() { var arr, size, angle,i,j, a,b; boardsize = [100,100]; unitsize = [17,15]; angle = [-30,-30]; // poloha jednotek 2D [%] arr = [ [[50,50]], [[50,33],[50,66]], [[50,33],[33,66],[66,66]], [[33,33],[66,33],[33,66],[66,66]], [[33,25],[66,25],[50,50],[33,75],[66,75]], [[25,33],[50,33],[75,33],[25,66],[50,66],[75,66]], [[25,25],[50,25],[75,25],[50,50],[25,75],[50,75],[75,75]], [[25,25],[50,25],[75,25],[37.5,50],[62.5,50],[25,75],[50,75],[75,75]], ]; // poloha jednotek 3D [px] for (i=0;i<arr.length;i++) { for (j=0;j<arr[i].length;j++) { a = arr[i][j][0]; b = arr[i][j][1]; // 2D a = a/100 * boardsize[0] - unitsize[0]/2; b = b/100 * boardsize[1] - unitsize[0]/2; // 3D // tady treba dosadit rovnice pro otoceni // a = a/100 * boardsize[0] - unitsize[0]/2; // b = b/100 * boardsize[1] - unitsize[0]/2; arr[i][j][0] = a; arr[i][j][1] = b; } } return arr; } |
||
_es Profil |
#2 · Zasláno: 23. 11. 2012, 10:11:19
peta:
„Nevedel by jste nekdo rovnice?“ Vyhľadávače, trebárs tebou obľúbený Google, snáď nefungujú? http://cs.wikibooks.org/wiki/Geometrie/Prom%C3%ADt%C3%A1n%C3%AD |
||
peta Profil |
#3 · Zasláno: 23. 11. 2012, 11:01:12
No, az na to, ze ani jedna ukazka nepocita to, co ja potrebuji. Takovych se mnasel mraky, 200 stranek.
A pak je tu takova vyznamna drobnost, funkcni example, kde zadas vstupni hodnoty a vyplivne vystupni. Prvni ukazky jsou jakesi silene maticove pocty zapsane v C#. Coz nema s JS nic spolecne, ze jo? Středové promítání - to vychazi z toho, ze znam souradnice x,y,z, ktere ja prave ale neznam. Ja znam vysledky te funkce na wiki. a tez je to v C#. Tvou odpoved tedy povazuji spis o pokus o vtip. |
||
1Pupik1989 Profil |
#4 · Zasláno: 23. 11. 2012, 12:31:44
Pro otočení do 3D je potřeba i poloha na Z, ne? Nebo počítáš s tím, že Z = 0 a je to bez perspektivy?
Matice je jasná. Při čemž toto je otočení dle osy Z. Přinejhorším je to rozepsané ZDE. |
||
juriad Profil |
ty šílené maticové počty přesně odpovídají transformaci, kterou chceš provést; mají pěkné algebraické vlastnosti, tedy nemusíš se zabývat jednotlivými "rovnicemi"
nevím, co přesně myslíš těmi úhly, proto situaci trochu zjednoduším: máš svislou desku, která splývá s průmětnou (obrazovkou), na této desce jsou zadané body ty je chceš vykreslit tak, jakoby ta deska byla poklopená o 30 stupňů dozadu podle vodorovné osy (spodní části obrazovky) 1/ vymyslíš matici rotace podél přímky o zadaný úhel 2/ touto maticí vynásobíš každý bod (bod má 3 souřadnice (x, y, 0)), tím získáš bod v prostoru 3/ následně sestavíš matici projekce (takové, o kterou máš zájem) 4/ maticí projekce vynásobíš bod v prostoru, tím bod promítneš do obrazovky (projekce třetí složku opět vynuluje) PS: tvrdíš o sobě, že C# umíš, tady problém být nemůže |
||
_es Profil |
#6 · Zasláno: 23. 11. 2012, 12:43:57
peta:
„Středové promítání - to vychazi z toho, ze znam souradnice x,y,z, ktere ja prave ale neznam.“ No tak keď ich nemáš, tak to nemáš ako otočiť. 2D zobrazenie 3D objektu nemáš ako otočiť v 3D priestore a potom zase premietnuť do 2D zobrazenia - to je snáď jasné. |
||
Časová prodleva: 3 dny
|
|||
peta Profil |
Nakonec jsem tam doplnil jen otoceni. Dost mne potrapilo reseni kvadrantu pro tangent :) Nejdriv jsem to chtel osidit jednoduchou formulkou, ale pote jsem zjistil, ze mi to pocita spatne, tak jsem tam dal uplny zapis.
x = arr[i][j][0]; y = arr[i][j][1]; // 2D x = x/100 * w - (imgsize.w>>1); y = y/100 * h - (imgsize.h>>1); // 3D x0 = x - (w>>1) //center point y0 = y - (h>>1) r = Math.sqrt(x0*x0 + y0*y0); // radius (distance) a = Math.atan(y0/x0) a = y0>0 ? (x0<0 ? Math.PI + a : a) : (x0<0 ? Math.PI + a : 2*Math.PI + a); // angle qadrant //a = a<0 ? 2*Math.PI + a : a; // angle near zero a += 0.5; x = r * Math.cos(a); y = r * Math.sin(a); x *= 0.75; y *= 0.75; x = x + (w>>1); y = y + (h>>1); arr[i][j][0] = Math.floor(x); arr[i][j][1] = Math.floor(y); |
||
1Pupik1989 Profil |
#8 · Zasláno: 26. 11. 2012, 14:18:13
Podle mě by bylo mnohem snažší přidat osu z.
|
||
peta Profil |
#9 · Zasláno: 26. 11. 2012, 14:39:17
Jeste drobnou korekci
x = x + (w>>1); y = y + (h>>1); x *= 0.75; 1Pupik1989: Dyt jsem se na reseni v javascriptu ptal a nedostal jsem rozumnou odpoved, kousek kodu. Jen odkazy na matematickou teorii. Kdyby mi bylo 12, tak se v te hatmatilce nevyznam. At si to napisi matematici srozumitelne, cesky nez to zacnou prezentovat. |
||
1Pupik1989 Profil |
Tak znova. Rotace na Y:
function rotateY(p, deg) { var deg = deg * Math.PI/180; return [ (p[0] * Math.cos(deg)) - (p[2] * Math.sin(deg)), p[1], (p[0] * Math.sin(deg)) + (p[2] * Math.cos(deg)), ]; };; Je obrázek, který má souřadnice x,y,z. x je třeba 10, y 20 a z -100. Takže pole bude vypadata následovně: [10,20,-100] Teď přesně víš, kde se v prostoru nachází. Ty chceš ten objekt natočit o, dejme tomu, 45 stupňů. Zavoláš funkci rotateY s prvním parametrem souřadnic a druhý bude úhel. Čili: rotateY(coords,45) Určitě je jasný, že pro rotaci na ose Y slouží ta prostřední Ry Vidíš tu podobnost? Hned první řádek je kosínus, pak 0, pak sínus. Je to v podstatě hodně jednoduché, jen jde o to počáteční pochopení. Maticím pro rotace se prostě nevyhneš. Nejlepší příklad pro rotace je asi Koule v HTML 5 canvasu. Nehleď na to, že je to v canvasu, ty potřebuješ hlavně ty rotace a projekci. Doufám, že jsem to vysvětlil nějak polopaticky. Vlastně řádky v matici jsou právě ty body, které potřebuješ x,y,z. Snad podle toho příklad už doděláš rotace i na zbylé osy. :) |
||
Časová prodleva: 11 let
|
0