19个Web前端交互式3D JavaScript框架和库

JavaScript (JS) 是一种轻量级的解释(或即时编译)编程语言,是世界上最流行的编程语言。JavaScript 是一种基于原型的多范式、单线程的动态语言,支持面向对象、命令式和声明式(例如函数式编程)风格。JavaScript 几乎可以做任何事情,更可以在包括物联网在内的多个平台和设备上运行。

在WebGL库和SVG/Canvas元素的支持下,JavaScript变得惊人的强大。几乎可以为网络构建任何东西,包括基于浏览器的游戏和本地应用,许多最新的突破性功能都在3D上运行。

为此,「数维图小编」整理了19个交互式3D Javascript库和框架,用于在Web上创建3D图形,希望你的下一个项目用的上它们:

# - Three.js

Three.js 是一个高级跨浏览器的3D JavaScript库和应用程序编程接口,用于使用WebGL在Web浏览器中创建和显示动画3D计算机图形。是最受欢迎的 3D WebGL 库之一,为无数 3D 体验提供支持。也是最好的 3D 库之一。ThreeJS主要处理画布元素,SVG元素和用于渲染的WebGL库。

# - D3.js

D3.js 是一个免费的开源 JavaScript 库,,用于在 Web 上创建图表、地图等可视化效果。D3.js(也称为 D3,数据驱动文档的缩写)是一个 JavaScript 库,用于在 Web 浏览器中生成动态、交互式数据可视化。它使用可缩放矢量图形 (SVG)、HTML5 和级联样式表 (CSS) 标准。

# - A frame

A Frame 是一种流行的开源 Web 框架,用于在 Web 浏览器中构建虚拟现实体验。这个javascript框架为开发人员提供了开发虚拟现实设计的能力,可以在浏览器上渲染。

# - Babylon.js

Babylon.js 是一个基于 Web 的 3D 图形引擎,支持 WebGL 1.0 / 2.0 / WebGPU、场景图、物理、拾取、碰撞、动画、音频等。它建立在Web图形库之上,用于在Web浏览器中渲染图形。

# - Zdog

Zdog 是用于画布和 SVG 的 3D JavaScript 引擎。使用 Zdog,可以在 Web 上设计和渲染简单的 3D 模型。Zdog 是一个伪3D引擎。它的几何图形存在于 3D 空间中,但呈现为平面形状。这使得 Zdog 与众不同。

# - Cannon.js

Cannon.js 是一个基于Web的物理引擎,旨在增强基于Web的游戏开发。它引入了简单的碰撞检测,各种身体形状、接触、摩擦和Web约束。它还具有强大的API,使你能够构建自己的想法。

# - PlayCanvas

PlayCanvas 是一个游戏引擎,它利用 HTML5 和 WebGL 来创建游戏和其他交互式 3D 组件。

# - LightGl.js

LightGl.js 基于WebGL框架,被认为是在浏览器上渲染3D最快最轻的库。LightGl 提供了对代码库的大量控制。

# - Phoria.js

Phoria.js 旨在使用 HTML5 画布元素渲染基于 Web 的运动效果。它不是基于WebGL的,所以你不必担心。

# - Cesium.js

Cesium.js 使用WebGL进行硬件加速图形,它旨在在Web浏览器上创建3D地球仪和2D地图。

# - Scene.js

Scene.js 是一个基于 JavaScript 时间轴的动画库,用于创建动画网站。它允许创建对象移动和位置的时间顺序。

# - Xeogl

Xeogl 是WebGl上的3D模型可视化,它提供了在xeolabs开发的浏览器上创建3D世界的工具。

# - ClayGL

ClayGL 是一个易于使用的,可配置为高质量的图形,并基于WebGL图形库构建可扩展的Web3D应用程序。

# - DivSugar

DivSugar 是一个基于 CSS 的库,用于渲染 3D 场景图、动画系统和几何类。将3D动画集成到现有网页中非常容易。

# - Tilt.js

Tilt.js 是一个微小的请求AnimationFrame驱动的60 + fps轻量级视差倾斜效果,用于jQuery。

# - Turbulenz_engine

Turbulenz 是一个模块化的3D和2D游戏框架,能够在基于HTML5的浏览器上创建游戏。

# - Voxel

Voxel 是一个用于构建基于Web的游戏的JavaScript工具包。它是项目的集合,使开发更容易。

# - SVG 3D Builder

SVG 3D Builder 使用 SVG 创建 3D 模型,并提供简洁的 API。

# - Voodoo.js

Voodoo.js 是一个 Javascript 框架,用于创建与 3D HTML 无缝集成的 2D WebGL 控件。

# - Tips

Sovit3D 是一个可视化开发平台,基于JavaScript语言的3D图形引擎,为Web可视化提供了丰富的展现形式和视觉效果,帮助软件开发公司、解决方案提供商轻松搭建3D可视化界面。平台聚焦工业数字孪生的生产管控、智慧城市的监控运维等可视化应用领域,产品的模块组态化形式可以满足全要素智慧场景的构建。

Sovit3D 平台采用B/S架构,基于WebGL绘图技术标准,提供基于Web浏览器的3D可视化行业组件,支持HTML5/SVG等最新技术,可方便的在浏览器上进行浏览和调试。为开发人员制作符合用户使用习惯的大屏可视化应用,包括2D图表分析、3D建筑实景、3D工业设备模型等相关内容,轻松拖拽即可实现,控制实时数据及动画展示、历史回放、报警、命令下发等功能。

Sovit3D 零代码可视化在线编辑,全自动化场景文件生成;多种数据源接入,轻松与第三方平台无缝数据对接、可视化设置实时动画效果,简单设置即可引入到第三方系统中 。广泛应用于电力能源、水利、物联网、工业互联网、智慧城市、智慧医疗、智慧农业、IT运维等各行业多领域。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

从零开始手写mmo游戏从框架到爆炸(十六)— 客户端指定回调路由与登录

导航:从零开始手写mmo游戏从框架到爆炸(零)—— 导航-CSDN博客 我们这次来把注册、登录、选择英雄,进入主页-选择地图的功能完善。 在这之前,我们还要解决一个问题,就是服务端往客户端发消息的路由问题…

《基于CEEMDAN-小波包分析的隧道爆破信号去噪方法》论文思路

相比于小波降噪,小波包分析具有更高的频率分辨率,可以进一步消除高频部分存在的噪声余量,提高去噪精度 依据EEMD 分解的取值范围,利用“试错法”得到本次试验中CEEMDAN分解的特征参数为:正负高斯白噪声标准差为0.2&a…

Java Web(六)--XML

介绍 官网:XML 教程 为什么需要: 需求 1 : 两个程序间进行数据通信?需求 2 : 给一台服务器,做一个配置文件,当服务器程序启动时,去读取它应当监听的端口号、还有连接数据库的用户名和密码。spring 中的…

二叉树及其练习题

文章目录 树概念及结构树的概念树的相关概念树的表示形式树的应用 二叉树概念及结构概念两种特殊的二叉树二叉树的性质二叉树的存储二叉树的基本操作二叉树的遍历前中后序遍历递归实现二叉树的基本操作 二叉树相关oj题 树概念及结构 树的概念 树是一种非线性的数据结构&#…

c++:蓝桥杯中的基础算法1(枚举,双指针)

枚举 基础概念&#xff1a; 枚举&#xff08;Enum&#xff09;是一种用户定义的数据类型&#xff0c;用于定义一个有限集合的命名常量。在C中&#xff0c;枚举类型可以通过关键字enum来定义。 下面是一个简单的枚举类型的定义示例&#xff1a; #include <iostream>enum…

【面试题】谈谈MySQL的索引

索引是啥 可以把Mysql的索引看做是一本书的目录&#xff0c;当你需要快速查找某个章节在哪的时候&#xff0c;就可以利用目录&#xff0c;快速的得到某个章节的具体的页码。Mysql的索引就是为了提高查询的速度&#xff0c;但是降低了增删改的操作效率&#xff0c;也提高了空间…

医疗在线问诊小程序:开启数字化医疗新篇章

随着科技的飞速发展&#xff0c;医疗行业正逐步向数字化转型。其中&#xff0c;医疗在线问诊小程序作为一种新型的医疗健康服务模式&#xff0c;为人们提供了更为便捷、高效的医疗咨询服务。本文将探讨医疗在线问诊小程序的发展背景、优势及应用场景&#xff0c;以期为医疗行业…

【HarmonyOS应用开发】三方库(二十)

三方库的基本使用 一、如何获取三方库 目前提供了两种途径获取开源三方库&#xff1a; 通过访问Gitee网站开源社区获取 在Gitee中&#xff0c;搜索OpenHarmony-TPC仓库&#xff0c;在tpc_resource中对三方库进行了资源汇总&#xff0c;可以供开发者参考。 通过OpenHarmony三…

小程序--模板语法

一、插值{{}}语法 1、内容绑定 <view>{{iptValue}}</view> 2、属性绑定 <switch checked"{{true}}" /> Page({data: {iptValue: 123} }) 二、简易双向数据绑定 model:value&#xff1a;支持双向数据绑定 注&#xff1a;仅input和textarea支持&a…

【Algorithms 4】算法(第4版)学习笔记 09 - 3.2 二叉查找树

文章目录 前言参考目录学习笔记1&#xff1a;二叉树与二叉搜索树定义1.1&#xff1a;二叉树定义1.2&#xff1a;二叉搜索树定义1.3&#xff1a;Java定义1.4&#xff1a;BST基本实现1.5&#xff1a;BST demo 演示1.5.1&#xff1a;节点搜索成功命中演示1.5.2&#xff1a;节点搜索…

SpringBoot+WebSocket实现即时通讯(二)

前言 紧接着上文《SpringBootWebSocket实现即时通讯&#xff08;一&#xff09;》 本博客姊妹篇 SpringBootWebSocket实现即时通讯&#xff08;一&#xff09;SpringBootWebSocket实现即时通讯&#xff08;二&#xff09;SpringBootWebSocket实现即时通讯&#xff08;三&…

第3.1章:StarRocks数据导入——Insert into 同步模式

一、概述 在StarRocks中&#xff0c;insert的语法和mysql等数据库的语法类似&#xff0c;并且每次insert into操作都是一次完整的导入事务。 主要的 insertInto 命令包含以下两种&#xff1a; insert into tbl select ...insert into tbl (col1, col2, ...) values (1, 2, ...…

day02_java基础_变量_数据类型等

零、今日内容 1 HelloWorld程序 2 idea使用 3 变量 4 数据类型 5 String 一、复习 班规班纪。。。。。 安装jdk JDK 是开发工具 JRE 是运行代码 JDK包含JRE 配置环境变量 二、HelloWorld程序 前提&#xff1a;JDK已经安装配置完毕&#xff0c;有了这些环境就敲代码 代码…

Vue路由组件练习

Vue 路由组件练习 1. 演示效果 2. 代码分析 2.1. 安装 vue-router 命令&#xff1a;npm i vue-router 应用插件&#xff1a;Vue.use(VueRouter) 2.2. 创建路由文件 在 src 文件夹下&#xff0c;创建router文件夹&#xff0c;并在该文件夹创建index.js文件 2.3. 导入依赖…

普中51单片机学习(定时器和计数器)

定时器和计数器 51单片机有两组定时器/计数器&#xff0c;因为既可以定时&#xff0c;又可以计数&#xff0c;故称之为定时器/计数器。定时器/计数器和单片机的CPU是相互独立的。定时器/计数器工作的过程是自动完成的&#xff0c;不需要CPU的参与。51单片机中的定时器/计数器是…

<网络安全>《43 网络攻防专业课<第九课 - 跨站脚本攻击及防范>》

1 什么是XSS XSS(cross site script)或者说跨站脚本是一种Web应用程序的漏洞&#xff0c;恶意攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web里面的Script代码会被执行&#xff0c;从而达到恶意攻击用户的目的。 2 XSS脚本实例 …

城市智能交通指挥中心系统方案

二、方案设计 1.简介 公路治安卡口子系统实现对交通流信息的及时采集和各类嫌疑车辆的查控与处置&#xff0c;扼制并打击一些显见性违规违法行为。其主要功能包括&#xff1a;车辆图像记录、速度测定、车辆号牌识别、自动报警、数据检索、流量统计、图像存贮、数据传输和远程…

在前后端分离项目中如何设置统一返回格式

目录 一、步骤一 二、步骤二 在前后端分离的项目中&#xff0c;为了方便前后端交互&#xff0c;后端往往需要给前端返回固定的数据格式&#xff0c;但不同的实体类返回格式不同&#xff0c;所以在真实开发中&#xff0c;我们将所有API接口设置返回统一的格式。基本上包括的有…

【vue3】手动实现md在线编辑

1.背景 由于知识库的一些.md格式的文件的文件内容可能会有变动&#xff0c;如果频繁下载修改后&#xff0c;再进行上传&#xff0c;会让用户操作不方便&#xff0c;为此接入md在线编辑功能 2 md在线编辑具体实现 2.1 搭建项目 搭建项目下载和引入bytemd和fflate相关依赖&…

【深度优先搜索】【树】【状态压缩】2791. 树中可以形成回文的路径数

作者推荐 【深度优先搜索】【树】【有向图】【推荐】685. 冗余连接 II 本文涉及知识点 深度优先搜索 树 图论 状态压缩 LeetCode:2791. 树中可以形成回文的路径数 给你一棵 树&#xff08;即&#xff0c;一个连通、无向且无环的图&#xff09;&#xff0c;根 节点为 0 &am…