THREE.Object3D.add: object not an instance of THREE.Object3D.
MonkeyChap opened this issue · 10 comments
Hi,
I just tried the basic example, and got this error:
THREE.Object3D.add: object not an instance of THREE.Object3D.
It happens when I call:
graph(element[0])
.graphData(gData);
...where element[0] is the html dom object
Any ideas what might be causing it ?
Thanks
Ian
Just noticed it only happens if I use require(). If I just import the script in the HTML header, everything works. Maybe the three.js node module changed ?
Thanks for the report @MonkeyChap. Hard to say from just this info. Do you have a reduced example/repo somewhere that reproduces the issue, so I can have a closer look?
I'm running into a similar issue that might help.
I have this block of code that I've cobbled together from the examples:
const data = <?php echo "\"" . $url_string . "\""?>;
const elem = document.getElementById('3d-graph');
const Graph = ForceGraph3D()
(elem)
.jsonUrl(data)
.nodeThreeObject(node => {
var s = new THREE.SphereGeometry(node.size);
var t = new SpriteText(node.name);
t.color = node.color;
t.textHeight = 6;
var group = new THREE.Group();
group.add(s);
group.add(t);
return group;
})
.linkOpacity('1')
.linkWidth('10')
.linkResolution('25')
.onNodeClick(node => {
// Aim at node from outside it
const distance = 1000;
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
Graph.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt ({ x, y, z })
3000 // ms transition duration
);
});
The sprite portion of the nodeThreeObject call works fine, but the SphereGeometry gives the "object not an instance" error. From research it looks like the spheres are being called before the object is finished, but I'm not sure what I need to do to fix that.
Is THREE.SphereGeometry really a THREE.Object3D?
Combining it with Material into a Mesh works good:
var sphere = new THREE.SphereGeometry(node.size);
var material = new THREE.MeshBasicMaterial({color: 0xffff00});
var mesh = new THREE.Mesh(sphere, material);
..
group.add(mesh);
@MedievalMatt, I agree with @mys, to add an object to a group, it must be an instance of Object3D, and SphereGeometry is not. Did wrapping it in a Mesh fix the issue?
Thanks @MedievalMatt. Yeah I'd love to see a fix for that issue. I believe the culprit is indeed with groups in three-dragcontrols as you mentioned.
Having same issue:
three.js:7990 THREE.Object3D.add: object not an instance of THREE.Object3D.
just tried to copy paste from:
https://bl.ocks.org/vasturiano/2f602ea6c51c664c29ec56cbe2d6a5f6
using the script in a script.js that I then compile with webpack (not think it s that the problem)
importing the library like this:
import ForceGraph3D from '3d-force-graph';
As result I can see the console.log that nodes are added, but no rendering is displayed.
I tried also basic version, same error.
Seems the only working method is loading the script externally:
`
I got this issue three.js:7990 THREE.Object3D.add: object not an instance of THREE.Object3D.
both with require() and import