在程序生成的城市中，在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