javascript - 三点投影JS

标签 javascript vector projection orthographic vanishing-point

我有一个基于两条线相交算法的 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) ，如您所见，代码运行良好。

enter image description here

任务是添加另一个第三点，因此输出应如下所示:

enter image description here

it's a rough illustration, some lines are distorted.

我尝试沿 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>

最佳答案

我们可以通过以下方式使计算变得更容易，而不是将向量复合添加到起始坐标，直到我们到达“真实”坐标，将问题视为直线交叉点之一。例如，如果我们想要点 XYZ = (1,2,2)我们可以按照以下视觉“食谱”使用线相交来找到它:

enter image description here

对于任何 3D 点，我们可以首先计算 YZ 和 XY 平面上的点，然后再通过一次直线交点找到真实点。这确实依赖于知道我们的原点在屏幕上的位置(我们可以在三 Angular 形 Z-Y-X 的中间选择一个点，但是无论我们选择哪个屏幕点，我们都将其称为 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) 就会产生原点，我们希望当 x/y/z 接近无穷大时它变成 1。就其本身而言，1/(1+v*s) 的作用与此完全相反，因此从 1 中减去它会“翻转”它)

作为片段实现:

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">

关于javascript - 三点投影JS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67730606/

上一篇：docker-compose - docker-compose 文件中 ENV 变量 DOCKER_REGISTRY 后面的连字符是什么

下一篇：r - 如何向 ggplot2 中的 geom_col 添加误差线？

相关文章：

javascript - 输入到form，输出到iframe URL

javascript - 如何使用内置局部变量参数编写函数？

c++ - 通过引用返回通过引用传递的 vector 的实用程序

C++ : Vector of template class

matlab - 将指针移动到对象上 (MATLAB)

linq-to-sql - LINQ to SQL 投影 : Func vs Inline

Android native GLES 2.0 空白屏幕与 MVP 矩阵

javascript - 了解 JavaScript 中另一个函数的 ajax 调用结果

javascript - 跨 Controller 发送数据

matlab - MATLAB中方括号的使用

©2024 IT工具网  联系我们