Warm tip: This article is reproduced from stackoverflow.com, please click
javascript three.js

TypeError: can't convert undefined to object in Three.js using THREE.Points()

发布于 2020-03-27 10:18:53

I have a problem with my Three.js code. I want to implement the asteroid belt for my solar sistem simulator. So I want to use the THREE.Point() object. To do it I write a function but it returns the "type error" as in the title.

I'm using THREE.js library on my Ubuntu 19.10 and I'm using Firefox 67.0.4. The problem is also in Chrome. The code below is in createAsteroidBelt() function that I call in the init() function.

Here my code: I was inspired to 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);

The error is exactly in this line:

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

Here the stack of the error:

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

I don't understand the cause of this error.

ERROR SOLVED Thanks to @jeffld to solve the error. Now I have a problem with the shape of this asteroid belt. It has a square shape instead of a ring. Here a photo: Asteroid belt shape

FINAL SOLUTION I just also solve the last error. The problem is that I generate a different angle for coordX and coordY, instead of using the same angle. Here the correct part of the code:

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

Thank you very much to all for the help :) .

Questioner
giacar
Viewed
44
jeffld 2019-07-03 21:43

This is a open issue in three.js.

The object is missing the morphAttributes object (even though it is empty).

You can work around it by adding using this line after the push:

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