Extrude geometry fails with "Computed radius is NaN"

Hi Guys,

I’m a total noob and I might be trying to run before I can walk but I’ve been reading @looeee 's online book and got a bit confident :slight_smile:

I’m trying to create boxes in my scene from coordinates in a file (I won’t bore you with why…).
I’m reading the file using the fetch api.
My issue is that if I create a box using the coordinates read from the file, I get the
THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The “position” attribute is likely to have NaN values. error.

But creating the box manually using the same coordinates outside of the “fetch” creates the box fine.
It seems to be related to the negative numbers in the coordinates because if I edit the file to only have positive coordinates, the box is created without error (read from the file).

This is my code for creating the boxes - the rest of the scene setup is from @looeee 's book so I haven’t included that… :

     createMeshes() {
        fetch('./boxcoords.txt', {
            mode: 'no-cors'
        })
            .then(response => response.text())
            .then(text => {
                const meshes = [];
                var json = JSON.parse(text);
                for (const bay of json.Bays) {
                    const boxPoints = [];
                    for (const coord of bay.Bay) {
                        boxPoints.push(new Vector2(coord.x, coord.y));
                    }
                    const boxShape = new Shape(boxPoints);
                    const extrudeSettings = { depth: 1, bevelEnabled: false };
                    const geometry = new ExtrudeBufferGeometry(boxShape, extrudeSettings);
                    const mesh = new Mesh(geometry, new MeshStandardMaterial({ color: new Color('lightgray') }));
                    meshes.push(mesh);
                }
                return meshes;
            }).then(meshes => {
                for (const mesh of meshes) {
                    this.scene.add(mesh);
                }
            })
            .catch(function (error) {
                console.log(error);
            });

        // For some reason, setting the box points with negative values works here but doesn't work if we do it in the fetch above.

        const boxPoints = [];
        boxPoints.push(new Vector2(-55.5286163110079, 32.9576486807176));
        boxPoints.push(new Vector2(-55.9670763177218, 32.9576486807176));
        boxPoints.push(new Vector2(-55.9670763177218, 32.6576486807176));
        boxPoints.push(new Vector2(-55.5286163110079, 32.6576486807176));
        const boxShape = new Shape(boxPoints);
        const extrudeSettings = { depth: 1, bevelEnabled: false };
        const geometry = new ExtrudeBufferGeometry(boxShape, extrudeSettings);
        const mesh = new Mesh(geometry, new MeshBasicMaterial({ color: new Color('lightgray') }));
        this.scene.add(mesh);
    }

It probably doesn’t help that I’m pretty new to javascript too but I’d be grateful if someone could point out what I’m doing wrong.

I’ve attached the booxcoords text file with a single entry (ignore that it’s called bay)BoxCoords.txt (216 Bytes)

Thanks in advance for any assistance.

Sorry guys I clearly don’t know how to properly post a code snippet!

Select the code.

Use 2019-12-20_17.33.54 from2019-12-20_17.33.47
:slightly_smiling_face:


EDIT:
… now you got it :+1:

Erm… I didn’t do anything.
I came back to the page to reply to you and it looked fine. I thought you’d fixed it for me!

I’ve got a feeling I’m going to cause problems… :grin:

I can’t fix it, maybe just a moderator?

Sometimes parts of the code are automatically recognized and formatted - artificial intelligence !?


About your problem.

I get that message a lot. Then, for example, I have divided by zero somewhere or have taken the square root of a negative number.

Check all intermediate results with console.log for NaN.

Nope, I’ve edited the post^^.

It seems not possible to triangulate your input data. I get the same error already with ShapeBufferGeometry: https://jsfiddle.net/e20qr7oc/

3 Likes

This works: https://jsfiddle.net/prisoner849/poqbhdjr/

Using of parseFloat() for coordinates helps.

boxPoints.push(new THREE.Vector2(parseFloat(coord.x), parseFloat(coord.y)));
1 Like

Nice. Thanks for the help.