有没有办法用 BufferGeometry 制作一个四球体？

Question

我是three.js 的新手，我想用BufferGeometry() 构建一个四边形球体。我想重新创建 sebastin lague 立方体球体并在三个 js 中实现。

这是我的 TerrainFace.js 代码：

class {
    constructor(resolution, radius, localUp, scene) {
        this._resolution = resolution;
        this._radius = radius;
        this._scene = scene;

        this._localUp = localUp;
        this._axisA = new THREE.Vector3(localUp.y, localUp.z, localUp.x);
        this._axisB = new THREE.Vector3().crossVectors(this._localUp, this._axisA);

        this._geometry = new THREE.BufferGeometry();
    }

    Start() {
        this._Initialize();
        let plane = new THREE.Mesh(this._geometry, new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }));
        this._scene.add(plane);
    }

    _Initialize() {
        let i;
        let triIndex = 0;

        this._positions = [];
        this._normals = [];
        this._indices = [];

        for (let y = 0; y < this._resolution; y++) {
            for (let x = 0; x < this._resolution; x++) {
                i = x + (y * this._resolution);
                let xPercent = x / (this._resolution - 1);
                let yPercent = y / (this._resolution - 1);

                let _P = new THREE.Vector3();
                let _C = new THREE.Vector3();
                let _A = new THREE.Vector3(this._axisA.x, this._axisA.y, this._axisA.z).multiplyScalar(2 * (xPercent - 0.5));
                let _B = new THREE.Vector3(this._axisB.x, this._axisB.y, this._axisB.z).multiplyScalar(2 * (yPercent - 0.5));
                
                _C.addVectors(this._localUp, _A);
                _P.addVectors(_C, _B);
                // _P.normalize(); // this is for cube sphere
                _P.multiplyScalar(this._radius);
            
                this._positions[i] = _P.x;
                this._positions[i + 1] = _P.y;
                this._positions[i + 2] = _P.z;

                let ad = new THREE.Mesh(new THREE.SphereGeometry(0.1), new THREE.MeshNormalMaterial({ side: THREE.DoubleSide }));
                ad.position.set(this._positions[i], this._positions[i + 1], this._positions[i + 2]);
                this._scene.add(ad);

                if (x != (this._resolution - 1) && y != (this._resolution - 1)) {
                    const a = i;
                    const b = i + 1;
                    const c = i + this._resolution;
                    const d = i = this._resolution + 1;

                    // a - - b
                    // |     |
                    // |     |
                    // c - - d

                    this._indices[triIndex] = a;
                    this._indices[triIndex + 1] = d;
                    this._indices[triIndex + 2] = c;

                    this._indices[triIndex + 3] = a;
                    this._indices[triIndex + 4] = b;
                    this._indices[triIndex + 5] = d;
                    triIndex += 6;
                }
            }
        }

        this._geometry.setIndex(this._indices);
        this._geometry.setAttribute("position", new THREE.Float32BufferAttribute(this._positions, 3));
    }
}

这是基本场景

        let groups = new THREE.Group();
        let directions = [
            new THREE.Vector3(0, 1, 0),
            new THREE.Vector3(0, -1, 0),
            new THREE.Vector3(1, 0, 0),
            new THREE.Vector3(-1, 0, 0),
            new THREE.Vector3(0, 0, 1),
            new THREE.Vector3(0, 0, -1),
        ]

        for (let i = 0; i < directions.length; i++) {      
            let plane = new TerrainFace1(2, 10, directions[i], groups);
            plane.Start();
        }

        this._scene.add(groups);

出于某种原因，它不起作用，它正在创建一些奇怪的形状，我不知道为什么。谢谢。

Answer 1

跟随 Sebastian Lague 球体生成。