0
98
Vistasla cámara tiene una especie de ojo de pez
Estoy jugando con p5js, y mientras generaba algunos cubos, me pareció que la "cámara" el "renderizado" se deforma alrededor de los bordes, como un ojo de pez para mí.
Aquí está el bit de código:
function setup() { createCanvas(800, 850, WEBGL); angleMode(DEGREES); } function draw() { //background color background("#ece5d8"); //don't draw faces, only vertices noFill(); //color of the strokes stroke(0); //save the following state push(); //we save that we don't draw, that we face the edge, and that we're at the left //start drawing at the left translate(-200, 0, 0); //draw our cubes for (let i = 0; i < 10; i++) { push(); translate(i * 150, 0, 0); box(150); pop(); } pop(); }Solo traduzco y nunca giro ni nada, ¿por qué el cubo no está perfectamente alineado con sus bordes y por qué se curva?
Gracias
1 Respuestas
Responde la pregunta0
En el modo WEBGL , la proyección de cámara predeterminada es la perspectiva () . Los bordes no se curvan como lo harían con una lente de ojo de pez, son rectos, pero las dimensiones de los bordes cambian según la profundidad.
Si desea renderizar los cubos y tener los bordes, simplemente use una proyección paralela usando ortho() :
function setup() { createCanvas(800, 850, WEBGL); ortho(-width / 2, width / 2, height / 2, -height / 2, -3000, 3000); angleMode(DEGREES); } function draw() { //background color background("#ece5d8"); orbitControl(); //don't draw faces, only vertices noFill(); //color of the strokes stroke(0); //save the following state push(); //we save that we don't draw, that we face the edge, and that we're at the left //start drawing at the left translate(-200, 0, 0); //draw our cubes for (let i = 0; i < 10; i++) { push(); translate(i * 150, 0, 0); box(150); pop(); } pop(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script> Nota Según las dimensiones y el posicionamiento de los cuadros, aumenté las distancias de recorte cercanas/lejanas (últimos argumentos de ortho() ). También agregué orthoControl() : esto es totalmente opcional, pero útil para ilustrar la vista ortogonal (ya que, de forma predeterminada, una vista frontal se verá igual que usar llamadas 2D rect() )