Create THREE.Line with various endpoints using THREE.BufferGeometry

Question

I am creating several THREE.Lines using THREE.BufferGeometry. Initially, my application had everything from the beginning, and everything worked as expected. Now I would like to be able to start (and end) them at any time.

This fiddle ( http://jsfiddle.net/9nVqU/ ) illustrates (I hope) how changing one end of the line from the source produces unexpected results.

I was wondering if this was due to the fact that any given line follows from the previous one - switching the initial / final order did not change anything, although if that were the case, I would expect it to break.

Perhaps I have improperly configured arrays or attributes that tell THREE.js how to interpret it. It seems to me that I need 2 * 3 vert for each line, but the changes I made to buffer_geometry.attributes = { seemed to make things worse.

FWIW, the actual effect I'm trying to achieve is to selectively turn on and off lines based on user input. I can do this already by changing the final position, but then I lose this value, and I do not want to store it in another place. I thought I could move the start point to the end point to turn it off, and then move the start point back to the origin to turn it on again. If there is a way to enable / disable lines individually using BufferGeometry, then this would be clearly better.

Answer 1

First of all, you will need to do this:

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

Secondly, this is not supported in r.58, but it should be.

As a workaround, you can hack WebGLRenderer.renderBufferDirect() like this:

 // render lines setLineWidth( material.linewidth ); var position = geometryAttributes[ "position" ]; primitives = ( object.type === THREE.LineStrip ) ? _gl.LINE_STRIP : _gl.LINES; _gl.drawArrays( primitives, 0, position.numItems / 3 ); _this.info.render.calls ++; _this.info.render.points += position.numItems; 

three.js r.58