在 A-Frame 中注册的自定义几何图形在添加到场景时不会渲染

Question

我创建了一些函数来创建 phi 长度值低于 360 的非空心的三个.js 几何图形，我想在 A-Frame 场景中渲染它们（在 React 之上运行）。 但是，当我尝试渲染它们时，我发现我做不到。

我以为我的自定义几何图形没有注册，但我渲染了此处概述的盒子几何图形的副本，没有任何问题。

这是我用来注册自定义几何图形的代码：

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;
    }
});

这是我用来渲染它的调用：

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

什么都没有出现。 我不确定我在哪里出错了，任何帮助将不胜感激。

Answer 1

不要使用将方法绑定到错误的this的箭头函数。 改用常规函数：

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

工作示例： https://glitch.com/edit/#?/fanatical-cardamom.path=phisphere:js:5:19