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运维等各行业多领域。
相关文章:

19个Web前端交互式3D JavaScript框架和库
JavaScript (JS) 是一种轻量级的解释(或即时编译)编程语言,是世界上最流行的编程语言。JavaScript 是一种基于原型的多范式、单线程的动态语言,支持面向对象、命令式和声明式(例如函数式编程&am…...
PaddleSeg分割框架解读[01] 核心设计解析
文章目录 PaddleSeg分割框架解读[01] 核心设计解析tools/train.pypaddleseg/cvlibs/config.pypaddleseg/cvlibs/builder.pypaddleseg/cvlibs/manager.pyPaddleSeg分割框架解读[01] 核心设计解析 tools/train.py import argparse import random import numpy as np import cv2…...
新鲜出炉:小巧优雅的 css-in-js库StyledFc
StyledFc 一个简单的运行时css-in-js库,用于封装react组件 零依赖非常小,< 3kb.运行时生成css支持css变量支持类似less的嵌套css样式支持props动态css支持typescript 演示 安装 pnpm add styledfc # or npm install styledfc # or yarn add styl…...

Python编程实验四:函数的使用
目录 一、实验目的与要求 二、实验内容 三、主要程序清单和程序运行结果 第1题 第2题 第3题 第4题 第5题 四、实验结果分析与体会 一、实验目的与要求 (1)通过本次实验,学生应掌握函数的定义与调用的基本语法,能根据需要…...
SVN服务备份
hotcopy备份 window批处理 保存以下内容到svn_buckup.bat,确保内容的路径正确,最后双击bat文件进行备份即可 echo offrem SVN安装路径 set svn"C:\Program Files\VisualSVN Server\bin"rem 仓库根目录 set homeE:\Repositories\WorkSpacere…...
FIDO2入门以及相关概念 Client to Authenticator Protocol
本文根据官方文档的定义以及我疑惑的问题做出的相关整理的问答,可能会有偏差,请以官网为准。 官网文档网址:Client to Authenticator Protocol (CTAP) FIDO是什么 FIDO(Fast Identity Online)是一组开放标准和…...

Linux系统入门:嵌入式系统的操作系统选型
(本文为简单介绍,内容来源网络和AI模型生成) Linux是一种开源的操作系统,它建立在Unix操作系统的基础之上,采用了Unix的很多理念和设计思想。与商业操作系统如Windows相比,Linux系统资源占用少,运行高效稳定,且Linux系统免费开源,使用和传播…...
数据结构——时间复杂度
前言: 当谈到数据结构和算法时,时间复杂度是一个至关重要的概念。时间复杂度是衡量算法执行时间随输入规模增长而变化的度量,它指示了算法的效率和性能。在本篇博客中,我们将深入探讨时间复杂度的相关知识,并结合C语言…...

《剑指Offer》笔记题解思路技巧优化 Java版本——新版leetcode_Part_5
《剑指Offer》笔记&题解&思路&技巧&优化_Part_5 😍😍😍 相知🙌🙌🙌 相识😢😢😢 开始刷题🟢1. LCR 158. 库存管理 II——数组中出现次数超过一…...
ubuntu上安装docker
在 Ubuntu 上安装 Docker,可以按照以下步骤进行操作: 更新软件包列表:运行以下命令来更新系统的软件包列表: sudo apt update安装必要的依赖项:运行以下命令来安装 Docker 所需的依赖项: sudo apt install …...

【Docker】Linux主机部署Docker
Docker部署 1.二进制文件部署 到如下地址,下载二进制包。 Docker官网:https://docs.docker.com/engine/install/binaries/ 网易镜像源:https://mirrors.163.com/docker-ce/linux/static/stable/x86_64/ 下载好的二进制包上传到主机…...
vue前端docx库生成word表格 并合并单元格的例子
Vue.js 是一个流行的前端JavaScript框架,用于构建用户界面和单页应用程序。在Vue中生成Word表格并合并单元格,通常需要使用额外的库,如docx,它是一个用于创建和修改Word文档(.docx)的JavaScript库。 …...
FastGPT配置文件及OneAPI程序:
FastGPT配置文件及OneAPI程序:百度网盘 请输入提取码 提取码:wuhe 创建fastgpt目录:mkdir fastgpt 切换到fastgpt目录:cd fastgpt 下载docker-compose文件:curl -O https://raw.githubusercontent.com/labring/Fast…...

Positive Semidefinite Matrices 什么是半正定矩阵?(undone)
参考视频:https://www.bilibili.com/video/BV1Vg41197ew/?vd_source7a1a0bc74158c6993c7355c5490fc600 参考资料(半正定矩阵的定义):https://baike.baidu.com/item/%E5%8D%8A%E6%AD%A3%E5%AE%9A%E7%9F%A9%E9%98%B5/2152711?frge_ala 看看半正定矩阵的…...
shapely 笔记:STR TREE
数据结构笔记:R树-CSDN博客 1 基本介绍 使用Sort-Tile-Recursive (STR) 算法创建的仅查询的R-tree空间索引该树索引每个几何图形的边界框。树在初始化时直接构建,且一旦创建后不能添加或移除节点所有操作返回输入几何图形的索引边界框限于二维并且是轴…...
neo4j常用代码
1】查版本: CALL dbms.components() YIELD name, versions RETURN name, versions; 2】清数据: MATCH ()-[r]->() DELETE r; MATCH (n) DETACH DELETE n; 3】NEO4J 操作入门_neo4j查看历史执行命令-CSDN博客 :play --首页 :help match/keys/com…...

OpenAI划时代大模型——文本生成视频模型Sora作品欣赏(五)
Sora介绍 Sora是一个能以文本描述生成视频的人工智能模型,由美国人工智能研究机构OpenAI开发。 Sora这一名称源于日文“空”(そら sora),即天空之意,以示其无限的创造潜力。其背后的技术是在OpenAI的文本到图像生成模型DALL-E基础上开发而成的。模型的训练数据既包含公开…...

Less预处理器教程
学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes 觉得有帮助的同学,可以点心心支持一下哈 一、Less介绍 less官方文档 lesscss.org/ less中文文档 less.bootcss.com/ less是一种css预处理器,它扩展了css语言,…...

PCL 计算点云AABB包围盒的体积
目录 一、AABB包围盒二、代码实现三、结果展示四、相关链接本文由CSDN点云侠原创,原文链接。爬虫自重,把自己当个人。 一、AABB包围盒 AABB包围盒又称了 轴对齐包围盒,是点云包围盒里最简单的一种,其计算方法也极其简单。获取包围盒之后,根据包围盒的长宽高进行体积计算即…...

论软件测试工程师 重要性!
在生活中,我们常常会遇到以下几种窘迫时刻: 准备骑共享单车出行,却发现扫码开锁半天,车子都没有反应;手机导航打车,却发现地图定位偏差很大,司机总是跑错地方;买个水,却…...

超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

ETLCloud可能遇到的问题有哪些?常见坑位解析
数据集成平台ETLCloud,主要用于支持数据的抽取(Extract)、转换(Transform)和加载(Load)过程。提供了一个简洁直观的界面,以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...