当前位置: 首页 > 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;却…...

插电式混合动力公交车工况预测与智能能量管理策略【附程序】

✨ 长期致力于插电式混合动力系统、行驶工况构建、工况预测、预测能量管理策略、智能能量管理策略研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;自组…...

如何快速解锁QQ音乐加密音频的完整指南:QMCDecode工具终极解决方案

如何快速解锁QQ音乐加密音频的完整指南&#xff1a;QMCDecode工具终极解决方案 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac&#xff0c;qmc0,qmc3转mp3, mflac,mflac0等转flac)&#xff0c;仅支持macOS&#xff0c;可自动识别到QQ音乐下载目录&…...

UGUI三大Layout Group原理与避坑指南:Vertical、Horizontal、Grid布局本质解析

1. 为什么这三个Layout Group是UGUI里最常被误用、也最容易“看似正常实则埋雷”的组件&#xff1f;在Unity项目组做技术分享时&#xff0c;我常问新人一个问题&#xff1a;“你第一次用Vertical Layout Group&#xff0c;是不是拖进去一个空GameObject&#xff0c;加个组件&am…...

龙芯LS2K PMON启动全解析:从内核到U盘识别的奥秘

【龙芯LS2K PMON终极干货】整机设备启动全景图:从 mainbus 开机到 U 盘识别全流程 一、整篇总纲(最强一句话) 内核启动 → 读 ioconf.c/cfdata 硬件族谱 → 从根总线 mainbus 开始遍历 → 逐级 attach 设备 → 启动 PCI → 扫描到 OTG 控制器 → 加载 dwc2 驱动 → 开启 U…...

F1C100s移植LVGL 8.2避坑指南:从Makefile修改到双缓冲配置

F1C100s移植LVGL 8.2实战手册&#xff1a;从编译优化到显示性能调优 在嵌入式Linux系统开发中&#xff0c;图形用户界面(GUI)的实现往往是最具挑战性的环节之一。对于资源受限的全志F1C100s芯片而言&#xff0c;如何在有限的RAM和CPU性能下实现流畅的图形交互&#xff0c;LVGL(…...

UxPlay应用场景:从家庭娱乐到企业演示的全面解决方案

UxPlay应用场景&#xff1a;从家庭娱乐到企业演示的全面解决方案 【免费下载链接】UxPlay AirPlay Unix mirroring server 项目地址: https://gitcode.com/gh_mirrors/uxp/UxPlay UxPlay是一款功能强大的AirPlay Unix镜像服务器&#xff0c;它让Linux、macOS和Unix系统能…...

终极Emu模型架构解析:深入理解370亿参数的多模态Transformer

终极Emu模型架构解析&#xff1a;深入理解370亿参数的多模态Transformer 【免费下载链接】Emu Emu Series: Generative Multimodal Models from BAAI 项目地址: https://gitcode.com/gh_mirrors/emu/Emu Emu是由BAAI开发的革命性多模态生成模型系列&#xff0c;通过融合…...

static-php-cli跨平台构建实战:Linux、macOS、Windows全攻略

static-php-cli跨平台构建实战&#xff1a;Linux、macOS、Windows全攻略 【免费下载链接】static-php-cli Build standalone portable PHP binaries on Linux, macOS, Windows, with PHP project together, with popular extensions included. 项目地址: https://gitcode.com…...

Malware-Traffic-Analysis.net:真实恶意流量分析实战指南

1. 这不是另一个“抓包教程网站”&#xff0c;而是一套真实攻防现场的流量解剖实验室Malware-Traffic-Analysis.net——这个名字乍看平平无奇&#xff0c;像极了某篇技术博客末尾随手贴出的参考资料链接。但如果你真点进去&#xff0c;翻过首页那几行朴素的英文介绍&#xff0c…...

Godot 4.x RTS游戏开发实战:从MVP内核到千单位性能优化

1. 这不是又一个“Godot入门教程”&#xff0c;而是一份专为RTS开发者准备的实战切片你有没有试过在Godot里拖一个Unit节点&#xff0c;加个move_and_slide()&#xff0c;然后兴冲冲地拉出十个单位——结果它们像被磁铁吸住一样挤成一团&#xff0c;路径重叠、碰撞卡死、指令延…...