three.js - threejs 等角下半球投影

Question

我正在尝试用threejs做一个平面/线/圆的立体投影项目。
非常类似于这个网站：http ://app.visiblegeology.com/stereonetApp.html

尽管作者使用了three.js，但他们不遗余力地混淆了javascript，使得无法看到投影是如何制作的。

关于如何使用 three.js 渲染它的任何建议？我会渲染到纹理然后包裹到球体的底部吗？我应该尝试与渲染引擎交互并在某处实际转换 3d 点吗？

谢谢！

Answer 1

我用来将 3D 向量投影到 2D 平面的函数如下：假设向量在单位球面上。

function project(vector){
    vector = vector.clone();
    if(vector.z>0){vector.negate();}
    if(this.netType === 0){//Wulff Net
        vector.set(vector.x/(1-vector.z), vector.y/(1-vector.z), 0);
    }else if(this.netType  === 1){//Equal Area Net
        vector.set(vector.x*Math.sqrt(1/(1-vector.z)), vector.y*Math.sqrt(1/(1-vector.z)), 0);
    }
    return vector;
}

至于渲染，这取决于您是否想在 3D 中看到立体网络。如果您只对 2D 视图感兴趣，我不建议使用 Three.js，而是可能渲染到画布或 SVG/VML。

（Visible Geology 是用 GWT 编写的，所以是 Java，因此是精简的代码和疯狂的东西。不过，我主要用 JavaScript 重写了 Stereonet）