有没有办法用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

遵循SebastianLague球体生成。