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

我建议你坚持使用相同的顺序，就像网站上的例子一样：三个：

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

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

function init() {
...
}

function render() {
...
}

我冒昧地改变你的代码。这是result。代码here。

ThreeJS - 通过交叉另一个来显示一个对象的方式

1 个答案: