我尝试使用我的矢量制作一个纯 3d 立方体。 一下子就觉得很完美了,但是旋转的时候发现有些线条没有画好,不完美。
我不知道为什么它不完美。我的一些向量是错误的吗?
我正在使用 p5.js 来绘制它。我知道他们有 3d 旋转方法和一些 3d 图元。但我不想使用它们。我想画我自己的 3d 立方体。
这是我用作参考的代码: https://github.com/OneLoneCoder/videos/blob/master/OneLoneCoder_olcEngine3D_Part1.cpp
const xIndex = 0;
const yIndex = 1;
const zIndex = 2;
const triSides = 3;
const ratio = 110;
const framesPerSecond = 30;
const screenWidth = 600;
const screenHeight = 600;
const fntSize = 20;
var vertices = [
// South
[
[-1.0, -1.0, -1.0], [-1.0, 1.0, -1.0], [1.0, 1.0, -1.0]
],
[
[-1.0, -1.0, -1.0], [1.0, 1.0, -1.0], [1.0, -1.0, -1.0]
],
// Top
[
[-1.0, 1.0, -1.0], [-1.0, 1.0, 1.0], [1.0, 1.0, 1.0]
],
[
[-1.0, 1.0, -1.0], [1.0, 1.0, 1.0], [1.0, 1.0, -1.0]
],
// West
[
[-1.0, -1.0, 1.0], [-1.0, 1.0, 1.0], [-1.0, 1.0, -1.0],
],
[
[-1.0, -1.0, 1.0], [-1.0, 1.0, -1.0], [-1.0, -1.0, -1.0]
],
// East
[
[1.0, -1.0, -1.0], [1.0, 1.0, -1.0], [1.0, 1.0, 1.0]
],
[
[1.0, -1.0, -1.0], [1.0, 1.0, 1.0], [1.0, -1.0, 1.0]
],
// Bottom
[
[1.0, -1.0, 1.0], [-1.0, -1.0, 1.0], [-1.0, -1.0, -1.0]
],
[
[1.0, -1.0, 1.0], [-1.0, -1.0, -1.0], [1.0, -1.0, -1.0]
],
// North
[
[1.0, -1.0, 1.0], [1.0, 1.0, 1.0], [-1.0, 1.0, 1.0]
],
[
[1.0, -1.0, 1.0], [-1.0, 1.0, 1.0], [-1.0, -1.0, 1.0]
],
];
//let myFont;
//function preload() {
// myFont = loadFont('assets/Roboto-Black.ttf');
//}
function setup() {
createCanvas(screenWidth, screenHeight, WEBGL);
strokeWeight(1);
frameRate(framesPerSecond);
//textFont(myFont, fntSize);
stroke(0, 0, 0);
}
function draw() {
background(220);
for (let i = 0; i < vertices.length; i++) {
var tri = vertices[i];
let originPoint = {
x: tri[0][xIndex] * ratio,
y: tri[0][yIndex] * ratio,
z: tri[0][zIndex] * ratio
}
let point2 = {
x: tri[1][xIndex] * ratio,
y: tri[1][yIndex] * ratio,
z: tri[1][zIndex] * ratio
}
let point3 = {
x: tri[2][xIndex] * ratio,
y: tri[2][yIndex] * ratio,
z: tri[2][zIndex] * ratio
}
switch (i) {
case 0:
case 1:
// Red
fill(255, 100, 100, 100);
break;
case 2:
case 3:
// Yellow
fill(255, 255, 100, 100);
break;
case 4:
case 5:
// Blue
fill(100, 255, 255, 100);
break;
case 6:
case 7:
// Purple
fill(100, 100, 255, 100);
break;
case 8:
case 9:
// White
fill(255, 255, 255, 100);
break;
case 10:
case 11:
// Black
fill(0, 0, 0, 100);
}
beginShape();
vertex(originPoint.x, originPoint.y, originPoint.z);
vertex(point2.x, point2.y, point2.z);
vertex(point3.x, point3.y, point3.z);
endShape();
}
}
// Eixo Z
function rotateZ3D(obj, angleRotation) {
let angleCos = cos(angleRotation);
let angleSin = sin(angleRotation);
rotatedX = (obj[xIndex] * angleCos) - (obj[yIndex] * angleSin);
rotatedY = (obj[xIndex] * angleSin) + (obj[yIndex] * angleCos);
rotatedZ = obj[zIndex];
return [rotatedX, rotatedY, rotatedZ];
}
// Eixo Y
function rotateY3D(obj, angleRotation) {
let angleCos = cos(angleRotation);
let angleSin = sin(angleRotation);
rotatedX = (obj[xIndex] * angleCos) + (obj[zIndex] * angleSin);
rotatedY = obj[yIndex];
rotatedZ = (obj[xIndex] * -angleSin) + (obj[zIndex] * angleCos);
return [rotatedX, rotatedY, rotatedZ];
}
// Eixo X
function rotateX3D(obj, angleRotation) {
let angleCos = cos(angleRotation);
let angleSin = sin(angleRotation);
rotatedX = obj[xIndex];
rotatedY = (obj[yIndex] * angleCos) + (obj[zIndex] * -angleSin);
rotatedZ = (obj[yIndex] * angleSin) + (obj[zIndex] * angleCos);
return [rotatedX, rotatedY, rotatedZ];
}
function mouseDragged() {
if (mouseX < screenWidth && mouseY < screenHeight) {
let currentX = (mouseX / (framesPerSecond * 1000)) * movedX;
let currentY = -(mouseY / (framesPerSecond * 1000)) * movedY;
for (let i = 0; i < vertices.length; i++) {
for (let j = 0; j < 3; j++) {
let currVertices = vertices[i][j];
let xRotatedVer = rotateX3D(currVertices, currentY);
let yRotatedVer = rotateY3D(xRotatedVer, currentX);
vertices[i][j] = yRotatedVer;
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
答案 0 :(得分:2)
您需要关闭三角形周围的轮廓:
ssh