Show / Hide:
I am using Three.js Release 50 and can show / hide objects (in my application this is a child of the grid) with:
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 when using version 54, it is said that using object.traverse is very difficult to find. How to replace the above code with release 54? The error I get when using version 54:
Picking:
I found an example that is very famous and complex for Picking in Three.js, which is based on "Pick Picking" and its link: Three. js Picking Example . Based on this example, I tried to implement a selection in my application. But for some reason, an error appears on this line.
var raycaster = new THREE.Raycaster( camera.position, vector.subSelf( camera.position ).normalize() );
I controlled the relationship of the parent and child cones [my geometry] in the javascript user object [data structure] so that (Layer1 {the used array for each layer inside the object} has 100 cones and all are parents. On the second layer there are 100 cones, which are children for the cones on layer 1 [multiplicity 1: 1]], and layer 3 has cones that are child cones on layer 2, and their ratio is also 1: 1, so they are also grandchildren of the cones of layer 1).
I used the grid to add the grand parent cone from the first layer and access the child layer in layer2 through this parent, and added it to the same grid and the same available grandson through the child element and added to the same grid. Finally, I added the whole scene to the stage. Due to z-depth changes [for the first z-cordinate layer: 5 for layer 2: 0 and layer 3: -5] layer 1 and layer 2 and layer 3 are literally formed in three layers as the image below.
But using the following code, I could not see any 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 to be selected when the rays intersect and are simultaneously based on whether the particular cone will consist of grandfathers / parents / children, the remaining cones of a particular family. I have a helper function for my custom data structure that returns a parent by entering a parent (grandfather and parent) and a child, by entering a parent, which you can use for my choice.
I have a JSfiddle link that uses Three.js 54 and CombinedCamera.js as additional resources, please help me figure out how this will work. I seriously need HELP.
Here is my Jsfiddle link: http://jsfiddle.net/sagh0900/SQyLL/
My previous version of working Jsfiddle was before implementing Picking and using version 3..sys 54. In this version, I used release 50 of three. js I can successfully show / hide objects: http://jsfiddle.net/sagh0900/PrVbg/3/
Thank you in advance for your help and support :)