在折线THREE.JS内绘制弧

时间:2014-01-28 20:21:54

标签: javascript three.js

我有这样的观点:

    "POLYLINE":[[
        {"x":"-6094.1665707632401","y":"3074.764386330728","r":""},
        {"x":"-699.22595358468595","y":"1099.941236568309","r":""},                
        {"x":"-4940.397089330264","y":"576.87996358328382","r":""},
        {"x":"-1329.5259580814709","y":"3149.4874087018579","r":"0.5163456475719181"},
        {"x":"-6094.1665707632401","y":"3074.764386330728","r":""}
    ]]

其中x y是折线的顶点,如果是弧,则r是半径。 如果这是不可能的话,我可以管理绘制,但我需要跳过脚本中的弧

function DRAWpline(vert){
            vert = JSON.parse(vert);
            var material = new THREE.LineBasicMaterial({
                color: 0x0000ff
            });
            var geometry = new THREE.Geometry();

            for (var i = 0; i < vert.length; i++) {     
                if(vert[i]['r'] != ""){
                    geometry.vertices.push(new THREE.Vector3(vert[i]['x'], vert[i]['y'], 0));
                } else {

                }
            }

            var line = new THREE.Line(geometry, material);



            scene.add(line);
        }

1 个答案:

答案 0 :(得分:1)

这样的事情可以胜任:

var p0 = new THREE.Vector3(vert[i]['x'], 0, 0);
var p1 = new THREE.Vector3(vert[i]['x'], vert[i]['y'], 0);
var p2 = new THREE.Vector3(vert[i+1]['x'], vert[i+1]['y'], 0);
var startAngle = Math.acos(p0.dot(p1)/(p0.length()*p1.length()));
var angle = Math.acos(p1.dot(p2)/(p1.length()*p2.length()));
geometry = new THREE.CircleGeometry(radius, nbSegments, startAngle, angle);
// remove center vertex
geometry.vertices.splice(0,1);

在compute p2

之前添加对vert [i + 1]的检查