3

次のような状況があります: 穴のある線 (不連続線) を描く必要があります。つまり、私の Line は、視覚的には結合されていませんが、他のコンテキストでは一緒に属しているいくつかのセグメントで構成されています。これらのセグメントは 2 つ以上のポイントで構成されているため、このような方法はTHREE.LinePieces機能しません。

現時点ではBufferGeometry、頂点を格納するために を使用しています。同僚は、WebGL では頂点に加えて 2 つの配列を作成できると教えてくれました。ここに私が意味するものの例があります：

indices = [0,1,2,3,4,5]
vertices = [x0, y0, z0, x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, x5, y5, z5]
order = [0,1,1,2,3,4,4,5]

これにより、2 つの線が得られます。最初の線はポイント 0 から 1 から 2 まで、次に穴、次に 3 から 4 から 5 までの 2 番目の線です。

だから、このようなもの：

.___.___.   .___.___.
0   1   2   3   4   5

私は WebGL に詳しくないので、同僚がそのような構造を作成できると信じています。しかし、これはThree.jsでも可能ですか? はいの場合、どのようにしますか？

編集：同僚ともう一度話し、このコードスニペットを入手しました

indexBufferData = [0,1,1,2,3,4,4,5];
gl.glBindBuffer(GL.GL_ELEMENT_ARRAY_BUFFER, indexBufferID);
gl.glBufferData(GL.GL_ELEMENT_ARRAY_BUFFER,
             indexBufferData.limit() * Buffers.SIZEOF_INT,
             indexBufferData, GL.GL_STATIC_DRAW);

彼は、線分を取得するには、インデックスを複製するだけで頂点を複製する必要はないと言いました（可能ですが、推奨されません）。

で検索したところ、 2380 行目で、 myにWebGLRenderer属性があれば、必要なバッファが作成されることがわかりました。ただし、この属性を設定しても効果はありません。使用時はまだ2点しか接続していません。indexBufferGeometryTHREE.LinePieces

4

2 に答える 2

8

コード例と遊んでみるフィドル。

// .___.___.___.   .___.
// 0   1   2   3   4   5

// line material
var material = new THREE.LineBasicMaterial({
    color: 0xffffff
});

vertices = [
    new THREE.Vector3(0, 0, 0),
    new THREE.Vector3(10, 0, 0),
    new THREE.Vector3(20, 0, 0),
    new THREE.Vector3(30, 0, 0),
    new THREE.Vector3(40, 0, 0),
    new THREE.Vector3(50, 0, 0)
];

var positions = new Float32Array(vertices.length * 3);

for (var i = 0; i < vertices.length; i++) {

    positions[i * 3] = vertices[i].x;
    positions[i * 3 + 1] = vertices[i].y;
    positions[i * 3 + 2] = vertices[i].z;

}

indices = [0, 1, 1, 2, 2, 3, 4, 5];

var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array(indices), 1));

var line = new THREE.LineSegments(geometry, material);
scene.add(line);
于 2016-02-03T14:17:39.513 に答える