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

Question

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

我试图查看 three.js 网格对象（表示建筑物）是否有任何 "data" 属性可以存储此信息的地方。它没有。

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

Answer 1

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

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

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

Answer 2

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

由于 Mesh class 派生自 Object3D，它也有属性。

像这样使用它：

mesh.userData.name = "TheName";

three.js r.71

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

Associating data in a three.js mesh object - in a procedurally generated city

javascript

three.js

procedural-generation