温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - TypeError: can't convert undefined to object in Three.js using THREE.Points()

javascript - TypeError:无法使用THREE.Points()将undefined转换为Three.js中的对象

发布于 2020-03-27 10:42:05

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

我在Ubuntu 19.10上使用THREE.js库,在Firefox 67.0.4上使用。Chrome中也存在此问题。下面的代码在我在init()函数中调用的createAsteroidBelt()函数中。

在这里我的代码:我的灵感来这里

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

我不了解此错误的原因。

ERROR解决 由于@jeffld解决错误。现在我对小行星带的形状有疑问。它具有正方形而不是环形。这里的照片: 小行星带形状

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

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

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

查看更多

查看更多

提问者
giacar
被浏览
45
jeffld 2019-07-03 21:43

这是three.js中的未解决问题。

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

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

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