ThingJS有4种方法来完成对象拾取

最新推荐文章于 2022-05-23 01:06:15 发布
最新推荐文章于 2022-05-23 01:06:15 发布
阅读量569 收藏 2
点赞数
分类专栏： ThingJS 3D可视化 物联网 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ThingJS/article/details/108857220
版权
这篇博客介绍了ThingJS中实现3D对象拾取的四种方法，包括通过属性和接口获取、事件监听、区域Pick以及设置回调函数。在物联网应用的3D场景中，这些技术对于实现用户交互和模型选择至关重要。通过示例和代码，博主详细阐述了如何高效地进行3D选取操作。
摘要由CSDN通过智能技术生成

拾取，所谓拾取就是判断一个三维场景中哪个对象被点击。ThingJS有4种方法来完成对象拾取。1.jpg

物联网应用中 3D 场景中的模型会越来越多，这时我们不可避免需要一些交互效果，比如当点击某一个模型的时候做出反馈动作，这需要我们能够通过鼠标的点击位置推导出点击到的模型，这种技术实现称为 3D 拾取。

Picker（选择器/拾取器/选取器）是指提供多个选项集合供用户选择其中一项的控件，在T
hingJS在线开发平台，Picker是thingjs中为拾取制作的一个类，主要是用于拾取物体，同时也有框选拾取的功能。

在3D场景中会建立某些对应真实物品的对象，模型内置了简单动画，通过很多事件设置，比如点击鼠标、键盘输入、层级变化等，让用户监听这些事件，在事件回调中进行相应的业务逻辑处理。

在三维场景模型比较多的时候，我们需要考虑如何高效的实现选取操作。官方支持不同的拾取技术实现：

  1. 通过属性和接口获取鼠标拾取（Pick）的物体
  2. 通过事件获取鼠标拾取的物体
  3. 区域 Pick 物体
  4. pickedResultFunc设置拾取对象回调函数
    2.jpg

官方示例新鲜出炉，可以用代码块修改进入层级选择设置。
回调函数就是一个通过函数指针调用的函数，可通过 pickedResultFunc 设置拾取对象回调

最低0.47元/天 解锁文章
ThingJS_小锘
关注
专栏目录
进入ThingJS 3D场景，有两种简单的查询方法
ThingJS的博客
07-16 1103
在ThingJS中，任何模型都可以拉近或进入，切换不同的场景，进行微观学习，呈现出2D平面完全不同的效果。 ThingJS平台主要用到兄弟属性、类身上分类属性和query查询，通过查询这个物体然后结合ThingJS中的层级切换功能，进入到场景中去。 ThingJS查询物体的两种方法 ThingJS中获取对象有两种方式，这里的对象大到一个场景，小到一个元素，都可以利用双击事件来查询到，一种是通过父子树去找到要控制的对象，另一种则是使用Query方法直接去查询我们要寻找的对象。 1.使用parent，child
仅需三步学会使用低代码ThingJS与森数据DIX数据对接
ThingJS的博客
06-10 822
森数据DIX拥有强大的数据处理能力，内置主流集成插件，分钟级集成IT运维场景和IoT管理场景数据，提升效率。针对非主流系统，支持在线JS脚本编辑，提供灵活、规范的接口，满足低代码个性化需求，轻松实现物联数据一键对接。Q森数据如何与ThingJS数据集成?A: 以HTTP Server数据为例，ThingJS平台通过 DIX 中HTTP Server DIP进行数据交互， 该方式是在DIX HTTP Server DIP中编写JavaScript 脚本或拼接积木代码块实现数据交互。以HTTP Server数据
对象拾取 【转】
xiaocai0807的专栏
12-14 899
<br />这篇文章简单讨论一下拾取，所谓拾取就是判断一个三维场景中哪个对象被点击。要实现拾取可以有许多方法，每一个都有自己优点和缺点。<br /> <br /> 颜色键值<br /> <br />      第一种方法是使用颜色键值。基本上，场景中的每个三维对象都会被分配一个唯一的颜色。当渲染场景时，会执行一个pass输出每个对象的颜色。这将创建一个场景包含了一系列对象本身的形状。接着对应鼠标（或其他东西，如目标矩形）位置的像素被放置到2D空间。像素所包含的颜色将组成场景中的物体，这个颜色告知我们哪个对象
three-解析图片颜色生成使用多实例网格柱状图
stonerao
02-05 465
解析图片颜色生成柱状图 获取图片每像素颜色 读取图片生成一张只有图片的canvas，可以设置的缩放比例设置图片的精细度，然后通过canvas的getImageData(0,0, img.width, img.height)的方法来获取整个图片每个像素点的颜色值，获取的颜色为依次排列的数组(r,g,b,a) / 255； 2048 * 1024 灰度图 通过获取的颜色值来生成柱状图 通过获取的数据来生成Box， 因为都是同样的box， 可以通过使用 多实例网格 InstancedMesh 来优化性能； 缩
Three.js 拾取之GPU Picking的理解和思考
Webglzhang
03-27 4463
今天，分享的是项目中真实会用到的东西，Three.js GPU Picking，这是什么意思呢，不同于Three.js 的Raycaster，它是利用颜色的6位16进制表示，以颜色作为ID，在后台渲染出纹理后，根据鼠标坐标下的纹理颜色，进行ID的查询进行拾取操作，哈哈，如果你不是很了解，应该不明白我在说什么，下面我们一步一步来说明这个所谓的GPU Picking。 在Th...
ThingJS学习笔记
qq_34971162的博客
04-16 6255
1.现在模摸搭上建模这个需要专业人员操作 切记需要操作的物品或者建筑一定要设置属性，要不然无法操作 2，建模完毕后要对模型进行2次开发需要到ThingJS控制台上操作 3.进入thisgjs控制台 1.控制台会自动生成代码 //加载场景代码 var app = new THING.App({ // 场景地址 "url": "/api/scene/08c...
基于WebGL的在线3D建模与互动脚本开发系统 ThingJS
ThingJS的博客
12-17 1080
#三维可视化##3D开发# ThingJS编辑界面布局 3D建模与场景搭建方法 交互控制脚本开发关键点 ThingJS平台基于 Web GL中的3D框架进行3D开发，界面设计采用HTML5，系统脚本采用 JavaScript。完整的平台系统包含七大模块：3D场景搭建、模型操作、模型导入、模型导出、场景渲染、压缩与解压、信息存储与显示。 各模块独立又紧密联系，核心的核心主要是3D建模与场景搭建、交互控制开发，ThingJS本着加速3D项目开发的原则，做了间接的封装，拥有自己的平台特色。 ThingJS编辑界
ThingJS官方示例（八）：3D多边形区域交互开发之5个注册事件
ThingJS的博客
01-11 284
前言 如果要在数字场景中划定一个虚拟范围，可以创建多边形区域（圆形、方形、不规则形状），定义范围接口；而创建区域范围并设置了其位置之后，可以针对范围的内容执行很多种操作，从而实现对数字孪生对象更精细的交互控制, 更多demo可以点击这里注册查看! 创建区域范围 ThingJS使用button属性创建区域范围，无论是圆形、方形或者多边形，都需要定义区域的世界坐标，来构成区域形状的点位置，同时加入区域颜色、边框颜色、透明程度，开启拖拽模式，不到15行代码，就能够轻松生成！ new THING.widget.
基于WebGL的虚拟太阳系漫游技术实现 ThingJS 科幻片
ThingJS的博客
12-31 1484
#三维可视化##3D开发# 虚拟功能需求 2. 太阳系运行需求 3. 3D模型呈现 4. ThingJS技术分析 5. 系统实现步骤 3D可视化技术逐渐应用到现代多媒体的课堂教学中。 虚拟太阳系是一款天文类的3D可视化应用，它借助3D在线浏览，模拟了一个“真实”的太阳系，以太阳为中心，八大行星逆时针围绕太阳公转，还有很多卫星绕转在行星或者小天体周围。ThingJS平台在线提供教学演示链接，在中小学生的地理课堂或网上天文馆作为虚拟课程案例使用。 以下是具体需求分析。 一、功能需求 B/S架构为主，通过浏览器
JS上传图片点击获取颜色代码
07-24
JS上传图片点击获取颜色代码是一款原生js点击按钮上传图片，任意点击图片内容可获取当前颜色。
js上传图片并取色代码
06-11
js上传图片并取色代码是一款本地图片上传取色器插件，点击取色按钮获取图片所包含的颜色代码。
js颜色拾取excolor
06-23
一款应用JQuery的web颜色拾取代码
颜色拾取工具，前端必备
11-26
颜色拾取工具，可以拾取桌面，图片，word 文件，html网站上的各种颜色
js 获取 图片颜色
12-17
通过cancas 获取图片图片的颜色，可以是固定位置的颜色，也可以是所有位置的颜色
Three.js的物体点击选中拾取原理剖析
xyphf的博客
05-23 2407
Hello, 大家好，今天来说一下three.js的物体拾取原理！ 声明：本文介绍的是three.js全屏模式下的原理，如果涉及到three.js渲染在网页的一部分，请自行推导。 第一节 介绍Three.js的坐标系 先来粗浅的介绍一下Three的拾取原理，我们先介绍一下Three.js的坐标系，我们知道Three.js是右手坐标系。 我用最浅显的一句话介绍就是，Z轴指向屏幕前的自己时就是右手坐标系。 第二节 介绍Three.js物体点击选中拾取原理 选中物体的原理就是如果点A在物体内，那.
THREEJS - 点击/拾取
Kreme的博客
12-09 2591
在三维场景中，我们经常会遇到点击拾取事件，例如点击某个模型，模型变色等等，常规的点击事件声明是： container.addEventListener('click', onDocumentMouseDown, false); 但是这种点击事件，当你切换至移动端时，你就会发现点击事件失效了，这时候我们需要定义的点击事件是： container.addEventListener('touchstart', onDocumentMouseDown, false); 所以，我们在写点击拾取的时候，可以综合以上
ThingJS 和three.js对比开发太空漫游技术！3D 可视化
ThingJS的博客
11-04 2858
ThingJS 3D用来增加视觉效果,给人以更加直观,真实的感觉。 ThingJS 3D框架简化了开发工作，面向对象和模块化的特点使得网页代码更加易于管理和维护，并且提供近200个官方示例，直接获取API能力，不需要基于3D概念进行开发，适合3D商业项目快速生成！距离您的业务仅一层之隔，是非开发者也容易理解的一种应用方法。 Three.js是更为底层的3D渲染器，提供各式各样的3D开发概念，例如材质、网格、shader、灯光，逐一进行定制化开发，要求程序员要有清晰的设计思路，尤其是在3D对象类的定义上。
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。
热门推荐
qq_41076441的博客
11-19 1万+
Js获取图片主色调，近似色，互补色，以及根据图片颜色获取主题配色方案详解、插件。 **应用场景：**在很多时候，前端开发过程中需要动态的获取图片的主要的颜色值，并根据主色调去调整主题样式的颜色或者模拟出一套配色方案，如图 根据png图片颜色，动态设置背景颜色或者文字颜色，使其提高对比度提高内容的可读性。 根据图片，模拟出一套主题配色方案。 实现及原理：以canvas的getImageData(...
Vega对象拾取与距离量测实现代码示例
"vega关于对象拾取与距离量测的基本方法与实现" 在计算机图形学和可视化领域，Vega 是一个强大的数据可视化库，它允许用户创建交互式图表和图形。本资源主要探讨了如何在 Vega 中实现对象拾取和距离量测功能，这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值