mesh threejs 属性_Threejs怎么才可以对每一个mesh绑定事件

局部绑定:针对一个对象,或者 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 的方式绑定事件。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为three.js中的多边体点击事件也可以使用鼠标交互和射线。以下是一个基本的示例代码: ```javascript // 创建一个可交互的多边体 var geometry = new THREE.TetrahedronGeometry(50); var material = new THREE.MeshBasicMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 0, -100); scene.add(mesh); // 创建一个射线 var raycaster = new THREE.Raycaster(); var mouse = new THREE.Vector2(); // 监听鼠标移动事件 function onMouseMove(event) { // 计算鼠标在屏幕上的位置 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; } // 监听鼠标点击事件 function onClick(event) { // 将鼠标位置转换为three.js的向量 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; // 在场景中发射射线 raycaster.setFromCamera(mouse, camera); // 计算射线和物体的交点 var intersects = raycaster.intersectObjects(scene.children, true); if (intersects.length > 0) { // 如果射线和物体有交点,取第一个交点的对象 var obj = intersects[0].object; // 判断对象是否为多边体 if (obj.geometry instanceof THREE.Geometry) { // 执行点击事件 obj.onClick(obj); } } } // 将事件添加到document上 document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('click', onClick, false); ``` 在上面的代码中,首先创建了一个可交互的多边体和一个射线。然后监听鼠标移动和点击事件,并将鼠标位置转换为three.js的向量。在点击事件中,我们使用射线和场景中的所有对象进行交叉检测,如果有交点,就执行相应的点击事件。在这里,我们假设多边体是由THREE.Geometry对象创建的,如果被点击的对象是多边体,则执行该多边体的点击事件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值