代码之家 › 专栏 › 技术社区 › nnyby

三.js:查找距鼠标光标最近的网格点

raycasting mouseevent three.js javascript

nnyby · 技术社区 · 7 年前

当用户拖动黄色光碟(表示太阳)时,光碟需要沿其黄色圆圈移动以响应此操作。这是另一个角度的场景,所以你可以看到完整的黄色圆圈:

我在用 THREE.Raycaster 要确定某些鼠标悬停事件,请使用 intersectObjects() 函数,但我不清楚如何用这个光线投射器找到单个物体的最近点。我猜在把鼠标的位置转换成世界坐标后,我可以做一些简单的计算。有人能帮我吗?是三.jsRaycaster在这里有用吗?如果不是,如何确定该网格的最近点?

完整的源代码在这里,如果有帮助的话: https://github.com/ccnmtl/astro-interactives/blob/master/sun-motion-simulator/src/HorizonView.jsx 搜索 this.sunDeclination ,对应于黄色圆的网格对象。

https://ccnmtl.github.io/astro-interactives/sun-motion-simulator/

作为参考,太阳的行为应该是这样的: https://cse.unl.edu/~astrodev/flashdev2/sunMotions/sunMotions068.html (需要闪光灯)

2 回复 | 直到 7 年前

stdob-- 7 年前

已知圆的半径,计算矢量乘以标量的乘数

var point = res.point.clone();
point.z = 0; // Project on circle plane
var scale = circleRadius / point.length();
point.multiplyScalar(circleRadius / point.length())

[ https://jsfiddle.net/c4m3o7ht/

manthrax 7 年前

光线投射器返回所有被光线击中的物体。。世界空间的所有生命点。。(可以通过object3d.worldToLocal和localToWorld与模型空间进行转换)

它返回命中距离。。你可以根据你需要的启发来排序。。。

我通常做的是投在老鼠镇上。。记录物体和点。。然后在mouseMove上获取相同的对象命中点,并使用这两个点之间的差异应用我的编辑操作。

这就是你说的吗?

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前