Three.js: Geometry.fromBufferGeometry() is having error when converting an EdgeHelper buffer geometry.

Created on 27 May 2015 · 9Comments · Source: mrdoob/three.js

I tried to convert an BufferGeometry to Geometry. This BufferGeometry is creating from EdgeHelper. It gave me this error Uncaught TypeError: Cannot read property 'x' of undefined . This error is coming from

subVectors: function ( a, b ) {

        this.x = a.x - b.x;
        this.y = a.y - b.y;
        this.z = a.z - b.z;

        return this;

},

I tried to track down this issue. The EdgeHelper usually creates an BufferGeometry which the last index is 0 to connect the start vertex and end vertex.

However, in fromBufferGeometry() , this piece of code doesn't handle this very well.

for ( var i = 0; i < indices.length; i += 3 ) {

       addFace( indices[ i ], indices[ i + 1 ], indices[ i + 2 ] );

}

Therefore, when calling the computeFaceNormals() inside fromBufferGeometry(), it always trying to access the last index which is not exist in the vertices array.

Source

tiansijie

Most helpful comment

I tried to combine the geometry to reduce number of drawcalls to have a better performance.

Lines and faces use different signature drawcalls so cannot be combined.

benaadams on 5 Jun 2015

👍2

All 9 comments

The EdgeHelper usually creates an BufferGeometry which the last index is 0 to connect the start vertex and end vertex.

It does?

Can you provide a test case, along with the information requested in "How to report a bug" in the guidelines?

WestLangley on 28 May 2015

not sure if this would be a good way to go:

for ( var i = 0,l=indices.length-2; i < l; i += 3 ) {

       addFace( indices[ i ], indices[ i + 1 ], indices[ i + 2 ] );

}

Usnul on 29 May 2015

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="libs/three.js"></script>
        <script>
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

            var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );


            document.body.appendChild( renderer.domElement );
            var material = new THREE.MeshBasicMaterial({
                                color: 0x0000ff
                            });

            var radius = 5;
            var segments = 32;

            var circleGeometry = new THREE.CircleGeometry( radius, segments );              
            var circle = new THREE.Mesh( circleGeometry, material );
           /*CREATE EDGES*/
            var edges = new THREE.EdgesHelper( circle, 0x00ff0f );
            /*IT NEEDS TO CONVERT FROM BUFFER GEOMETRY TO GEOMETRY TO USE GEOMETRY MERGE FUNCTION*/
             /*HERE IS THE PROBLEM*/
            var edgeGeometry = new THREE.Geometry().fromBufferGeometry(edges.geometry);

            circleGeometry.merge(edgeGeometry);

            scene.add( circle );

            camera.position.z = 15;

            function render() {
                requestAnimationFrame( render );
                renderer.render( scene, camera );
            }
            render();

        </script>
    </body>
</html>

THREEJS Version: 71
ERROR: Uncaught TypeError: Cannot read property 'x' of undefined three.js:1783
Chrome 43.0.2357.81, OS X, Intel Iris Pro

@WestLangley @Usnul Here is the test case and bug report

Thanks

tiansijie on 4 Jun 2015

i made a jsfiddle for running this: https://jsfiddle.net/b39100np/

am not sure of the proposed fix above .. will try to think too but figure others who knows this better can judge. hopefully the ready made jsfiddle is convenient for someone.

antont on 4 Jun 2015

Thank you, @antont .

circleGeometry.merge( edgeGeometry );

@tiansijie Why are you trying to do that? You can't merge faces and line-segments.

var edgeGeometry = new THREE.Geometry().fromBufferGeometry( edges.geometry );

@mrdoob Well, it happened. See the discussion in https://github.com/mrdoob/three.js/commit/eda6cd1e0eb4efd1aebfe4205d453993eb2f48b9.

WestLangley on 4 Jun 2015

@WestLangley I tried to combine the geometry to reduce number of drawcalls to have a better performance.

tiansijie on 5 Jun 2015

I tried to combine the geometry to reduce number of drawcalls to have a better performance.

Lines and faces use different signature drawcalls so cannot be combined.

benaadams on 5 Jun 2015

👍2

To sum this up: Geometry.fromBufferGeometry() does not support line geometries.

IMO this conversion does not make sense anyway. As @benaadams and @WestLangley mentioned a combination of line and mesh geometries is also not possible.

@WestLangley @mrdoob If you don't mind, i would like to close this issue.