Three.js中的可点击节点

Question

我有一个3D模型，我正在通过three.js的JSONloader加载。

我想让我可以点击链中的一个链接。该模型在Blender中制作，链的每个链接都是一个单独的节点/对象。

例如，当点击蓝色链接时，应该可以使用“蓝色”触发警报，绿色触发警报等...

甚至可以在three.js中使用，还是应该使用其他解决方案？

谢谢！

Answer 1

使用Three.js绝对可能。

您的问题分为两部分：

1. 如何在屏幕上挑选对象？
2. 如何识别哪一个被选中？

第一部分在很多其他地方很容易回答。 Threejs.org包含一个非常好的例子来证明这一点。它可以找到here。

代码的相关部分如下：

var raycaster, mouse = new THREE.Vector2()
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
    // Do something!
}

intersects是一个数组，因此您可以使用intersects[ 0 ]或特别是带有intersects[ 0 ].object的Object3D节点获得第一个相交（即'前面'中的相交）。

你做什么取决于你。根据您的示例，我会在创建每个对象时向对象添加自定义属性，例如：

object.msg = "This is a test message!"

单击对象时可以记录下来：

var raycaster, mouse = new THREE.Vector2()
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
    if (intersects[0].object.msg) {
        console.log(intersects[0].object.msg)
    }
}

另一种方法是创建一个包含消息和UUID的对象：

var messages = {
    "61f2175b-6908-48dc-9131-55ffa11c8581": "Hello world!"
};
var raycaster, mouse = new THREE.Vector2()
raycaster.setFromCamera( mouse, camera );
var intersects = raycaster.intersectObjects( scene.children );
if ( intersects.length > 0 ) {
    var uuid = intersects[0].object.uuid;
    if (messages[uuid]) {
        console.log(messages[uuid])
    }
}

希望这能为您提供有关如何解决此问题的一些想法！