Three.jsでgeometryを生成するクラスを作りたい

Question

前提・実現したいこと

FloatingCharsGeometry.js
FloatingChars.js

↑の処理をクラスで置き換えて作りたいのですが、FloatingCharsGeometryをうまくクラスで作れません。

geometryクラスのイメージ

  class CreateGeometry {
    constructor() {
      this.init();
    }
    init() {
      this.geometry = new THREE.BufferGeometry();
      this.vertices = new Float32Array([
        -10.0,  10.0,  0,
        -10.0, -10.0,  0,
        10.0, -10.0,  0,
      ]);
      this.geometry.addAttribute( 'position', new THREE.BufferAttribute( this.vertices, 3 ) );
    }
  }

このようなクラスを作り（実際はもう少し複雑な処理を実行）、

class main {
  constructor() {
    this.init();
  }
  init() {
    this.geometry = new CreateGeometry();
    this.material = new THREE.MeshBasicMaterial({
      color: 0x000000,
      wireframe: true,
      side: THREE.DoubleSide
    });
    this.mesh = new THREE.Mesh(this.geometry, this.material);
    // 省略
  }
}

こんな感じで this.geometry = new CreateGeometry(); でgeometryを生成したいです。

発生している問題・エラーメッセージ

このようなエラーがでます。おそらく　geometryが正しく作れてないのかと思います。

Uncaught TypeError: Cannot read property 'center' of undefined

Answer 1

this.mesh = new THREE.Mesh(this.geometry, this.material);

第一引数がCreateGeometryのオブジェクトであってGeometryではないのが原因ではないでしょうか。

例えば
class CreateGeometry に

getGeometry(){
 return this.geometry;
}

を用意し
this.mesh = new THREE.Mesh(this.geometry.getGeometry(), this.material);
で解決するかと思います。

回答者はThree.js初心者です。
同じerrが出たので...間違っていたらすみません。

Comments

[mtoutside]

ありがとうございます。geometryをreturnしたら確かにうまくいきました！

Answer 2

centerが未定義ですよ。というエラーですが、
貼られているコードの中にcenterはないので、この部分以外に問題があるのでは。