javascript - 将 WebGL 非连续行渲染为单个对象

Question

我有多个要渲染的 WebGL 行，它们都具有相同的渲染样式。因此，为了提高性能，我想在一个绘图调用中将它们全部渲染为一个对象。

但问题是这些线路并非都相互连接。

请参阅此处的示例：http: //jsfiddle.net/b6jgS/6/

如您所见，环连接，但我不希望它们连接。然而，我仍然想在一次绘制调用中绘制它们。

相关代码是这样的，它只是为一些环生成一些几何图形：

# Pardon the coffeescript!
ringsGeom =  new THREE.Geometry()
for u in [-2..2]
  for v in [0..100]
    ringsGeom.vertices.push new THREE.Vector3(
      Math.sin(v/100 * 2 * Math.PI)
      Math.cos(v/100 * 2 * Math.PI)
      u
    )


rings = new THREE.Line(
  ringsGeom
  new THREE.LineBasicMaterial(
    color: 0xffff00
    linewidth: 1
  )
)
scene.add rings

如何让单个对象绘制多条不连续的不连续线？

Answer 1

您将几何构造为代表各个线段的点对数组，然后像这样创建您的线：

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

例如，请参阅GridHelper.js。

三.js r.58

PS three.js 包括requestAnimationFrame()垫片。您不需要自己包含它。