三点投影JS

如何解决三点投影JS

我有一个基于两条线相交算法的 2 点投影草图。例如，如果有一个 3D 点 a = {x: -4,y: 2,z: 0} 并且轴原点是预先定义的，我可以找到 b = {x: 0,z: -2} 和 {vanishingPointX,a) 点并找到一个可能的线 {vanishingPointZ,b) 和另一个交点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,{ x: -1.0,z: -1.0 },]; const sides = [0,1,2,3,4,5,6,7,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.33)"; ctx.stroke(); //to z ctx.beginPath(); ctx.moveTo(zero.x + vanishingPointZ.x * scale,zero.y + vanishingPointZ.y * scale); ctx.lineTo(pos.x,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.33)"; ctx.stroke(); ctx.beginPath(); ctx.arc(pos.x,pos.y,8,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,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,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 }; } 行，如您所见，代码运行良好。

enter image description here

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

enter image description here

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

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

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

body { margin: 0; }

<canvas id='canvas' width='800' height='800'></canvas>

organization_id

解决方法

我们可以使计算更容易，而不是在我们到达“真实”坐标之前将向量复合添加到起始坐标，将问题视为线交点之一。例如，如果我们想要点 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,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,py);
  const XY = twoLinesIntersection(Y,px,py);

  // And then the 3D coordinate is a line/line intersection with those.
  return twoLinesIntersection(XY,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",10,0);
text("Z",-10,0);
text("Y",-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,i));
    line(Y,get(i,0));
    line(Y,i));
    line(Z,0));
    line(Z,0));
  }  
}

function drawCube(n) {
  const cube = getCube(n);
  const [p1,p2,p3,p4,p5,p6,p7,p8] = cube.map(p => get(p));
  quad(p1,p4);
  quad(p5,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,z: 0},{x: n,y: 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,p4) {
  ctx.beginPath();
  ctx.moveTo(p1.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,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,map(x));
  const pz = lerp(C,map(z));
  if (y==0) return lli(X,px);

  const py = lerp(C,map(y));
  const YZ = lli(Y,py);
  const XY = lli(Y,py);
  return lli(XY,z: v1.z * mr + v2.z * r
   }
}

function lli(p1,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">

如何解决三点投影JS

解决方法

相关推荐