2

我有一个基于两条线相交算法的 2 点投影草图。例如，如果有一个 3D 点{ x: -4, y: 2, z: -2 }和轴原点是预定义的，我可以找到a = {x: -4, y: 2, z: 0}和b = {x: 0, y: 2, z: -2}点并找到一条可能的线{vanishingPointX, a)和另一条线的交点，{vanishingPointZ, b)你可以看到代码工作正常。

在此处输入图像描述

任务是添加另一个第三点，所以输出应该是这样的：

在此处输入图像描述

这是一个粗略的插图，有些线条是扭曲的。

我试图沿 X 轴投影 Y 值，但无论如何，既没有三线相交的算法，也没有这三条线不会在一点相交。

最后但并非最不重要的一点是，我知道这个问题可以用矩阵来解决，但是，我正在尝试不使用微积分。

const scale = 64.0;
const far = 6.0;

const cube = [

  { x: 1.0, y: 1.0, z: 1.0 },
  { x: 1.0, y: -1.0, z: 1.0 },
  { x: -1.0, y: -1.0, z: 1.0 },
  { x: -1.0, y: 1.0, z: 1.0 },
  { x: 1.0, y: 1.0, z: -1.0 },
  { x: 1.0, y: -1.0, z: -1.0 },
  { x: -1.0, y: -1.0, z: -1.0 },
  { x: -1.0, y: 1.0, z: -1.0 },

];

const sides = [0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7];

let vanishingPointZ = { x: -3.5, y: 2.0 };
let vanishingPointX = { x: 5.0, y: 2.0 };
let vanishingPointY = { x: 0.0, y: -6.0 };

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

let zero = { x: canvas.width / 2, y: canvas.height / 2 };

draw();

function draw(){

    ctx.font = '32px serif';
    ctx.fillStyle = "#0F0"
    ctx.fillText('X', zero.x + vanishingPointX.x * scale + 16, zero.y + vanishingPointX.y * scale + 16);
    ctx.fillStyle = "#F0F";
    ctx.fillText('Y', zero.x + vanishingPointY.x * scale + 32, zero.y + vanishingPointY.y * scale + 16);
    ctx.fillStyle = "#00F";
    ctx.fillText('Z', zero.x + vanishingPointZ.x * scale - 32, zero.y + vanishingPointZ.y * scale + 16);

    cube.forEach((p_, i_) =>{

        project(p_);

        let pos = { x: zero.x + p_.dx * scale, y: zero.y + p_.dy * scale };

        //to x
        ctx.beginPath();
        ctx.moveTo(zero.x + vanishingPointX.x * scale, zero.y + vanishingPointX.y * scale);
        ctx.lineTo(pos.x, pos.y);
        ctx.closePath();
        ctx.strokeStyle = "rgba(0, 255, 0, 0.33)";
        ctx.stroke();

        //to z
        ctx.beginPath();
        ctx.moveTo(zero.x + vanishingPointZ.x * scale, zero.y + vanishingPointZ.y * scale);
        ctx.lineTo(pos.x, pos.y);
        ctx.closePath();
        ctx.strokeStyle = "rgba(0, 0, 255, 0.33)";
        ctx.stroke();

        //to upper y
        //to x
        ctx.beginPath();
        ctx.moveTo(zero.x + vanishingPointY.x * scale, zero.y + vanishingPointY.y * scale);
        ctx.lineTo(pos.x, pos.y);
        ctx.closePath();
        ctx.strokeStyle = "rgba(255, 0, 255, 0.33)";
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(pos.x, pos.y, 8, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = "#DEDEDE";
        ctx.fill();

    })

    for(let i = 0; i < sides.length; i += 2){

        ctx.beginPath();
        ctx.moveTo(zero.x + cube[sides[i]].dx * scale, zero.y + cube[sides[i]].dy * scale);
        ctx.lineTo(zero.x + cube[sides[i + 1]].dx * scale, zero.y + cube[sides[i + 1]].dy * scale);
        ctx.closePath();
        ctx.strokeStyle = "#000";
        ctx.stroke();

    }

}

function project(p_){

  let distX = Math.sqrt(Math.pow(vanishingPointX.x, 2), Math.pow(vanishingPointX.y - p_.y, 2));
  let vx = { x: vanishingPointX.x, y: vanishingPointX.y - p_.y };

  let nx = Math.exp( p_.x / far );

  vx.x *= nx;
  vx.y *= nx;

  let x = { x: vanishingPointX.x - vx.x, y: vanishingPointX.y - vx.y };

  let distZ = Math.sqrt(Math.pow(vanishingPointZ.x, 2), Math.pow(vanishingPointZ.y - p_.y, 2));
  let vz = { x: vanishingPointZ.x, y: vanishingPointZ.y - p_.y };

  let nz = Math.exp( p_.z / far );

  vz.x *= nz;
  vz.y *= nz;

  let z = { x: vanishingPointZ.x - vz.x, y: vanishingPointZ.y - vz.y };

  let out =  twoLinesIntersection(vanishingPointZ, z, vanishingPointX, x);

  //trying to calculate y projection and it seems that as standalone it work fine

  let distY = Math.sqrt(Math.pow(vanishingPointY.x, 2), Math.pow(vanishingPointX.y - p_.x, 2));
  let vy = { x: vanishingPointY.y, y: vanishingPointY.y - p_.x };

  let ny = Math.exp( p_.y / far );

  vy.x *= ny;
  vy.y *= ny;

  let y = { x: vanishingPointY.x - vy.x, y: vanishingPointY.y - vy.y };

  p_.dx = out.x;
  p_.dy = out.y;

}

function twoLinesIntersection(p1_, p4_, p3_, p2_){

    let d1 = (p1_.x - p2_.x) * (p3_.y - p4_.y);
    let d2 = (p1_.y - p2_.y) * (p3_.x - p4_.x);
    let d  = (d1) - (d2);

    let u1 = (p1_.x * p2_.y - p1_.y * p2_.x);
    let u4 = (p3_.x * p4_.y - p3_.y * p4_.x);

    let u2x = p3_.x - p4_.x;
    let u3x = p1_.x - p2_.x;
    let u2y = p3_.y - p4_.y;
    let u3y = p1_.y - p2_.y;

    return { x: (u1 * u2x - u3x * u4) / d, y: (u1 * u2y - u3y * u4) / d };

}
body { margin: 0; }
<canvas id='canvas' width='800' height='800'></canvas>

4

1 回答 1

1

我们可以使计算变得更容易，而不是将向量化合物添加到起始坐标，直到我们处于“真实”坐标，将问题视为线交点之一。例如，如果我们想要这个点，XYZ = (1,2,2)我们可以按照这个视觉“配方”使用线交叉点找到它：

在此处输入图像描述

对于任何 3D 点，我们可以首先计算 YZ 和 XY 平面上的点，然后我们可以找到与多条线相交的真实点。这确实依赖于知道在屏幕上的哪个位置可以找到我们的原点（我们可以在三角形 ZYX 的中间选择一个点，但是无论我们选择什么屏幕点，我们都称它为C，之后代码如下所示：

function get(x, y, z) {
  if (x===0 && y===0 && z===0) return C;
    
  // Get the points at the distances along our Z and X axes:
  const px = lerp(C, X, perspectiveMap(x));
  const pz = lerp(C, Z, perspectiveMap(z));

  // If our 3D coordinate lies on the XZ plane, then this
  // is just a matter of finding the line/line intersection:
  if (y==0) return twoLinesIntersection(X, pz, Z, px);

  // If it's not, we construct the two points on the YZ and XY planes:
  const py = lerp(C, Y, perspectiveMap(y));
  const YZ = twoLinesIntersection(Y, pz, Z, py);
  const XY = twoLinesIntersection(Y, px, X, py);

  // And then the 3D coordinate is a line/line intersection with those.
  return twoLinesIntersection(XY, Z, X, YZ);
}

function lerp(v1, v2, r) {
  const mr = 1 - r;
  return {
    x: v1.x * mr + v2.x * r,
    y: v1.y * mr + v2.y * r,
    z: v1.z * mr + v2.z * r,
  };
}

使用透视映射功能将轴上的值转换为原点和轴消失点之间的距离比。该函数的外观实际上取决于您，但是如果我们希望直线保持笔直，我们将需要一个理性的透视函数：

const DEFAULT_PERSPECTIVE_STRENGTH = 0.3;

function perspectiveMap(value, strength=DEFAULT_PERSPECTIVE_STRENGTH) {
  return 1 - 1/(1 + value * strength);
}

（我们计算“1 减...”，因为作为原点和消失点之间的比率，我们希望这个值在 x/y/z=0 时为 0，这样就lerp(origin, vanishingPoint, value)产生了原点，我们希望它变成1 当 x/y/z 接近无穷大时。就其本身而言，1/(1+v*s)与此完全相反，因此从一个“翻转”它中减去它）

实现为片段：

const w = 600, h = 300;
perspective.width = w;
perspective.height = h;
const DEFAULT_PERSPECTIVE_STRENGTH = 0.2;
const ctx = perspective.getContext("2d");

// our vanishing points and origin
let Z = { x: w*0.05, y: h*0.85 };
let X = { x: w*0.92, y: h*0.95 };
let Y = { x: w*0.65, y: h*0.1 };
let C = { x: w*0.65, y: h*0.50 };

// draw our "grid" and labels
line(X,C);
line(Y,C);
line(Z,C);

ctx.strokeStyle = `#00000020`;
drawGrid(10);
ctx.fillStyle = `#400`;

text("X", X,  10, 0);
text("Z", Z, -10, 0);
text("Y", Y, 0, -5);

// draw a 2x2x2 cube

ctx.strokeStyle = `#000000`;
drawCube(2);

// ------------ functions for content ------------

function drawGrid(e) {
  for(let i=0; i<e; i++) {
    line(X, get(0,i,0));
    line(X, get(0,0,i));
    line(Y, get(i,0,0));
    line(Y, get(0,0,i));
    line(Z, get(i,0,0));
    line(Z, get(0,i,0));
  }  
}

function drawCube(n) {
  const cube = getCube(n);
  const [p1,p2,p3,p4,p5,p6,p7,p8] = cube.map(p => get(p));
  quad(p1,p2,p3,p4);
  quad(p5,p6,p7,p8);
  line(p1,p5);
  line(p2,p6);
  line(p3,p7);
  line(p4,p8);
}

function getCube(n) {
  return [
    {x: n, y: n, z: n},
    {x: 0, y: n, z: n},
    {x: 0, y: n, z: 0},
    {x: n, y: n, z: 0},
    {x: n, y: 0, z: n},
    {x: 0, y: 0, z: n},
    {x: 0, y: 0, z: 0},
    {x: n, y: 0, z: 0},
  ];
}

// ------------ some draw util functions ------------

function line(p1, p2) {
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
  ctx.stroke(); 
}

function quad(p1, p2, p3, p4) {
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
  ctx.lineTo(p3.x, p3.y);
  ctx.lineTo(p4.x, p4.y);
  ctx.closePath();
  ctx.stroke(); 
}

function text(str, point, ox=0, oy=0) {
  const { x, y } = point;
  ctx.fillText(str, x+ox, y+oy);
}

// ------------ and: our coordinate computer ------------

function get(x,y,z) {
  if (y === undefined) {
    z = x.z;
    y = x.y;
    x = x.x
  }

  if (x===0 && y===0 && z===0) return C;

  const px = lerp(C, X, map(x));
  const pz = lerp(C, Z, map(z));
  if (y==0) return lli(X, pz, Z, px);

  const py = lerp(C, Y, map(y));
  const YZ = lli(Y, pz, Z, py);
  const XY = lli(Y, px, X, py);
  return lli(XY, Z, X, YZ);
}

function lerp(v1, v2, r) {
  const mr = 1 - r;
  return {
    x: v1.x * mr + v2.x * r,
    y: v1.y * mr + v2.y * r,
    z: v1.z * mr + v2.z * r
   }
}

function lli(p1,p2,p3,p4) {
  return lli8(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y,p4.x,p4.y);
}

function lli8(x1,y1,x2,y2,x3,y3,x4,y4) {
  const d = (x1-x2)*(y3-y4) - (y1-y2)*(x3-x4);
  if (d === 0) return undefined;

  const f12 = (x1*y2 - y1*x2);
  const f34 = (x3*y4 - y3*x4);
  const nx = f12*(x3-x4) - (x1-x2)*f34;
  const ny = f12*(y3-y4) - (y1-y2)*f34;
  return { x: nx/d, y: ny/d };
}

function map(value, strength=DEFAULT_PERSPECTIVE_STRENGTH) {
  return 1 - 1/(1 + value*strength);
}
canvas { border: 1px solid black; }
<canvas id="perspective">

于 2021-06-06T18:46:36.867 回答