ThreeJS——通过与另一个对象相交来显示一个对象的方法

Question

我尝试编写一个 ThreeJS 交互，用户将鼠标悬停在一个球体上，然后会显示一个连接的文本对象。问题是用相交的球体显示连接的文本对象，以便每个球体显示自己的文本。

现在我只能为每个相交的球体显示相同的文本对象。我认为光线投射部分缺少一些代码，无法选择正确的文本对象。

//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();            
}

Answer 1

我建议您坚持相同的顺序，就像网站上的示例一样 threejs.org:

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

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

function init() {
...
}

function render() {
...
}

我冒昧地修改了你的代码。这里是 result. Code here.

ThreeJS——通过与另一个对象相交来显示一个对象的方法

ThreeJS – way to show one object by intersecting another

intersection

onmouseover

three.js