Custom geometry registered in A-Frame isn't rendering when added to a scene

Question

I've created some functions that create THREE.js geometries with phi length values under 360 that are non-hollow, and I would like to render them in an A-Frame scene (which is running on top of React). However, when I try to render them, I find that I can't.

I thought my custom geometry wasn't registering, but I rendered a copy of the box geometry outlined here with no problems.

This is my code I used to register the custom geometry:

this.AFRAME.registerGeometry("phisphere", {
    schema : {
        phi : { default : 360, min : 0, type : "int" },
    },    
    init : (data) => {
        let phi = this.degToRad(data.phi);
        let sphere = new THREE.SphereGeometry(1, 18, 36, 0, phi);

        let semiStart = new THREE.CircleGeometry(1, 36, 0, Math.PI);
        semiStart.applyMatrix(this.rotationMatrix("z", Math.PI / 2));
        semiStart.applyMatrix(this.rotationMatrix("x", Math.PI));

        let semiEnd = new THREE.CircleGeometry(1, 32, 0, Math.PI);
        semiEnd.applyMatrix(this.rotationMatrix("z", Math.PI / 2));
        semiEnd.applyMatrix(this.rotationMatrix("y", phi));

        let geometry = new THREE.Geometry();
        geometry.merge(sphere);
        geometry.merge(semiStart);
        geometry.merge(semiEnd);

        this.geometry = geometry;
    }
});

and this is the call I'm using to render it:

<a-entity geometry="primitive: phisphere; phi : 260" scale="2 2 2" position="0 2 0"></a-entity> 

Nothing's showing up. I'm not sure where I went wrong here, and any help would be appreciated.

Answer 1

Don't use arrow functions that will bind the methods to the wrong this. Use regular functions instead:

AFRAME.registerGeometry("phisphere", {
  schema : {phi : {default : 360, min : 0, type : "int"}},    
  init : function () {}
});

Working example: https://glitch.com/edit/#!/fanatical-cardamom?path=phisphere.js:5:19