Հիմնական նյութ
Ստանալ եռաչափ մարմիններ
Ուրեմն, հիմա ունենք մի խորանարդ: Իսկ ի՞նչ կլինի, եթե ցանկանանք փոխել խորանարդի դիրքը, չափը կամ էլ ունենանք ուղղանկյունաձև վեցանիստ կամ շատ վեցանիստեր: Տվյալ կոդով մենք ստիպված ենք մեկ առ մեկ փոխել հանգույցները, ինչը անիմաստ է: Անհրաժեշտ է մի պարզ մեթոդ, որով կկարողանանք ստեղծել վեցանիստ՝ հստակ դիրքի և հարթության: Այլ կերպ ասած՝ ցանկանում ենք ունենալ մի ֆունկցիա, որը դիրքը և հարթությունները վերածում է հանգույցների և կողմերի շարքի:
Վեցանիստի սահմանումը
Վեցանիստն ունի երեք չափում՝ լայնություն, բարձրություն և խորություն:
Այն նաև իր դիրքն ունի 3D տարածությունում՝ մեզ տալով վեց պարամետր: Խորանարդի դիրքը սահմանելու երկու տարբերակ կա. կարող ենք սահմանել խորանարդի կենտրոնը կամ էլ մի անկյունը: Առաջինն ավելի տարածված է, իսկ երկրորդը ավելի հեշտ է կիրառել:
Անհրաժեշտ է, որ մեր ֆունկցիան վերադարձնի և հանգույցները, և կողմերի շարքը: Երկու փոփոխականները վերադարձնելու տարբերակներից մեկը փոփոխականի տեղակայումն է օբյեկտի՝
հանգույցներով
և կողմերով
: Ուշադրություն դարձրու, որ կարող ես օգտագործել ցանկացած տող, որպեսզի հնարավոր լինի հղում կատարել փոփոխականին. պարզապես ավելի հեշտ է օգտագործել նույն բառը:// Ստեղծիր մի վեցանիստ գագաթի տվյալներով (x, y, z)
// w լայնությամբ, h բարձրությամբ և d խորությամբ:
var createCuboid = function(x, y, z, w, h, d) {
var nodes = [];
var edges = [];
var shape = { 'nodes': nodes, 'edges': edges };
return shape;
};
Եթե օգտագործեինք այդ ֆունկցիան՝ վեցանիստ ստանալու համար, կհասնեինք առաջին հանգույցին այսպես՝
var object = createCuboid(0, 0, 0, 100, 160, 50);
var node0 = shape.nodes[0];
Սրա շնորհիվ
node0
-ին կփոխանցվի nodes
զանգվածի առաջին արժեքը։ Այնուամենայնիվ, այս պահին հանգույցների կամ կողերի զանգվածում արժեքներ չկան։Հանգույցներն այնպես կսահմանենք, որ դրանք լինեն յուրաքանչյուր դիրքին համապատասխան հարթության կամ առանց համապատասխան հարթության համադրում: Կողմերը կսահմանեն նույն եղանակով, ինչ որ նախկինում (բացի այն դեպքերից, երբ, ի տարբերություն մեկ առ մեկ սահմանելու, կսահմանենք բոլորը միանգամից): Ուշադրություն դարձրու, որ այս ֆունկցիան հնարավորություն է տալիս բացասական հարթություններ սահմանել վեցանիստի համար:
var createCuboid = function(x, y, z, w, h, d) {
var nodes = [[x, y, z ], [x, y, z+d], [x, y+h, z ], [x, y+h, z+d], [x+w, y, z ], [x+w, y, z+d], [x+w, y+h, z ], [x+w, y+h, z+d]];
var edges = [[0, 1], [1, 3], [3, 2], [2, 0], [4, 5], [5, 7], [7, 6], [6, 4], [0, 4], [1, 5], [2, 6], [3, 7]];
return { 'nodes': nodes, 'edges': edges};
};
Կարող ենք ստանալ 100 լայնությամբ, 160 բարձրությամբ, 50 խորությամբ վեցանիստ և մեկ հանգույց դրա վրա այսպես՝
var shape = createCuboid(0, 0, 0, 100, 160, 50);
Քանի որ մեր նախկին կոդը միայն հղում է ընդհանուր
հանգույցներ
և կողմեր
փոփոխականներին, անհրաժեշտ է պահեստավորել մեր օբյեկտի հատկությունները հետևյալ ընդհանուր փոփոխականներում.var nodes = shape.nodes; var edges = shape.edges;
Ամբողջական կոդը կարող ես տեսնել ստորև.
Աշխատանքը բազմաթիվ մարմինների հետ
Կարող ենք ստեղծել տարբեր հարթություններում գտնվող մարմիններ, իսկ ի՞նչ կլինի, եթե ցանկանանք ստեղծել մեկից ավելին: Շարքը կարող է օգնել, երբ ցանկանում ենք ունենալ տարբեր քանակությամբ մարմիններ: Դե ուրեմն արի ստեղծենք մարմինների շարք:
var shape1 = createCuboid(-120, -20, -20, 240, 40, 40);
var shape2 = createCuboid(-120, -50, -30, -20, 100, 60);
var shape3 = createCuboid( 120, -50, -30, 20, 100, 60);
var shapes = [shape1, shape2, shape3];
Այժմ պետք է փոխենք ցուցադրվածը և պտտենք ֆունկցիան, որ կարողանանք աշխատել օբյեկտների շարքի հետ: Դիր կոդը, որպեսզի այն ցուցադրի կողերը ցիկլում, որն էլ կրկնվում է բոլոր մարմիններում:
// Draw edges
stroke(edgeColor);
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
var edges = shapes[shapeNum].edges;
for (var e = 0; e < edges.length; e++) {
var n0 = edges[e][0];
var n1 = edges[e][1];
var node0 = nodes[n0];
var node1 = nodes[n1];
line(node0[0], node0[1], node1[0], node1[1]);
}
}
Եվ նմանատիպ for ցիկլ հանգույցների ցուցադրման համար.
// Draw nodes
fill(nodeColor);
noStroke();
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
for (var n = 0; n < nodes.length; n++) {
var node = nodes[n]; ellipse(node[0], node[1], nodeSize, nodeSize);
}
}
Կարող ենք նմանատիպ ցիկլ ավելացնել յուրաքանչյուր պտտման ֆունկցիային, բայց ավելի հարմար է փոխանցել հանգույցների շարքը յուրաքանչյուր ֆունկցիային: Այսպիսով՝ կարող ենք պտտել մարմինները՝ մեկը մյուսից անկախ: Օրինակ՝ rotateZ3D() ֆունկցիան կունենա հետևյալ տեսքը.
var rotateZ3D = function(theta, nodes) { ... };
Այժմ, երբ օգտագործում ենք մկնիկը՝ պտտելու համար, ստիպված ենք կրկնել գործողությունը մարմինների համար և կանչել ֆունկցիան յուրաքանչյուրի համար.
mouseDragged = function() {
var dx = mouseX - pmouseX;
var dy = mouseY - pmouseY;
for (var shapeNum = 0; shapeNum < shapes.length; shapeNum++) {
var nodes = shapes[shapeNum].nodes;
rotateY3D(dx, nodes);
rotateX3D(dy, nodes);
}
};
Համոզվիր, որ ջնջում ես պտտման ֆունկցիայի՝ հանգույց չփոխանցող կանչերը։ Ամբողջական կոդը կգտնես ստորև։
Ուզո՞ւմ ես միանալ խոսակցությանը։
Առայժմ հրապարակումներ չկան։