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

2025-03-22 03:57:06
推荐回答(2个)
回答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 的方式绑定事件。

回答2:

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

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