当前位置: 首页 > news >正文

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库&#xff0c;用于封装react组件 零依赖非常小&#xff0c;< 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题 四、实验结果分析与体会 一、实验目的与要求 &#xff08;1&#xff09;通过本次实验&#xff0c;学生应掌握函数的定义与调用的基本语法&#xff0c;能根据需要…...

SVN服务备份

hotcopy备份 window批处理 保存以下内容到svn_buckup.bat&#xff0c;确保内容的路径正确&#xff0c;最后双击bat文件进行备份即可 echo offrem SVN安装路径 set svn"C:\Program Files\VisualSVN Server\bin"rem 仓库根目录 set homeE:\Repositories\WorkSpacere…...

FIDO2入门以及相关概念 Client to Authenticator Protocol

​ 本文根据官方文档的定义以及我疑惑的问题做出的相关整理的问答&#xff0c;可能会有偏差&#xff0c;请以官网为准。 官网文档网址&#xff1a;Client to Authenticator Protocol (CTAP) ​ FIDO是什么 FIDO&#xff08;Fast Identity Online&#xff09;是一组开放标准和…...

Linux系统入门:嵌入式系统的操作系统选型

&#xff08;本文为简单介绍&#xff0c;内容来源网络和AI模型生成&#xff09; Linux是一种开源的操作系统,它建立在Unix操作系统的基础之上,采用了Unix的很多理念和设计思想。与商业操作系统如Windows相比,Linux系统资源占用少,运行高效稳定,且Linux系统免费开源,使用和传播…...

数据结构——时间复杂度

前言&#xff1a; 当谈到数据结构和算法时&#xff0c;时间复杂度是一个至关重要的概念。时间复杂度是衡量算法执行时间随输入规模增长而变化的度量&#xff0c;它指示了算法的效率和性能。在本篇博客中&#xff0c;我们将深入探讨时间复杂度的相关知识&#xff0c;并结合C语言…...

《剑指Offer》笔记题解思路技巧优化 Java版本——新版leetcode_Part_5

《剑指Offer》笔记&题解&思路&技巧&优化_Part_5 &#x1f60d;&#x1f60d;&#x1f60d; 相知&#x1f64c;&#x1f64c;&#x1f64c; 相识&#x1f622;&#x1f622;&#x1f622; 开始刷题&#x1f7e2;1. LCR 158. 库存管理 II——数组中出现次数超过一…...

ubuntu上安装docker

在 Ubuntu 上安装 Docker&#xff0c;可以按照以下步骤进行操作&#xff1a; 更新软件包列表&#xff1a;运行以下命令来更新系统的软件包列表&#xff1a; sudo apt update安装必要的依赖项&#xff1a;运行以下命令来安装 Docker 所需的依赖项&#xff1a; sudo apt install …...

【Docker】Linux主机部署Docker

Docker部署 1.二进制文件部署 到如下地址&#xff0c;下载二进制包。 Docker官网&#xff1a;https://docs.docker.com/engine/install/binaries/ 网易镜像源&#xff1a;https://mirrors.163.com/docker-ce/linux/static/stable/x86_64/ 下载好的二进制包上传到主机&#xf…...

vue前端docx库生成word表格 并合并单元格的例子

Vue.js 是一个流行的前端JavaScript框架&#xff0c;用于构建用户界面和单页应用程序。在Vue中生成Word表格并合并单元格&#xff0c;通常需要使用额外的库&#xff0c;如docx&#xff0c;它是一个用于创建和修改Word文档&#xff08;.docx&#xff09;的JavaScript库。 …...

FastGPT配置文件及OneAPI程序:

FastGPT配置文件及OneAPI程序&#xff1a;百度网盘 请输入提取码 提取码&#xff1a;wuhe 创建fastgpt目录&#xff1a;mkdir fastgpt 切换到fastgpt目录&#xff1a;cd fastgpt 下载docker-compose文件&#xff1a;curl -O https://raw.githubusercontent.com/labring/Fast…...

Positive Semidefinite Matrices 什么是半正定矩阵?(undone)

参考视频&#xff1a;https://www.bilibili.com/video/BV1Vg41197ew/?vd_source7a1a0bc74158c6993c7355c5490fc600 参考资料(半正定矩阵的定义)&#xff1a;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

数据结构笔记&#xff1a;R树-CSDN博客 1 基本介绍 使用Sort-Tile-Recursive (STR) 算法创建的仅查询的R-tree空间索引该树索引每个几何图形的边界框。树在初始化时直接构建&#xff0c;且一旦创建后不能添加或移除节点所有操作返回输入几何图形的索引边界框限于二维并且是轴…...

neo4j常用代码

1】查版本&#xff1a; CALL dbms.components() YIELD name, versions RETURN name, versions; 2】清数据&#xff1a; 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 觉得有帮助的同学&#xff0c;可以点心心支持一下哈 一、Less介绍 less官方文档 lesscss.org/ less中文文档 less.bootcss.com/ less是一种css预处理器&#xff0c;它扩展了css语言&#xff0c…...

PCL 计算点云AABB包围盒的体积

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

论软件测试工程师 重要性!

在生活中&#xff0c;我们常常会遇到以下几种窘迫时刻&#xff1a; 准备骑共享单车出行&#xff0c;却发现扫码开锁半天&#xff0c;车子都没有反应&#xff1b;手机导航打车&#xff0c;却发现地图定位偏差很大&#xff0c;司机总是跑错地方&#xff1b;买个水&#xff0c;却…...

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...