javascript - Three.js 根据坐标定位对象

Question

在 Json 文件中，我获取了在 map 上绘制的一组 SVG 线条的描述:

   <line x1="30" y1="232" x2="44" y2="232" stroke="red" stroke-width="3"></line>
   <line x1="44" y1="232" x2="48" y2="210" stroke="red" stroke-width="3"></line>
   ...

我知道原始的Leaflet map 尺寸:948 x 412px。用户创建 SVG 后，我会生成 map 图像，该图像用作场景的 webGL 3D 重建中的背景平面(称为“基础”)。问题是:如何将 SVG 线条放置在正确的位置？

第一步是根据三中的“基本”大小转换每行的 x1,x2,y1,y2 值。下一个是找到如何放置每一行...

    sizemap[0]/2 and sizemap[1]/2 are the exact 'base' center values (left and top)
    x1, x2, y1, y2 are the recalculated original SVG values

    // position of each line from 'base' center

    from_pos_left = x1 - sizemap[0]/2; 
    from_pos_top = y1 - sizemap[1]/2;
    to_pos_left = x2 - sizemap[0]/2; 
    to_pos_top = y2 - sizemap[1]/2;

    // calculate the angle and length of each line

    deltaX = to_pos_left - from_pos_left;
    deltaY = to_pos_top - from_pos_top;
    angle = Math.atan2(deltaY, deltaX);
    deltaX *= deltaX;
    deltaY *= deltaY;
    length = Math.floor(Math.sqrt( deltaX + deltaY));

    // then position center of the line on 'base' (color and thickness are in mesh material)

    center_left =  ( (to_pos_left - from_pos_left) /2 ) - sizemap[0]/2 + x1 ;
    center_top =  ( (to_pos_top - from_pos_top) /2 ) - sizemap[1]/2 + y1;

    line = new THREE.Mesh( lineGeometry, lineMaterial );
    line.position.set( center_left, 3, center_top ); 
    line.rotation.y = angle;                            
    scene.add(line); 

...但它没有按预期工作。为了更容易地测试它，我创建了具有舍入值的虚构行:

    x1 = 0; y1 = 0; x2 = 200; y2 = 200;  
    x1 = 400; y1 = 200; x2 = 200; y2 = 400;  

效果很好。但是:

    x1 = 200; y1 = 200; x2 = 400; y2 = 200;  

没有。长度和位置总是可以的，但 Angular 不行。我尝试根据 x1/x2 和 y1/y2 位置对 Angular 进行修正:

    f = Math.abs(x1/x2) + Math.abs(y1/y2)
    angle = Math.atan2(deltaY, deltaX) + Math.PI*f;

好的，现在x1 = 200； y1 = 200； x2 = 400； y2 = 200; 效果很好...但是 x1 = 200; y1 = 150； x2 = 400； y2 = 250； 没有。

我确信我已经接近解决方案，但找不到它。这里有人知道正确的公式吗？

--------------编辑

尝试另一个三 Angular 公式:

long = Math.hypot(x2-x1,y2-y1);
angle = Math.asin( (y2-y1) /long); 

长度和中心位置总是可以的，但 Angular 不行... Angular 误差与上面不一样，但仍然是错误的。

Answer 1

哦不，正确答案很容易找到:-)

  angle = Math.asin( (x2-x1) /length); // instead of (y2-y1)

参见 fiddle :https://jsfiddle.net/Wolden/og425f3b/