Add multiple spheres in a three.js scene

问题

This is my first week dabbling in javascript and my 3d day with three.js so please bear with me, this may be possibly a dumb question. My problem is this: I have created a scene, in which I want to add small spheres -representing the joints of a skeleton from a kinect feed, coming as a json object. I have tried to create the scene, add an event listener and create the relevant geometries, but.. no go. Here is the relevant code:

scene.addEventListener("skeletonEvent", function(e) {
if (e.detail.SkeletonSourceData.Skeletons[0].Joints[10].Position.X > e.detail.SkeletonSourceData.Skeletons[0].Joints[3].Position.X)
{
    scene.getObjectByIdB("skeleton").options[0].selected = true;
}
else
{
    scene.getObjectById("skeleton").options[1].selected = true;
}
jsonObject = e.detail.SkeletonSourceData;


var InitialCenter = new THREE.Vector3( 0, 0, 0 );

//for every skeleton    
for (var i = 0; i < jsonObject.Skeletons.length; i++) {
    //get the coordinates of the joints
    for (var j = 0; j < jsonObject.Skeletons[ i ].Joints.length; j++) {
        InitialCenter = InitialCenter.add(new THREE.Vector3(jsonObject.Skeletons[i].Joints[j].Position.X, jsonObject.Skeletons[i].Joints[j].Position.Y, jsonObject.Skeletons[i].Joints[j].Position.Z ));

        var joint1 = jsonObject.Skeletons[ i ].Joints[ j ];

        //add joint to geometry
        var sphereGeometry = new THREE.SphereGeometry(1,10,10);
        var sphereMaterial = new THREE.MeshLambertMaterial({color: 'rgb(255, 0, 0)'});

        //add joint to geometry
        var jointSpheres = [];

    jointSpheres[j] = new THREE.Mesh(sphereGeometry, sphereMaterial);

    jointSpheres[j].position.x = joint1.position.x[j];
    jointSpheres[j].position.y = joint1.position.y[j];
    jointSpheres[j].position.z = joint1.position.z[j];

    scene.add(jointSpheres[j]);
 jointSpheres[j].updateMatrix();
 jointSpheres[j].matrixAutoUpdate=false;
}
}

Any advice? Update: The most perplexing thing is that the listener doesnt work.At all. I have checked everything I could think of, when debugging, it never goes into the listener.. :S

回答1:

Try updating the following code block:

jointSpheres[j].position.x = joint1.position.x[j];
jointSpheres[j].position.y = joint1.position.y[j];
jointSpheres[j].position.z = joint1.position.z[j];

To:

jointSpheres[j].position.x = joint1.position.x;
jointSpheres[j].position.y = joint1.position.y;
jointSpheres[j].position.z = joint1.position.z;

Also your jointspheres will break if you have more than 1 skeleton (they will be overwritten in next pass). Maybe you should do

jointspheres[i][j] = new THREE.Mesh(sphereGeometry, sphereMaterial);

And so on...

来源：https://stackoverflow.com/questions/33954213/add-multiple-spheres-in-a-three-js-scene

标签

javascript

three.js