Как реализовать z координату?

Question

[po4emuch]

Доброго времени суток. Изучаю формат .obj и решил сделать простой просмотр 3д объектов. Столкнулся с препятствием, которое не знаю даже как правильно гуглить. Когда разворачиваю объъект боком, то объект становится плоским. Как отобразить эту глубину? Поменять z с x?

Comments

[Ivan Bogachev]

решил сделать простой просмотр 3д объектов... Когда разворачиваю объект боком...

Думаю стоит рассказать подробнее о контексте, в котором все у вас происходит. А лучше работающий пример с проблемой показать. Сейчас это больше похоже на угадывание по фотографии - может какая-то модель в какой-то программе сделана как-то неправильно, а может вы где-то что-то не то написали в каких-то скриптах.

[Somewhere Intech]

Вы случайно не на канвасе пытаетесь отрисовать модель?

[po4emuch]

Johnny Lowhunter, Да, именно.

[profesor08]

po4emuch, https://codesandbox.io/ демо в студию. По картинкам гадать никто не станет.

[po4emuch]

Ivan Bogachev, Имеется массив вершин vertex.

function draw() {
    let zBuffer = [];

    for (let i = 0; i < canv.height; ++i) {
      zBuffer[i] = new Int32Array(canv.width + 1);
    }

    zBuffer = zBuffer.map(e => e.map(l => l - 100));
    // console.log(zBuffer);

    ctx.clearRect(0, 0, canv.width, canv.height);

    for (let i = 0; i < vertex.length; ++i) {
      let x = vertex[i].x;
      let y = vertex[i].y;

      let xx = parseInt(x);
      let yy = parseInt(y);

      try {
        if (vertex[i].z <= parseFloat(zBuffer[yy][xx])) continue;
        zBuffer[yy][xx] = vertex[i].z;
      } catch (e) {}
      ctx.beginPath();
      ctx.arc(x, y, 1, 0, Math.PI * 2, false);
      ctx.closePath();
      ctx.fill();
    }
  }

// Тут по нажатию левой стрелки, объект вращается.
// MultiplyMatrix - произведение матриц 
window.onkeydown = e => {
    let grad = (5 * Math.PI) / 180;
    // let grad = 360;
    let p = 2;
    let mat1 = [
      [Math.cos(grad), -Math.sin(grad), 0],
      [Math.sin(grad), Math.cos(grad), 0],
      [0, 0, 1]
    ];
    if (e.keyCode === 37) {
      for (let i = 0; i < vertex.length; ++i) {
        let mat1 = [
          [Math.cos(grad), 0, Math.sin(grad)],
          [0, 1, 0],
          [-Math.sin(grad), 0, Math.cos(grad)]
        ];
        let mat2 = [[vertex[i].x - 400], [vertex[i].y - 400], [vertex[i].z]];

        let ans = MultiplyMatrix(mat1, mat2);

        vertex[i].x = ans[0][0] + 400;
        vertex[i].y = ans[1][0] + 400;
        vertex[i].z = ans[2][0];
      }
      draw();
    }
  };

[po4emuch]

profesor08, Сглупил и кинул в комменты. Вот рабочий прототип: тык
Управление: левая стрелочка и правая

Answer 1

[forspamonly2]

у вас всё нормально поворачивается, просто модель собаки сплюснутая. по оси z примерно в 10 раз. вот тут я добавил простейший скейлинг

console.log("data loaded");
vertex.forEach(v => (v.z *= 10.0));

Comments

[po4emuch]

Спасибо больше