Rendering a <line /> with updated state.

I'm having trouble understanding why this isn't work. On componentWillReceiveProps, I update the vertices in the state, which I use to render a line. However, when I pass in the new vertices as a prop, the state updates, but the new line isn't created. I'm not getting any errors. I'm brand new to react-three-renderer, so it's most likely something I'm doing wrong.

import React, { Component } from 'react';
import React3 from 'react-three-renderer';
import { StyleSheet, css } from 'aphrodite';
import * as THREE from 'three';
import ReactDOM from 'react-dom';

export default class Arm extends Component {
  constructor(props, context) {
    super(props, context);
    this.cameraPosition = new THREE.Vector3(0, 0, 5);
    this.state = {
      vertices: [
        new THREE.Vector3( 0, 0, 0 ),
        new THREE.Vector3(1,0,0),
      ]
    }
  }

  componentWillReceiveProps(nextProps) {
    let nextVertices = [];
    let x, y, z;
    for (let i=0; i < nextProps.jointCoordinates.length; i++) {
      x = nextProps.jointCoordinates[i][0];
      y = nextProps.jointCoordinates[i][1];
      z = nextProps.jointCoordinates[i][2];
      nextVertices.push(new THREE.Vector3(x,y,z))
    }
    this.setState({vertices: nextVertices})
  }

  render() {
    //console.log('arm state', this.state);
    const width = 0.98*(window.innerWidth);
    const height = 0.681*(window.innerHeight);

    return (
      <React3
        mainCamera="camera"
        clearColor='#f8f8ff'
        width={width}
        height={height}
    >
      <scene>
        <perspectiveCamera
          name="camera"
          fov={75}
          aspect={width / height}
          near={0.1}
          far={1000}
          position={this.cameraPosition}
        />
        <line>
          <geometry vertices={this.state.vertices} />
          <lineBasicMaterial color={0xff2500} />
        </line>
      </scene>
    </React3>);
  }
}

Hi Tom, this looks like a bug, the geometry should have updated...

There was one bug where new vertices could not be added to an existing line, so try to see the initial vertices number equal to what you expect in the updates, perhaps it still remains

On Mon, Feb 5, 2018, 22:20 Tom Mulroy notifications@github.com wrote:

I'm having trouble understanding why this isn't work. On componentWillReceiveProps, I update the vertices in the state, which I use to render a line. However, when I pass in the new vertices as a prop, the state updates, but the new line isn't created. I'm not getting any errors. I'm brand new to react-three-renderer, so it's most likely something I'm doing wrong.

import React, { Component } from 'react';import React3 from 'react-three-renderer';import { StyleSheet, css } from 'aphrodite';import * as THREE from 'three';import ReactDOM from 'react-dom'; export default class Arm extends Component { constructor(props, context) { super(props, context); this.cameraPosition = new THREE.Vector3(0, 0, 5); this.state = { vertices: [ new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3(1,0,0), ] } }

componentWillReceiveProps(nextProps) { let nextVertices = []; let x, y, z; for (let i=0; i < nextProps.jointCoordinates.length; i++) { x = nextProps.jointCoordinates[i][0]; y = nextProps.jointCoordinates[i][1]; z = nextProps.jointCoordinates[i][2]; nextVertices.push(new THREE.Vector3(x,y,z)) } this.setState({vertices: nextVertices}) }

render() { //console.log('arm state', this.state); const width = 0.98(window.innerWidth); const height = 0.681(window.innerHeight);
return (
  <React3
    mainCamera="camera"
    clearColor='#f8f8ff'
    width={width}
    height={height}
>
  <scene>
    <perspectiveCamera
      name="camera"
      fov={75}
      aspect={width / height}
      near={0.1}
      far={1000}
      position={this.cameraPosition}
    />
    <line>
      <geometry vertices={this.state.vertices} />
      <lineBasicMaterial color={0xff2500} />
    </line>
  </scene>
</React3>);
} }

— 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/213, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLa070xDR_z64SSArabEZjtkIHNblks5tR36lgaJpZM4R6MH2 .

Hi @toxicFork thanks for responding! This is the same as issue #131 I used the workaround by adding a key to the line element. Any idea where I should start looking in the code so I can help with a more permanent solution/fix?

Hmm.... I see there had been some more workarounds within #131 , for the code, these few files I feel are quite relevant:

https://github.com/toxicFork/react-three-renderer/blob/master/src/lib/descriptors/Object/LineDescriptor.js for line which inherits from https://github.com/toxicFork/react-three-renderer/blob/master/src/lib/descriptors/Object/MeshDescriptor.js which does work for setting geometries and materials https://github.com/toxicFork/react-three-renderer/blob/master/src/lib/descriptors/Geometry/GeometryDescriptorBase.js for most geometry props including vertices https://github.com/toxicFork/react-three-renderer/blob/master/src/lib/descriptors/Geometry/GeometryDescriptor.js as well for vertices

On Wed, 7 Feb 2018 at 16:48 Tom Mulroy notifications@github.com wrote:

Hi @toxicFork https://github.com/toxicfork thanks for responding! This is the same as issue #131 https://github.com/toxicFork/react-three-renderer/issues/131 I used the workaround by adding a key to the line element. Any idea where I should start looking in the code so I can help with a more permanent solution/fix?

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/213#issuecomment-363832644, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLfKhaXDMMUx1w2189m-B9ybPhRIBks5tSdPfgaJpZM4R6MH2 .

firtoz / react-three-renderer

Rendering a <line /> with updated state. #213