ThingJS降低3D开发门槛,展开一个立体的视角

2024-03-30 18:08

本文主要是介绍ThingJS降低3D开发门槛,展开一个立体的视角,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

3D可视化让我们可以由立体的视角去看这个立体的世界,不再只局限于平面,ThingJS让3D开发门槛降低!

在ThingJS开发界面中,进行3D场景可视化的编辑区域,我们把它称之为3D容器,也就是展示3D图片的地方,如下图所示。ThingJS 3D开发工具主要提供 Marker 物体和 WebView 物体以支持 3D 空间界面。
1.png

我们先来看看两者的区别。
Marker:可以将图标、Canvas绘制的图片,展现在3D场景中或绑定在3D物体上。
WebView:可以将页面嵌入到3D场景中,支持iframe元素引用一个新的网页

1. Marker 物体

2.png

Marker 物体可以添加一个图片放置到你希望的位置,也可以将这个图片作为子对象添加到父对象身上,随着父对象一同移动。
例子 1:

  type: "Marker",offset: [0, 2, 0],size: [4, 4],url: "https://thingjs.com/static/images/warning1.png",parent: app.query("car01")[0]
});

参数:
• type : 通知系统创建 Marker 物体;
• offset : 设置自身坐标系下偏移量为[0, 2, 0];
• size : 设置 Marker 物体大小,也可以添单独数字如 4,等同于[4,4],大小是以米计算的;
• url : 图片的 url;
• parent :指定 Marker 的父物体;
运行结果见下图。Marker 默认是受距离远近影响,呈现近大远小的 3D 效果,也会在 3D 空间中实现前后遮挡。
3.jpg

例子 2:

  type: "Marker",offset: [0, 8, 0],size: 2,keepSize: true,url: "https://thingjs.com/static/images/reminder.png",parent: app.query(".Building")[1]
});

参数:
• keepSize: 控制是否受距离远近影响,呈现近大远小的 3D 效果。如果设置 true,表示保持大小,不随距离近大远小,此时 size 的单位是屏幕的像素点;
• offset : 设置自身坐标系下偏移量为[0, 2, 0];
• size : 设置 Marker 物体大小,也可以添单独数字如 4,等同于[4,4],大小是以米计算的;
• url : 图片的 url;
• parent :指定 Marker 的父物体;
运行结果见下图:
4.jpg

我们还可以使用 h5 的 canvas 手动创建动态图。
例子 3:

    if (!canvas) {canvas = document.createElement("canvas");canvas.width = 64;canvas.height = 64;}const ctx = canvas.getContext("2d");ctx.fillStyle = "rgb(32, 32, 256)";ctx.beginPath();ctx.arc(32, 32, 30, 0, Math.PI * 2);ctx.fill();ctx.strokeStyle = "rgb(255, 255, 255)";ctx.lineWidth = 4;ctx.beginPath();ctx.arc(32, 32, 30, 0, Math.PI * 2);ctx.stroke();ctx.fillStyle = "rgb(255, 255, 255)";ctx.font = "32px sans-serif";ctx.textAlign = "center";ctx.textBaseline = "middle";ctx.fillText(text, 32, 32);return canvas;
}app.on('load', function (ev) {var marker = app.create({type: "Marker",offset: [0, 2, 0],size: 3,canvas: createTextCanvas('100'),parent: app.query('car02')[0]}).on('click', function (ev) {var txt = Math.floor(Math.random() * 100);ev.object.canvas = createTextCanvas(txt, ev.object.canvas)})
})

参数:
• canvas: 接收 canvas 作为贴图显示
运行结果见下图,在 Marker 上点击时,会改变标记上的数字:
5.jpg

2. WebView 物体

我们还可以使用 WebView 物体,将其他网站或者页面的内容嵌到 3D 中。
例子 4:

    type: 'WebView',url: 'https://www.thingjs.com',position: [10, 13, -5],width: 1920 * 0.01, // 3D 中实际宽度 单位 米height: 1080 * 0.01, // 3D 中实际高度 单位 米domWidth: 1920, // 页面宽度 单位 pxdomHeight: 1080// 页面高度 单位 px
});

6.jpg

虽然是处在初级阶段,但是3D可视化前景无限!

这篇关于ThingJS降低3D开发门槛,展开一个立体的视角的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/862204

相关文章

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示

JavaScript实战:智能密码生成器开发指南

本文通过JavaScript实战开发智能密码生成器,详解如何运用crypto.getRandomValues实现加密级随机密码生成,包含多字符组合、安全强度可视化、易混淆字符排除等企业级功能。学习密码强度检测算法与信息熵计算原理,获取可直接嵌入项目的完整代码,提升Web应用的安全开发能力 目录

一文教你如何解决Python开发总是import出错的问题

《一文教你如何解决Python开发总是import出错的问题》经常朋友碰到Python开发的过程中import包报错的问题,所以本文将和大家介绍一下可编辑安装(EditableInstall)模式,可... 目录摘要1. 可编辑安装(Editable Install)模式到底在解决什么问题?2. 原理3.

Python+PyQt5开发一个Windows电脑启动项管理神器

《Python+PyQt5开发一个Windows电脑启动项管理神器》:本文主要介绍如何使用PyQt5开发一款颜值与功能并存的Windows启动项管理工具,不仅能查看/删除现有启动项,还能智能添加新... 目录开篇:为什么我们需要启动项管理工具功能全景图核心技术解析1. Windows注册表操作2. 启动文件

使用Python开发Markdown兼容公式格式转换工具

《使用Python开发Markdown兼容公式格式转换工具》在技术写作中我们经常遇到公式格式问题,例如MathML无法显示,LaTeX格式错乱等,所以本文我们将使用Python开发Markdown兼容... 目录一、工具背景二、环境配置(Windows 10/11)1. 创建conda环境2. 获取XSLT

Android开发环境配置避坑指南

《Android开发环境配置避坑指南》本文主要介绍了Android开发环境配置过程中遇到的问题及解决方案,包括VPN注意事项、工具版本统一、Gerrit邮箱配置、Git拉取和提交代码、MergevsR... 目录网络环境:VPN 注意事项工具版本统一:android Studio & JDKGerrit的邮

Python开发文字版随机事件游戏的项目实例

《Python开发文字版随机事件游戏的项目实例》随机事件游戏是一种通过生成不可预测的事件来增强游戏体验的类型,在这篇博文中,我们将使用Python开发一款文字版随机事件游戏,通过这个项目,读者不仅能够... 目录项目概述2.1 游戏概念2.2 游戏特色2.3 目标玩家群体技术选择与环境准备3.1 开发环境3

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》:本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服