Three JS select geometry by id
Background: I'm a developer who knows JS, but relatively new to Three JS. I've done a few small projects that include static scenes with basic looping animations.
I am currently working on a modified version of the Google Globe project http://workshop.chromeexperiments.com/globe/ . In hindsight, I probably should have started from scratch, but it was a good tool to see the approach they took. I just wish I could update ThreeJS now without breaking the whole thing (too many unsupported methods and some bugs that I could never fix, at least not at the hour I tried it).
In the original, they combine all geometric points into one object for faster FPS. For my purposes, I update points on the globe with JSON and there will never be more than 100 (probably no more than 60), so they must remain individual. I removed the "combine" phase so that I can now individually assign data to the points and then TWEEN the height change animation.
My question is, how can I manually select one point (which is the geometry of the cube) so that I can change the height value? I've looked at Stack Overflow and Three JS on GitHub and I'm not sure I understand the process. I assign an ID so that it directly touches the data that is passed into it (I know WebGL adds a custom name / ID for the particles, but I need something more directly related to what I'm doing for the sake of simplicity). This seems to work fine. But then again, as JS dev, I've tried .getElementById (id) and $ ('#' + id) in jQuery and none of them work. I understand that Geometry objects do not behave the same way as HTML DOM objects, so I guess that's where I fear.
Code for adding a data point to the globe:
function addPoint(lat, lng, size, color, server) {
geometry = new THREE.Cube(0.75, 0.75, 1, 1, 1, 1, null, false, { px: true,
nx: true, py: true, ny: true, pz: false, nz: true});
for (var i = 0; i < geometry.vertices.length; i++) {
var vertex = geometry.vertices[i];
vertex.position.z += 0.5;
}
var point = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial ({
vertexColors: THREE.FaceColors
}));
var phi = (90 - lat) * Math.PI / 180;
var theta = (180 - lng) * Math.PI / 180;
point.position.x = 200 * Math.sin(phi) * Math.cos(theta);
point.position.y = 200 * Math.cos(phi);
point.position.z = 200 * Math.sin(phi) * Math.sin(theta);
if($('#'+server).length > 0) {
server = server+'b';
}
point.id = server;
point.lookAt(mesh.position);
point.scale.z = -size;
point.updateMatrix();
for (var i = 0; i < point.geometry.faces.length; i++) {
point.geometry.faces[i].color = color;
}
console.log(point.id);
scene.addObject(point);
}
So now, to go back, I know I cannot use point.id because obviously it will only be a reference within a function. But I've tried "Globe.id", "Globe.object.id", "object.id" and nothing works. I know this is possible, I just cannot find a way that works.
source to share
Ok, I found a method that works for this by playing around with the structure.
Essentially, the scene is designated as a "globe" and all objects are its children. Therefore, considering the scene as an array, we can successfully pass the object to var using the following structure:
Globes> Stage> Children> [Object]
Using the mapping function, we loop through each element and find the desired geometric object and assign it to a temporary var for animation / customization:
function updatePoints(server){
var p, lineObject;
$.getJSON('/JSON/'+server+'.json', function(serverdata) {
/* script that sets p to either 0 or 1 depending on dataset */
var pointId = server+p;
//Cycle through all of the child objects and find a patch in
for(var t = 3; t < globe.scene.children.length; t++) {
if(globe.scene.children[t].name === pointId) {
//set temp var "lineObject" to the matched object
lineObject = globe.scene.children[t];
}
}
/* Manipulation based on data here, using lineObject */
});
}
I don't know if anyone else has any questions, but I hope this helps someone else! :)
EDIT: Just realized this is not a keyed array, so I can use .length to get the total number of objects
source to share