我刚开始学习p5.js，我正在尝试用一个球体和一堆圆柱体在p5.js中制作一种3D冠状病毒。。
你可以在这里看到我的草图：https://editor.p5js.org/zzzzzij/sketches/frE9-37R
var sketch = function (p) {
with(p) {
let angle = 0;
p.setup = function() {
createCanvas(400, 400, WEBGL);
};
p.draw = function() {
ambientLight(255);
background(175);
noStroke();
rotateY(angle);
rotateZ(angle*0.8);
normalMaterial();
push();
rotateY(PI);
sphere(100);
pop();
push();
for (i = 0; i < 24; i ++) {
rotateZ(PI/6);
push();
translate (0, -21*5, 0*5);
rotateY(PI/18);
rotateX(0);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/5);
push();
translate (0, -19*5, 9*5);
rotateY(PI/18);
rotateX(-PI/8);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/4);
push();
translate (0, -15*5, 15*5);
rotateY(PI/18);
rotateX(-PI/4);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/3);
push();
translate (0, -9*5, 19*5);
rotateY(PI/18);
rotateX(-PI/2.5);
cylinder (6, 20);
pop();
}
for (i = 0; i < 5; i ++) {
rotateZ(0);
push();
translate (0, 0*5, 21*5);
rotateY(0);
rotateX(-PI/2);
cylinder (6, 20);
pop();
}
for (i = 0; i < 5; i ++) {
rotateZ(0);
push();
translate (0, 0*5, -21*5);
rotateY(0);
rotateX(-PI/2);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/3);
push();
translate (0, 9*5, -19*5);
rotateY(-PI/18);
rotateX(-PI/2.5);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/4);
push();
translate (0, 15*5, -15*5);
rotateY(-PI/18);
rotateX(-PI/4);
cylinder (6, 20);
pop();
}
for (i = 0; i < 24; i ++) {
rotateZ(PI/5);
push();
translate (0, 19*5, -9*5);
rotateY(-PI/18);
rotateX(-PI/8);
cylinder (6, 20);
pop();
}
pop();
angle+=0.01;
};
}
};
let node = document.createElement('div');
window.document.getElementById('p5-container').appendChild(node);
new p5(sketch, node);body {
background-color:#e9e9e9;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
<div id="p5-container"></div>由于我需要每个圆柱体都指向不同的方向，所以我想出了使用一组for循环，每次循环收缩并沿着X和Y旋转一点时，都会沿着Z轴一个接一个地做一个圆柱体带。
正如你所看到的，这已经为我带来了7个for循环。其中3个只是有一些负值，其他3个完成了球。
我只是想知道是否有一种方法可以在嵌套循环中为循环编写这些？我已经考虑过了，但就是想不出解决方案。。。
或者，如果有人有更好的方法来写这些圆柱体循环？
谢谢！
这里有一个简单的解决方案。我在下面的代码中所做的是，我首先根据total顶点的数量计算每个顶点的位置，并将它们存储在一个名为globe的2D数组中！这将允许您存储信息，这些信息可以稍后在代码中使用，以在单数for循环中绘制球体和圆柱体(每个(！
然后，我根据globe中存储的信息，使用三角形(换句话说，顶点、边和面(创建了一个球体。你会注意到，我画的不是圆柱体，而是球体。如果你试着把它换成圆柱体，它看起来不会很有吸引力。我不太擅长数学，但你可以通过计算每个顶点的normals来解决这个问题。你可能会发现这个单位向量(Normalize(-代码和Normalize((的本质很有用，但请记住，你需要将其从2D转换为3D！
const globe = []; //Holds a 2D array of vectors (v1,v2)
const r = 70; //Radius of circle
const total = 15; //number of vertices
let angleX = 0; //Rotate X axis
let angleY = 0; //Rotate Y axis
function setup() {
createCanvas(300, 200, WEBGL);
//Calculate vectors according to number of vertices given
for (let i = 0; i < total + 1; i++) {
globe[i] = []; //Create 2D array to hold vertices
const lat = map(i, 0, total, 0, PI);
for (let j = 0; j < total + 1; j++) {
const lon = map(j, 0, total, 0, TWO_PI);
const x = r * sin(lat) * cos(lon);
const y = r * sin(lat) * sin(lon);
const z = r * cos(lat);
globe[i][j] = createVector(x, y, z); //Store vertices in 2D array
}
}
}
function draw(){
background(51);
rotateX(angleX);
rotateY(angleY);
fill(255);
stroke(1);
//Draw Sphere using globe 2D array
for (let i = 0; i < total; i++) {
beginShape(TRIANGLE_STRIP);
for (let j = 0; j < total + 1; j++) {
const v1 = globe[i][j];
vertex(v1.x, v1.y, v1.z);
const v2 = globe[i + 1][j];
vertex(v2.x, v2.y, v2.z);
vertices = [v1,v2];
}
endShape();
}
//Draw Cylinders
for (i = 0; i < total; i ++) {
for (j = 0; j < total; j ++) {
const v1 = globe[i][j];
const v2 = globe[i + 1][j];
push();
noStroke();
translate(v1.x,v1.y,v1.z)
normalMaterial();
sphere(3,5);
pop();
}
}
//Rotate on X & Y axes
angleX += 0.005;
angleY += 0.006;
}html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>