javascript - 使用 THREE.Points() 时出现 TypeError : can't convert undefined to object in Three. js

Question

我的 Three.js 代码有问题。我想为我的太阳系统模拟器实现小行星带。所以我想使用 THREE.Point() 对象。 为此，我编写了一个函数，但它返回“类型错误”，如标题所示。

我在 Ubuntu 19.10 上使用 THREE.js 库，并且使用 Firefox 67.0.4。 Chrome 也有这个问题。 下面的代码位于我在 init() 函数中调用的 createAsteroidBelt() 函数中。

这是我的代码:我受到here的启发。 .

var dist = (data[jupiterId].distance + data[marsId].distance)/2;
var particleCount = 1000;
var asteroidsGeometry = new THREE.Geometry();

// now create the individual particles
for (let i = 0; i < particleCount; i++) {
    // create a particle with random position
    var asteroidOrbit = dist + THREE.Math.randFloat(-10, 10);
    var coord = new THREE.Vector3();
    coord.x = Math.cos(THREE.Math.randFloat(0, 2*Math.PI)) * asteroidOrbit;
    coord.y = THREE.Math.randFloat(-2, 2);
    coord.z = Math.sin(THREE.Math.randFloat(0, 2*Math.PI)) * asteroidOrbit;
    asteroidsGeometry.vertices.push(coord);
}

var asteroids = new THREE.Points(asteroidsGeometry, new THREE.PointsMaterial({
    size: 20
}));
asteroids.name = "Asteroid Belt";
planets[solarSystemId].add(asteroids);

错误正是在这一行:

var asteroids = new THREE.Points(asteroidsGeometry, new THREE.PointsMaterial({
    size: 20
}));

这里是错误的堆栈:

updateMorphTargets file:///.../libraries/three.min.js:672
ac file:///.../libraries/three.min.js:216
createAsteroidBelt file:///.../main.js:363
init file:///.../main.js:478
<anonima> file:///.../main.js:612

我不明白这个错误的原因。

错误已解决 感谢@jeffld 解决了这个错误。 现在我对这个小行星带的形状有疑问。它具有方形而不是环形。这是一张照片: Asteroid belt shape

最终解决方案 我也解决了最后一个错误。问题是我为 coordX 和 coordY 生成了不同的 Angular ，而不是使用相同的 Angular 。 这是代码的正确部分:

var asteroidOrbit = dist + THREE.Math.randFloat(-10, 10);
var angle = THREE.Math.randFloat(0, 2*Math.PI);
var coord = new THREE.Vector3();
coord.x = Math.cos(angle) * asteroidOrbit;
coord.y = THREE.Math.randFloat(-2, 2);
coord.z = Math.sin(angle) * asteroidOrbit;
asteroidsGeometry.vertices.push(coord);

非常感谢大家的帮助:)。

Answer 1

这是 Three.js 中的一个未决问题。

该对象缺少 morphAttributes 对象(即使它是空的)。

您可以通过在推送后添加以下行来解决此问题:

asteroidsGeometry.vertices.push(coord);
asteroidsGeometry.morphAttributes = {};