Cannot read property 'boundingSphere' of undefined

[anandrajana]

Hi,

I'm new to threejs and facing the above error in the code while executing the below code. Can someone help?

`import React, { Component } from 'react';
import React3 from 'react-three-renderer';
import * as THREE from 'three';
import _ from 'lodash';
import LoaderSemantic from './Loader';

class Graph3D extends Component {
constructor(props, context) {
super(props, context);

    this.cameraPosition = new THREE.Vector3(-3.0, 3.0, 5.5);

    this.xAxis = new THREE.Vector3(1, 0, 0);
    this.yAxis = new THREE.Vector3(0, 1, 0);
    this.zAxis = new THREE.Vector3(0, 0, 1);

    this.headLength = 0.03;
    this.headWidth = 0.018;

    this.state = {
        canvasWidth: 0.3,
        canvasHeight: 0.3,
        font: null,
        loaded: false,
        vectorTextSize: 0.03,
        vectorTextHeight: 0.001,
        axisTextSize: 0.03,import React, { Component } from 'react';

import React3 from 'react-three-renderer';
import * as THREE from 'three';
import _ from 'lodash';
import LoaderSemantic from './Loader';

class Graph3D extends Component {
constructor(props, context) {
super(props, context);

    this.cameraPosition = new THREE.Vector3(-3.0, 3.0, 5.5);

    this.xAxis = new THREE.Vector3(1, 0, 0);
    this.yAxis = new THREE.Vector3(0, 1, 0);
    this.zAxis = new THREE.Vector3(0, 0, 1);

    this.headLength = 0.03;
    this.headWidth = 0.018;

    this.state = {
        canvasWidth: 0.3,
        canvasHeight: 0.3,
        font: null,
        loaded: false,
        vectorTextSize: 0.03,
        vectorTextHeight: 0.001,
        axisTextSize: 0.03,
        axisTextHeight: 0.001,
        vectorOrigin: new THREE.Vector3(0, 0, 0),
    };

    this.onAnimate = () => {
        // we will get this callback every frame
        this.textFaceToCamera();
    };
}

componentDidMount() {
    /*eslint-disable*/
    if (!this.state.loaded) {
        this.setState({ loaded: true })
    }
    /*eslint-enable*/
}

componentWillReceiveProps(nextProps) {

}

componentDidUpdate(prevProps, prevState) {
    const [wrapper] = document.getElementsByClassName('affective-bars-wrapper');

    if (wrapper) {
        const width = wrapper.clientWidth;
        const height = wrapper.clientHeight;

        /*eslint-disable*/
        if (this.state.canvasHeight !== height || this.state.canvasWidth !== width) {
            this.setState({ canvasHeight: height, canvasWidth: width });
        }
        /*eslint-enable*/
    }
}

componentWillUnmount() {

}

render() {
    const {
        canvasWidth,
        canvasHeight,
        vectorOrigin,
        vectorTextSize,
        vectorTextHeight,
        font,
        loaded,
    } = this.state;
    const { points, centroids } = this.props.graphData;
    return (<div>
        {!loaded && <LoaderSemantic />}
        <React3
          mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
          width={canvasWidth}
          height={canvasHeight}
          clearColor={'#ffffff'}
          antialias
          pixelRatio={2}
        >
        <scene ref={(ref) => { this.scene = ref; }}>
            <perspectiveCamera
              name="camera"
              fov={45}
              aspect={canvasWidth / canvasHeight}
              near={1}
              far={1000}
              position={this.cameraPosition}
              ref={(ref) => { this.camera = ref; }}
            />
            { points &&
                points.map(p => (
                    <points key={p.clusterId} position={new THREE.Vector3(p.xdim, p.ydim, p.zdim)}>
                        <pointsMaterial
                          color={'#6ddff2'}
                        />
                    </points>
                    ))
            }
        </scene>
    </React3>
    </div>);
}

}

export default Graph3D;

        axisTextHeight: 0.001,
        vectorOrigin: new THREE.Vector3(0, 0, 0),
    };

    this.onAnimate = () => {
        // we will get this callback every frame
        this.textFaceToCamera();
    };
}

componentDidMount() {
    /*eslint-disable*/
    if (!this.state.loaded) {
        this.setState({ loaded: true })
    }
    /*eslint-enable*/
}

componentWillReceiveProps(nextProps) {

}

componentDidUpdate(prevProps, prevState) {
    const [wrapper] = document.getElementsByClassName('affective-bars-wrapper');

    if (wrapper) {
        const width = wrapper.clientWidth;
        const height = wrapper.clientHeight;

        /*eslint-disable*/
        if (this.state.canvasHeight !== height || this.state.canvasWidth !== width) {
            this.setState({ canvasHeight: height, canvasWidth: width });
        }
        /*eslint-enable*/
    }
}

componentWillUnmount() {

}

render() {
    const {
        canvasWidth,
        canvasHeight,
        vectorOrigin,
        vectorTextSize,
        vectorTextHeight,
        font,
        loaded,
    } = this.state;
    const { points, centroids } = this.props.graphData;
    return (<div>
        {!loaded && <LoaderSemantic />}
        <React3
          mainCamera="camera" // this points to the perspectiveCamera which has the name set to "camera" below
          width={canvasWidth}
          height={canvasHeight}
          clearColor={'#ffffff'}
          antialias
          pixelRatio={2}
        >
        <scene ref={(ref) => { this.scene = ref; }}>
            <perspectiveCamera
              name="camera"
              fov={45}
              aspect={canvasWidth / canvasHeight}
              near={1}
              far={1000}
              position={this.cameraPosition}
              ref={(ref) => { this.camera = ref; }}
            />
            { points &&
                points.map(p => (
                    <points key={p.clusterId} position={new THREE.Vector3(p.xdim, p.ydim, p.zdim)}>
                        <pointsMaterial
                          color={'#6ddff2'}
                        />
                    </points>
                    ))
            }
        </scene>
    </React3>
    </div>);
}

}

export default Graph3D;
`