Show/Hide:
I've been using Three.js Release 50 and able to show/hide the objects (In my application, it is a mesh child) with the help of:
THREE.SceneUtils.traverseHierarchy(mesh,function(child){
var z = document.getElementById("cameras").selectedIndex*5 -10;
if (z === -10){
child.visible = true;
} else if (child.position.z !== z){
child.visible = false;
} else {
child.visible = true;
};
});
But while using release 54, it is said that to use, object.traverse but found very difficult to the same. How to replace the above code using release 54? The error I'm getting while using release 54 is:
Picking:
I found an example which is very famous and complex one for Picking in Three.js which is based on "Ray Picking" and its link : Three.js Picking Example. Based on this example I've been trying to implement picking in my application. But somehow there comes an error at this line.
var raycaster = new THREE.Raycaster( camera.position, vector.subSelf( camera.position
).normalize() );
I've managed the parent - child relationships of cones [my geometry] in custom javascript object [data structure] in such a way that (Layer1 {used array for each layer within the object} has 100 cones and all are parents, Layer 2 has 100 cones which are children to cones on layer1 [multiplicity 1:1]] and layer 3 has cones which are children to cones on layer 2 and their relationship is also 1:1, thus they are also grandchildren to layer1 cones).
I used a mesh to add the grand parent cone from first layer and accessed child in layer2 through this parent and added it to same mesh and same accessed grandchild through child and added to the same mesh. Finally I added whole Mesh to the scene. Because of "z-depth" variations [for layer one, z-cordinate:5 , for layer2: 0 and layer 3: -5], the layer1 and layer2 and layer3 are literally formed in three layers as image below.
But while using the following code, I couldn't see any picking on my cones.
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
var raycaster = new THREE.Raycaster( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = raycaster.intersectObjects( scene.children ); // tried with mesh.children as well, but no change :(
if ( intersects.length > 0 ) {
if ( INTERSECTED != intersects[ 0 ].object ) {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.emissive.getHex();
INTERSECTED.material.emissive.setHex( 0xff0000 );
}
} else {
if ( INTERSECTED ) INTERSECTED.material.emissive.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
}
I wanted my particular cone is to be picked as the ray intersects and simultaneously based on whether the particular cone is a Grandparent/parent/child remaining cones of the particular family also to be picked. I've helper function for my custom data structure which returns the parent by inputting grand parent (Grandparent <- Parent) and child by inputting parent, which you can take help of it for my picking.
I've a JSfiddle link, which uses Three.js release 54 and CombinedCamera.js as additional resources, please someone help me to sort out this to be worked. I'm seriously in need in HELP.
Here is my Jsfiddle link: http://jsfiddle.net/sagh0900/SQyLL/
My previous version of working Jsfiddle prior to implementing Picking and using Three.js release 54. In this version, I've used release 50 of three.js which I'm successfully able to show/hide objects: http://jsfiddle.net/sagh0900/PrVbg/3/
Thanks in advance for your HELP and SUPPORT :)
