CODEWITHSUNDEEP
three.jsintersectiononmouseover
Tobi
Tobi

Reputation: 65

ThreeJS – way to show one object by intersecting another

I try to write a ThreeJS interaction where the user hovers a sphere and a connected text object will show up. The problem is to show the connected text object with the intersected sphere so every sphere shows its own text.

For now I only could show the same text object for each intersected sphere. I think there's some code in the raycast section missing that picks the right text object.

//create textObjects and add to scene
var selectTitles = [];

for (var i = 0; i < numSpheres; i++) {
    var title = 'Title '+i;
    var textGeom = new THREE.TextGeometry( title, {size: 0.5,height: 0});
    var textMaterial = new THREE.MeshBasicMaterial({color:0x334455,transparent: true, opacity: 0});
    var titles = new THREE.Mesh( textGeom, textMaterial );

    group.add( titles );
    titles = selectTitles[i];
}

//onMouseOver
if (intersects[0].object != INTERSECTED) {
   INTERSECTED = intersects[0].object;

   // here 'titles' doesn't pick different text objects because of the missing 'intersected' connection

   new TWEEN.Tween(titles.material).to({opacity:1},350)
   .easing(TWEEN.Easing.Bounce.EaseOut).start();            
}

Upvotes: 1

Views: 677

Answers (1)

gevaraweb
gevaraweb

Reputation: 923

I advise you to stick to the same order, much like in the examples on the site threejs.org:

// global variables
var camera;
var scene;
...

window.onload = function() {
    init();
    render(); //final output    
}

function init() {
...
}

function render() {
...
}

I took the liberty to alter your code. Here is the result. Code here.

Upvotes: 2

Related Questions