threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

已于 2022-06-15 18:57:31 修改
阅读量7.1k 收藏 17
点赞数 7
分类专栏： threejs 文章标签： javascript 前端 threejs 3D webgl
于 2022-06-15 18:56:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40856652/article/details/125302743
版权
本文介绍了如何使用Three.js在3D场景中监听鼠标点击事件，并通过光线投射技术获取点击位置的三维坐标。通过绑定点击事件，确定鼠标点击到的最前面的物体，从而获取该点的坐标。
摘要由CSDN通过智能技术生成

一、思路

绑定点击事件，通过THREE.Raycaster光线投射，用于确定鼠标点击位置上有哪些物体，raycaster.intersectObjects(scene.children)返回点击位置上所有的物体的数组；我们用var selected = intersects[0]取第一个，也就是最前面的那个物体；在通过selected.point取点坐标

二、代码

addClick();
function addClick () {
   
    var raycaster = new THREE.Rayc
了解本专栏 订阅专栏 解锁全文 超级会员免费看
慢步者_rambler
关注
  • 7
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
threejs实现点击获取当前坐标(x,y,z)
九段刀客的博客
08-13 5641
实现点击模型获取模型坐标
鼠标点击获取3维坐标three
啦啦啦啦
03-19 5653
鼠标点击的屏幕坐标转换到视点坐标系 var me = this, view = this.getView(), viewModel = this.getViewModel(); var text = view.down(‘[name=Pickuppos]’).getText(); if (me._object) { if (text...
Three.js获取鼠标点击的三维坐标示例代码
12-09
由于工作需要，但是对于three.js又是一窍不通，网上的资料又很少，所以上来就让我获取坐标，真是一个头两个大。好歹最后终于实现了。 既然已经是想要获取鼠标点击的三维坐标了，相信你camera对象和scene都已经有了，如果不了解的小伙伴，可以先去看一下这两个对象。这里主要说一下怎么获取到三维坐标，原理性的东西不提。上代码： function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3();//三维坐标对象 vector.set( ( even
three.js地理坐标系有哪些，和屏幕坐标系的转换。
最新发布
2401_82881178的博客
07-03 1199
坐标系很好理解，就是点线面体的位置，一个点是一个坐标，一条线段2个坐标，一个矩形四个坐标，一个立方体8个坐标，three.js面对的是三维空间，屏幕则是二维的，这就面临着转换问题，贝格前端工场借助本文为大家浅释一下。
three.js---鼠标点击获取该点的世界坐标
qq_46056472的博客
08-10 1335
【代码】three.js---鼠标点击获取该点的世界坐标。
Three.js - 鼠标拾取（射线追踪法）（十九）
小小的前端
04-26 2235
射线追踪法 射线追踪法是最常见的方法，因为three.js提供了Raycaster对象来实现它。 原理：从鼠标处发射一条射线，穿透场景的视椎体，通过计算，找出与射线相交的对象。 Raycaster 属性： origin 光线投射的原点。 direction 射线的方向。 near 投射近点，不能大于far，不能为负值，其默认值为0。 far 投射远点，不能小于near，其默认值为无穷大。 常用方法： .setFromCamera(coords,camera) 更新原点坐标和相机视椎。co
three.js3维坐标系+绘制立方体（带边框）
02-28
在本文中，我们将深入探讨如何使用three.js库创建一个3维坐标系，并在该系统中绘制带有边框的立方体，以及在立方体表面绘制线条。three.js是JavaScript的一个强大库，专门用于在Web浏览器中进行3D图形编程。让我们一...
Three.js 三维坐标柱状图
04-13
在这个"Three.js 三维坐标柱状图"项目中，我们将探讨如何利用Three.js 创建一个具有三维坐标轴的柱状图，并涉及坐标矢量的使用。 首先，让我们了解Three.js中的基本概念。在Three.js中，一切皆为对象，包括场景...
three.js加载json三维模型.zip
11-14
在三维Web开发领域，Three.js是一个非常流行的JavaScript库，它为浏览器提供了强大的3D图形渲染功能。本主题将深入探讨如何使用Three.js加载JSON格式的三维模型，以及与BIM（建筑信息模型）相关的应用。 一、Three....
ThreeJS获取三维世界坐标（坐标返回数组为null）
code for life
12-03 2243
three获取世界坐标的方法是通过将二维坐标转换为三维坐标，具体代码如下所示。 实现代码 onMouseClick(event) { event.preventDefault(); var vector = new THREE.Vector3(); //三维坐标对象 vector.set( (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.inner
获取鼠标位置的三维坐标
syd_programming的专栏
06-07 949
CDC* m_pDC = GetDC(); ::wglMakeCurrent(m_pDC->m_hDC, gl3d.m_hRC); glDisable(GL_TEXTURE_2D); glDisable(GL_FOG); glDisable(GL_LIGHTING); GLint viewport[4]; glGetIntegerv(GL_VIEWPORT,
threejs中坐标系转换和实现物体跟随鼠标移动
热门推荐
目尽地平线
09-11 2万+
threejs中屏幕坐标系向threejs坐标的转换方法，以及实现物体跟随鼠标移动
threejs下的鼠标事件的各种XY坐标
qq_40712151的博客
06-16 1430
转载于：https://blog.csdn.net/weixin_41342585/article/details/80659736
Threejs进阶之十：让模型移动到鼠标点击的指定位置
九仞山的专栏
04-29 2534
介绍了让模型移动到鼠标点击的指定位置的详细思路和方法，里面用到了HTML中DOM获取坐标的属性和方法，Threejs中光线折射的方法，归一化，向量等知识
ThreeJS中的点击与交互——Raycaster的用法
sanlyshi's front-end road
09-02 1685
基础概念 坐标系 我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。 世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正轴，上面是y正轴，屏幕指向你的为z正轴。长度单位这样来定：窗口范围按此单位恰好是(-1,-1,-1)到(1,1,1)。 屏幕坐标系： web...
Threejs-射线拾取模型，获取模型表面点击的点坐标
qq_36266612的博客
05-05 4313
addEventListener('click',Ray);// 监听窗口鼠标单击事件 function Ray() { var windowX = event.clientX;//鼠标单击位置横坐标 var windowY = event.clientY;//鼠标单击位置纵坐标 var x = (windowX / windo...
ThreeJS教程：屏幕坐标转标准设备坐标
jianshi2023的博客
06-06 812
推荐：将加入你的3D工具链。
ThreeJS geometry的顶点世界坐标
u011927449的博客
08-02 834
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style> <!--引入three.js三维引擎--.
使用Three.js构建三维房屋设计
这篇文档详细介绍了如何使用three.js库构建一个三维房屋模型，这是JavaScript期末课程大作业的一部分。three.js是一个强大的JavaScript库，用于在Web浏览器中创建和展示3D图形。以下是文档中涵盖的关键知识点： 1. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

慢步者_rambler

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值