如何在three.js中与场景中的对象进行交互?

Aldmeri

例如,如果我用鼠标指向场景中的一个圆圈,则能够检测到该圆圈。我到处都看了,似乎什么也找不到。Three.js文档也没有真正谈论它。

弟子

首先,您应该添加“ mousemove”,“ mousedown”之类的事件监听器。

document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousemove', onDocumentMouseMove, false); 

因此,您需要在将鼠标移到圆圈上时发生事件。因此,让我们发出警报,即当鼠标在该圆圈上移动时,您将收到警报。

function onDocumentMouseDown(event) {

    event.preventDefault();

    mouseYOnMouseDown = event.clientY - windowHalfY;
    mouseXOnMouseDown = event.clientX - windowHalfX;

    var vector = new THREE.Vector3((event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1, 0.5);
    vector = vector.unproject(camera);

    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects(circleObj, true); // Circle element which you want to identify

    if (intersects.length > 0) {
        alert("Mouse on Circle");
    }

}

在three.js中,我们使用raycaster指向任何对象。在three.js文档中浏览raycaster。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在three.js中访问场景元素

来自分类Dev

如何在three.js中获得整个场景的boundingSphere?

来自分类Dev

如何在three.js中访问场景元素

来自分类Dev

场景中的静态对象-Three.js

来自分类Dev

如何在node.js流中与此<File>对象进行交互?

来自分类Dev

如何在Emblem.js的交互中从对象内插值?

来自分类Dev

在three.js中对“子场景”进行光线投射

来自分类Dev

如何在Three.js中的场景中添加其他图像

来自分类Dev

缓慢地从Three.js场景中删除许多对象

来自分类Dev

three.js从场景中删除特定对象

来自分类Dev

如何在THREE.js中单击对象

来自分类Dev

如何在Three.js中制作多个对象?

来自分类Dev

如何在Three.js中拖动多个对象?

来自分类Dev

如何在three.js中制作交互式视频进度条?

来自分类Dev

如何从内存中擦除场景和网格?Three.js

来自分类Dev

如何在 THREE.Points 对象中单击特定点?

来自分类Dev

如何在node.js中渲染three.js?

来自分类Dev

在画布中渲染Three.js场景

来自分类Dev

如何在javafx场景中创建新对象?

来自分类Dev

如何在three.js中使用Three.Triangle()

来自分类Dev

取消在THREE.js中将对象加载到场景中

来自分类Dev

拖动以更改Three.js场景中3D模型对象的位置

来自分类Dev

如何在Three.js中启用阴影

来自分类Dev

如何在Three.js中不拉伸就重复纹理?

来自分类Dev

您如何在Three.js中更新制服?

来自分类Dev

如何在Verold脚本中获取Three.js Sprite

来自分类Dev

如何在THREE.js中更改SpotLight shadowCameraNear参数?

来自分类Dev

如何在Blender for Three.js中对顶点分组?

来自分类Dev

如何在Three.js中编写getworldposition函数?

Related 相关文章

热门标签

归档