关联three.js网格对象中的数据 - 在程序生成的城市中

Question

我正在尝试使用three.js创建一个程序生成的城市，该城市主要由建筑物组成。要求是，当点击建筑物（用鼠标）时，应显示有关该建筑物的信息（例如名称，位置等） - 例如，作为悬停在该建筑物旁边的文本框。

我试图查看three.js网格对象（代表建筑物）是否具有可以存储此信息的任何“数据”属性。它没有。

知道如何实现此功能吗？ TIA。

Answer 1

Object3D类有一个属性userData，您可以安全地添加自定义数据。

由于Mesh类派生自Object3D，因此它也具有该属性。

像这样使用它：

mesh.userData.name = "TheName";

three.js r.71

Answer 2

它仍然是JavaScript，因此您可以向网格添加自定义对象：

var building = new THREE.Mesh( [...] );
building.info = { name: "myHouse", lat: 48.12, lng: 8.54, [...] };

console.log( building.info.name ); //myHouse