Very basic problem - updating vertices for existing line

[jugglingcats]

I have a simple line and the vertices are driven by the React state, like this:

                        <line>
                            <geometry vertices={this.state.vertices}/>
                            <lineBasicMaterial color={0xc0c0ff}/>
                        </line>

I'm seeing issues with redrawing when the vertices change. Basically adding/removing vertices does not redraw the line and no change is seen.

However, if something else changes to cause a full "reset", the changes to lines are seen!

I have added a demo of this problem to a forked version of react-three-renderer-examples here:

https://github.com/jugglingcats/react-three-renderer-example

New page added to the menu "Line segments issue". On this page there are buttons at the top. Try clicking the buttons to add/remove lines, and you will see nothing happens. However, if you click the Hide button and then Show to drop/re-add the whole React3 scene, you can see the changes.

Am probably doing something very basic wrong...! Is this expected behaviour and how can I workaround it?

Thanks.

[toxicFork]

Hi,

Looks like it's a bug! I'll fix asap.

Thanks for reporting!

On Fri, Nov 25, 2016, 19:14 jugglingcats [email protected] wrote:

I have a simple line and the vertices are driven by the React state, like this:

                    <line>
                        <geometry vertices={this.state.vertices}/>
                        <lineBasicMaterial color={0xc0c0ff}/>
                    </line>

I'm seeing issues with redrawing when the vertices change. Basically adding/removing vertices does not redraw the line and no change is seen.

However, if something else changes to cause a full "reset", the changes to lines are seen!

I have added a demo of this problem to a forked version of react-three-renderer-examples here:

https://github.com/jugglingcats/react-three-renderer-example

New page added to the menu "Line segments issue". On this page there are buttons at the top. Try clicking the buttons to add/remove lines, and you will see nothing happens. However, if you click the Hide button and then Show to drop/re-add the whole React3 scene, you can see the changes.

Am probably doing something very basic wrong...! Is this expected behaviour and how can I workaround it?

Thanks.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/131, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLRu8VhANjkQDAkvGQNC8zwMGoN8Gks5rBzORgaJpZM4K8q2E .

[jugglingcats]

Perhaps this is useful: https://github.com/mrdoob/three.js/wiki/Updates#geometries.

[jugglingcats]

Can you think of any hack/workaround to have the three geometry recreated when updates occur? Happy to do anything that will get beyond this issue while waiting for a 'proper' fix... Tx

[jugglingcats]

I found a workaround here: https://groups.google.com/forum/#!topic/reactjs/8JgClU9jol0.

Basically I added key={"rnd"+Math.random()} to the <line> element.

Total hack but moves me forward ;)

[toxicFork]

Oh, I see, I can think of a way of fixing this in react-three-renderer as well, thanks for posting the workaround!

[khiner]

I am running into a very similar issue. Here is my setup:

          <points ref='points'>
            <geometry
              vertices={this.pointVertices}/>
            <pointsMaterial
              color='#000000'
              size={pointRadius}
              map={this.sprite}
              blending={THREE.NormalBlending}
              depthTest={false}
              transparent={true}/>
          </points>

If I update the coordinates of the vertices held in this.pointVertices, no update happens on the screen. However, ray intersections no longer reflect the original positions:

    this.raycaster.setFromCamera(this.mouse, this.refs.camera)
      const intersects = this.raycaster.intersectObject(this.refs.points)
      if (intersects.length > 0) {
        this.state.hoveredEventDetails = intersects[0].index
      }

indicating that the new positions are being used for the intersectObject calculations, but not for the render.

On the other hand, if I treat this.pointVertices as immutable and assign a completely new copied-and-modified array to it on each animation, the visible positions will update, but the mouse hover intersect does not reflect the new positions 😕

My ideal situation would be not requiring a copy and reassign on each render for visible updates, and for the intersect calculations to reflect the new positions, as if a full world render was being done with the new positions.

In my case, the random key solution does not work when I apply it to either the points or geometry object.

Thanks for the help!

[khiner]

I used the following workaround for my vertex-updating issue:

On each render, I call...

  this.refs.points.geometry.applyMatrix(this.refs.points.matrixWorld)

...before checking for intersections with

  this.raycaster.intersectObject(this.refs.points)