Հիմնական նյութ
Շրջել եռաչափ մարմինները
Եռաչափ հարթություններում իրերը պտտելը բարդ է հնչում, և կարող է նաև այդպես լինել, բայց կան նաև հեշտ պտույտներ: Օրինակ, եթե պատկերացնենք, որ պտտում ենք մեր խորանարդը z առանցքի շուրջ (որը էկրանից դուրս է ցույց տալիս), իրականում մենք պտտում ենք քառակուսի երկչափ հարթության մեջ:
Եռանկյունաչափություն սովորելու պատճառ
Կարող ենք ավելի պարզեցնել ամեն ինչ, եթե դիտարկենք առանձին հանգույց՝ (x, 0) դիրքի վրա: Օգտագործելով եռանկյունաչափություն՝ կգտնենք, որ θ-ով սկզբնակետի շուրջ պտտելուց հետո կետի դիրքը կլինի՝
Եթե չգիտես, թե ինչպես ստացանք այս հավասարումները, այս տեսանյութը կօգնի քեզ:
Պտտել կետը սկզբնակետի շուրջ
Վերևում նշված օրինակը թույլ է տալիս սկզբնակետի շուրջ պտտել այն կետը, որն սկսվում է x առանցքի վրա: Իսկ ի՞նչ անել, եթե այդ կետը x առանցքի վրա չէ: Դրա համար պետք են ավելի խորացված եռանկյունաչափական գիտելիքներ: Եթե կանչենք (x, y) կետի և -ի միջև հեռավորությունը, և ուղղի ու x առանցքի -ի միջև անկյունը, ապա՝
Եթե β-ով պտտենք դեպի (x', y') կետը, ապա՝
Օգտագործելով մի քանի եռանկյունաչափական նույնություններ՝ կստանանք
Փոխելով x-ի և y-ի արժեքները վերևում, նոր կոորդինատների համար ստանում ենք մի հավասարում, որը հանդես է գալիս որպես նախկին կոորդինատների և պտույտի անկյան ֆունկցիա.
Գրում ենք պտույտի ֆունկցիա
Այժմ ունենք մաթեմատիկական գիտելիքներ և կարող ենք գրել ֆունկցիա, որը թույլ է տալիս պտտել հանգույցը և նույնիսկ հանգույցների բազմությունը z առանցքի շուրջ: Այս ֆունկցիան կպտտվի հանգույցների բազմության բոլոր հանգույցների միջով, կգտնի իր x և y կոորդինատները, այնուհետև կթարմացնի դրանք: Մենք պահեստավորում ենք
sin(theta)
և cos(theta)
ցիկլից դուրս, հետևաբար պետք էդրանք մեկ անգամ հաշվենք.var rotateZ3D = function(theta) {
var sinTheta = sin(theta);
var cosTheta = cos(theta);
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
var x = node[0];
var y = node[1];
node[0] = x * cosTheta - y * sinTheta;
node[1] = y * cosTheta + x * sinTheta;
}
};
Խորանարդը 30 աստիճանով պտտելու համար ֆունկցիան կկանչենք այսպես՝
rotateZ3D(30);
Ստորև կարող ես տեսնել պտտված խորանարդը. այն նախկինից փոքր-ինչ ավելի հետաքրքիր է դարձել, բայց ոչ շատ.
Պտտել եռաչափ հարթություններում
Այժմ կարող ենք պտտել խորանարդը երկչափ հարթության մեջ, սակայն այն դեռևս նման է քառակուսու: Իսկ ի՞նչ անել, եթե ուզում ենք պտտել մեր խորանարդը y առանցքի շուրջ (ուղղահայաց առանցք): Եթե մի պահ պատկերացնենք, որ վերևից ենք նայում y առանցքի շուրջ պտտվող խորանարդին, ապա կտեսնենք պտտվող քառակուսի, ճիշտ այնպես, ինչպես z առանցքի շուրջ պտտելիս:
Կարող ենք վերցնել նախկինում մեր օգտագործած եռանկյունաչափությունը և ֆունկցիան և ընդամենը վերանվանել առանցքներն այնպես, որ z առանցքը դառնա y առանցք: Այս պարագայում հանգույցի y կոորդինատները չեն փոխվում, փոխվում են միայն x-ը և z-ը:
var rotateY3D = function(theta) {
var sinTheta = sin(theta);
var cosTheta = cos(theta);
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
var x = node[0];
var z = node[2];
node[0] = x * cosTheta - z * sinTheta;
node[2] = z * cosTheta + x * sinTheta;
}
};
Կարող ենք օգտագործել այդ նույն արգումենտը, որպեսզի այնպիսի ֆունկիցա ստեղծենք, որը կպտտի մեր խորանարդը x առանցքի շուրջը:
var rotateX3D = function(theta) {
var sinTheta = sin(theta);
var cosTheta = cos(theta);
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n];
var y = node[1];
var z = node[2];
node[1] = y * cosTheta - z * sinTheta;
node[2] = z * cosTheta + y * sinTheta;
}
};
Այժմ, երբ ունենք այդ ֆունկցիաները, մյուս երկու առանցքներով կարող ենք պտտել 30 աստիճան:
rotateX3D(30);
rotateY3D(30);
Ստորև կարող ես տեսնել վերջնական կոդը: Փորձիր օգտագործել թվի սանդղակը՝ ֆունկցիայի կանչերի մեջ արժեքները փոխելու համար:
Օգտատիրոջ գործողություններ
Անշուշտ, խորանարդը պտտելու համար կարող ենք ավելացնել ֆունկցիայի կանչերը, բայց ավելի նպատակահարմար կլինի, եթե թույլ տանք օգտագիրոջը՝ պտտել խորանարդը մկնիկի միջոցով: Դրա համար պետք է ստեղծենք
mouseDragged()
ֆունկցիա: Այս ֆունկցիան ավտոմատ կերպով կանչվում է, երբ մկնիկը շարժվում է:mouseDragged = function() {
rotateY3D(mouseX - pmouseX);
rotateX3D(mouseY - pmouseY);
};
mouseX
-ը և mouseY
-ը ի սկզբանե ներդված փոփոխականներ են, որոնք կառավարում են մկնիկի ներկայիս դիրքը:pmouseX
-ը ևpmouseY
-ն ի սկզբանե ներդված փոփոխականներ են, որոնք կառավարում են մկնիկի նախկին դիրքը: Այսպիսով՝ եթե x կոորդինատը մեծանում է (մկնիկը շարժում ենք աջ), ապա դրական արժեք ենք ուղարկում rotateY3D()
-ին և պտտում ենք խորանարդը y առանցքի շուրջ՝ ժամսլաքի հակառակ ուղղությամբ:Կարող ես ինքդ համոզվել.
Ուզո՞ւմ ես միանալ խոսակցությանը։
Առայժմ հրապարակումներ չկան։