Question

Threejs怎么才可以对每一个mesh绑定事件

Answer 1

事件介绍

全局绑定事件和局部绑定事件

用户的操作以及场景的变化，都将会触发相应的事件。你可以监听这些事件，然后在回调方法中做相应的处理网页链接

• 全局绑定：通过 app.on 绑定事件，可在全局下添加条件指定针对哪些物体绑定该事件，条件规则同于 query 使用的条件。

  注意事项

  在全局绑定后，新创建的符合条件物体也可以生效。

  一些事件也可以不添加条件，不针对特定物体即可生效。

  例子1：

  app.on("click", function(ev) {
  console.log("you click!");});
  

  上面的例子，不添加条件，鼠标一 click 就触发。

  例子2：

  app.on("click", ".Thing", function(ev) {
  console.log("you click " + ev.object.id);});
  

  上面的例子，添加了条件，只有在符合该条件的物体上 click 才会触发，无论是已经存在的 Thing 对象，还是后面新创建的 Thing 对象都会生效。

  查看示例

• 局部绑定：针对一个对象，或者 query 的查询结果（Selector），通过 on 接口绑定事件，我们叫局部绑定。同全局绑定，事件中可以加条件，表示这个事件绑定是针对这个物体子子孙孙的。

  也可以不添加条件，表示该事件是针对物体本身的

  例子3：

  obj.on("click", function(ev) {
  console.log(ev.object.name);});
  

  上面的例子，当这个物体被点击，就会触发

  例子 4：

  obj.on("click", ".Marker", function(ev) {
  console.log(ev.object.name);});
  

  上面的例子，当这个物体子孙里有 Marker 物体，当它被点击就会触发。同全局绑定 Marker 物体，绑定后 obj 的子孙里新创建的 Marker 也响应这个事件。

  例子 5：

  obj.query(".Marker").on("click", function(ev) {
  console.log(ev.object.name);});
  

  上面的例子，其实就是直接查询 obj 其下所有的 Marker 物体，遍历找到的 Marker，分别使用 on 注册事件。

  注意事项

  这个方式是对 obj 下每个查询到的 Marker 物体即时绑定的，对于 obj 下后创建的 Marker，是没有影响的。

  上面的例子，其实就是直接查询 obj 其下所有的 Thing 物体，遍历找到的 Thing，分别使用类似例子 4 的方式绑定事件。

Answer 2

这个要自己写一个接口 将dom事件绑定到你的事件上去。
举例说明。假定你现在用的是鼠标事件。
用Three.Raycaster接受mouse的Event的X,Y值。然后干你相干的事情。
然后和自己事件结合用监听者写一写。
代码可以看这个代码

https://github.com/OhBonsai/oneTile/blob/master/js/app/event/objectMarker.js