- 综合排序
- 最热优先
- 最新优先
- 来自专栏四火的唠叨
JavaScript 3D 图表
在说 3D 图表以前，首先要明确两个概念，一个是数据的维度，一个是呈现数据载体的维度。对于数据的维度，一维的数据呈现，但是呈现的载体是二维的平面图，比如饼图： 已经能够很清晰地观察到数据的分布情况。 一种，在当前二维图表的基础上，通过颜色、图形、数值的不同等等，来表示第三个维度的数据。 另一种，就是绘制 3D 的图形，把第三个维度展示出来。需要注意的是，绘制 3D 的图形仅仅是技术上的一种呈现形式，并不意味着它的易懂性要好于上面一种方式。实际上，我们还是需要看看具体的问题是什么。 明确了这些概念以后，我再来介绍两则 JavaScript 的 3D 图表，它们都是为了呈现三维的数据，而不仅仅是看起来 3D 而已，大部分 JavaScript 的 3D 图表库都是基于 Canvas WebGL 是一种 3D 的绘图标准，有了它，JavaScript 就可以实现 OpenGL 标准能做的事情了，在 HTML5 Canvas 基础上，WebGL 允许硬件 3D 加速。
1.2K10编辑于 2022-07-15 - 来自专栏生信修炼手册
使用matplotlib绘制3D图表
除了绘制经典的二维图表外，matplotlib还支持绘制三维图表，通过mplot3d工具可以实现，只需要在axes对象中指定projection参数为3d即可，常见的折线图，散点图，柱状图，等高线图等都可以进行三维图表的绘制 numpy as np >>> import matplotlib.pyplot as plt >>> fig = plt.figure() >>> ax = plt.axes(projection='3d 散点图 示例如下 >>> fig = plt.figure() >>> ax = plt.axes(projection='3d') >>> for mark,start, end in (['o', 柱状图 示例如下 >>> fig = plt.figure() >>> ax = plt.axes(projection='3d') >>> yticks = [3, 2, 1] >>> for i in 除了以上基本类型外，matplotlib还支持更多的3D图表类型，具体用法请查看官方文档。 ·end·
1.4K10发布于 2020-09-23 - 来自专栏不仅仅是python
数据可视化-Matplotlib中的3D图表
背景介绍 今天我们演示绘制在极坐标中定义的曲面3D图。并使用matplotlib中内置的color map做展示。 ? 入门实例 先看视频演示效果： 代码块 ''' ================================= 3D表面与极坐标 ================================= 示例由Armin Moser提供. ''' #导入Axes3D注册3D投影 from mpl_toolkits.mplot3d import Axes3D import matplotlib.pyplot as plt import numpy as np #定义子图表，添加3D投影 fig = plt.figure() ax = fig.add_subplot(111, projection='3d'
1.3K40发布于 2019-08-23 - 来自专栏DrugOne
基于3D几何的预训练分子图表示
编译| 沈祥振 审稿| 郭梦月 本文介绍了唐建课题组的Shengchao Liu等人基于3d几何研究的成果：鉴于现实世界场景中 3D 信息的缺乏极大地阻碍了对分子几何图表示的学习，本文提出了一种图预训练框架 学习范式是在预训练期间将 3D 分子几何学知识注入 2D 分子图编码器，这样即使没有可用的 3D 信息，下游任务也可以从隐式 3D 几何学中受益。 具体到药物发现，我们有一个 2D 图和每个分子的一定数量的 3D 构象，我们的目标是学习一个强大的 2D/3D 表示，可以在最大程度上恢复其 3D/2D 对应物。 如图1，它本质上是从采样的 2D 分子图表示 () 中重建 3D 构象异构体 (y)。 上述过程称为变分分子重建，在具体实现上，实际采用了一种类似于 VAE 的轻量级生成 SSL。 4总结 从领域的角度来看，GraphMVP是结合 3D 信息来增强 2D 图表示学习的首次尝试，并且能够通过考虑建模中的随机性来利用 3D 构象。
1.2K50编辑于 2022-04-19 - 来自专栏3d图表
Vue 3 + Three.js 打造轻量级 3D 图表库 —— chart3
最近在数据可视化领域进行了一些探索，基于 Vue 3 和 Three.js 开发了一款轻量级的 3D 图表库 —— chart3。 在线体验：https://chart3js.netlify.app/ 愿景 (Vision)在实际开发中，我们往往面临两难的选择：要么使用传统的 2D 图表库（如 ECharts）通过“伪 3D”来实现效果 通过简单的 JSON 配置即可生成炫酷的 3D 图表。 已支持的功能特性：基础图表组件： 3D 柱状图 (Bar3D)：支持多系列、不同颜色的柱体渲染。 3D 饼图 (Pie3D)：支持扇区挤出高度、标签展示。 待实现的任务 (Roadmap)为了让 chart3 真正成为生产可用的图表库，后续还有很多有趣的工作要做：高级图表开发： 3D 曲面图 (Surface 3D)：用于展示复杂的三维函数或地形数据（目前
97220编辑于 2026-01-12 - 来自专栏HT
基于HTML5 Canvas的3D动态Chart图表
发现现在工业SCADA上或者电信网管方面用图表的特别多，虽然绝大部分人在图表制作方面用的是echarts，他确实好用，但是有些时候我们不能调用别的插件，这个时候就得自己写这些美丽的图表了，然而图表轻易做不成美丽的 看到有一个网站上在卖的图表，感觉挺好看的，就用 HT for Web 3D 做了一个小例子，挺简单的，也挺好看的，哈哈~ Demo 地址： http://www.hightopo.com/demo/WireframeAnim 这个例子用 HT 实现真的很容易，首先创建一个 HT 中最基础的 dm 数据模型，然后将数据模型添加进 g3d 3d 组件中，再设置 3d 中的视角并把 3d 组件添加进 body 元素中： 1 dm (); 5 g3d.getView().style.background = '#000'; 接着就是造这五个chart图表条了，我的思路是这样的，里层有一个节点，外层一个透明的节点，底部一个 3d 的文字显示当前的百分比 最后，要动态的变化 chart 图表中的柱形图，我们得设置动画，并且将 3d 字体也同步更新数值： 1 setInterval(function(){ 2 if(node.a('myHeight
2.2K70发布于 2018-01-03 - </body> <script> var SVG_NS = 'http://www.w3. { tx: +match[1], ty: +match[2], rotate: +match[3], scale来自专栏前端重点笔记
三种图表技术SVG、Canvas、WebGL 3D比较
3.什么是WebGL 3D？ 说白了就是基于Canvas的3D框架 主要用来做 3D 展示、动画、游戏。 因为前两项都是描述2D图形的，而WebGL是描述3d的，所以以下针对SVG和Canvas做比较。 3.有了Canvas为什么还要使用SVG 最重要的一点是SVG不依赖于终端设备的像素，可以随意放大缩小但是不会失真 继续：为什么SVG放大不会失真而Canvas却会变模糊呢？ </form>
4.2K30发布于 2019-09-16
ICLR｜基于3D几何信息的分子图表示学习
分子图表示学习是现代药物和材料发现中的一个基本问题。分子图通常由其2D拓扑结构进行建模，但最近研究发现，3D几何信息在预测分子功能中起着更为重要的作用。 然而，真实场景中3D信息的缺乏严重阻碍了分子图对其几何图表示的学习。 本文的学习范式是，在预先训练期间将3D分子结构的知识注入2D分子图编码器，使下游任务即使没有3D信息可用的情况下也可以受益于模型隐含的3D几何知识。 这两个SSL任务所获得的知识是相辅相成的，因此本文的GraphMVP框架将它们整合在一起，形成了一个更具有鉴别力的2D分子图表示。 在 GraphMVP中，本文更倾向于 VAE 类方法，原因如下：(1)两个分子视图之间的映射是随机的：多个3D构象对应于相同的2D拓扑; (2)下游任务需要一个显式的2D图表示(即特征编码器); (3)
图表3 散点图
3、图表3 散点图1.散点图的实现步骤步骤1 ECharts 最基本的代码结构<! }, { "gender": "female", "height": 147.2, "weight": 49.8 },...此处省略...]1假设这个数据是从服务器获取到的, 数组中的每一个元素都包含3个维度的数据 height, weight] axisData.push(itemArr)}axisData 就是一个二维数组, 数组中的每一个元素还是一个数组, 最内层数组中有两个元素, 一个代表身高, 一个代表体重步骤3 rippleEffectrippleEffect 可以配置涟漪动画的大小var option = { series: [{ type: 'effectScatter', rippleEffect: { scale: 3 { series: [{ type: 'effectScatter', showEffectOn: 'emphasis', rippleEffect: { scale: 3
有趣的3D图表水球：从 ECharts 到 RayChart 的升维打击
有趣的3D图表水球：从 ECharts 到 RayChart 的升维打击在数据可视化大屏中，“水球图”（Liquid Fill Chart）绝对是展示百分比数据（如CPU使用率、完成度、剩余电量）的颜值担当 今天我们来聊聊一个有趣的话题：如何用 RayChart 手搓一个真实的 3D 水球，并对比它与 ECharts 水球的区别。 在我的开源项目 RayChart 中，我实现了一个 Liquid3D 组件。下面来看看它是如何“骗”过你的眼睛的。核心构成一个真实的 3D 水球通常由三部分组成：玻璃外壳：一个透明的球体容器。 如果你在做酷炫的数据大屏，想要那种“看起来很贵”的效果，RayChart 的 3D 水球绝对值得一试。 RayChart 项目正在探索更多这样的 3D 图表组件，希望能把 WebGL 的门槛降下来，让大家都能轻松用上“电影级”的图表。***觉得有趣的话，欢迎点赞收藏！
超赞的3D可视化图表绘制工具大汇总~~
点击上方“DataCharm”，选择“星标”公众号 前几期的给大家推荐了关于3D图表的绘制，好多读者私信私信小编推荐一些R语言相关的3D绘图工具？ 本期推文内容如下： R语言3D图表绘制工具介绍 R语言3D图表包样例 R语言3D图表绘制工具介绍 和Python、MATLAB以及Julia相比，R语言中绘制3D图表的工具较少，且其绘制结果较前几者而言 但也有其独特的优点所在，下面，小编就列举几个R语言中用于绘制3D图表的第三方包，如下所示： R-plot3D包 R语言中绘制3D图表最常见的一个绘图工具，其可绘制3D散点图、3D线图、3D回归平面、3D 网址：R-plot3D[1] R-wzRfun包 R-wzRfun包中panel.3d.contour()函数，用于绘制3D拟合曲线，也是较为常用的一种3D图表类型。 Surface 更多3D图表样例，可参考：R-plotly包更多样例[8] 总结 今天小编给大家汇总了R语言中所有绘制3D图表优秀包，希望小伙伴们可根据自己实际需求选择合理的工具进行图表绘制。
一款很Nice的3D生成工具，包括文生3D、图生3D、3D生3D等众多功能！
它不仅可以整合现有模型，还提供了全功能 Demo UI 体验，让你轻松实现文本到 3D、图像到 3D、3D 到 3D 文字编辑和材质重构等多种操作！ 无需繁琐的训练，MVEdit 就能够快速生成高质量的3D物体，并提供全功能的UI界面，包含了诸如text to 3D、image to 3D、3D to 3D文字编辑和材质重构等功能。 • 多功能 demo UI：提供包括文本到 3D、图像到 3D、3D 到 3D 文字编辑和材质重构等全功能演示界面。 • 快速推理：仅需 2-5 分钟的推理时间，在质量和速度之间达到了出色的平衡。 • 通用性和灵活性：能够处理多种 3D 任务，如不同类型的车辆、篮球运动员、机器人等的图像到 3D 转换和文本引导的 3D 到 3D 编辑。 使用方法 1. 应用场景 • 3D 内容创作：为艺术家和设计师提供更便捷的工具，创造出独特的 3D 作品。 • 游戏开发：快速生成高质量的 3D 资产，提升游戏的视觉效果。
CSS 3D世界，3D 透视照片墙
有了前面2章内容，大家应该对CSS 3D的构建，都有了一定认知了，动手能力强的小伙伴可能已经开始自己做好看的效果了。 今天我们就来滚固一下前面学的知识，下面有一个"3D照片墙"示例来加深一下我们所学的知识。 120px; left: 50%; top: 50%; margin-left: -105px; margin-top: -60px; transform-style: preserve-3d 用了绝对定位position: absolute6个子元素会重叠在一起了 我们先使其整个容易元素在3D空间呈现(transform-style: preserve-3d) 定宽定高元素水平垂直居中 { 所以，我们这里的空间相册，只需要每个元素沿着 Y 轴的 3D 旋转，间隔rotateY(60deg)即可形成一个圆环 动画 .photo { ...
基建软件Cilvil 3D：Autodesk Cilvil 3D 2023软件安装教程 Cilvil 3D下载Cilvil 3D软件
Civil 3D是一款专为基础设施行业打造的建筑信息模型（BIM）软件。 Civil 3D是Autodesk公司开发的专业土木工程设计软件，它基于AutoCAD平台开发，主要适用于公路、桥梁、水利、排水、地形等土木工程设计和建模。 通过使用Civil 3D，工程师可以依据可靠的场地现状模型和设计约束来评估设计方案，提出更具创新性和环保的设计。 ，然后在Civil 3D设计模型中直接利用这些数据。 此外，Civil 3D还使用基于模型的环境，可帮助做出更好的设计决策并提高项目质量。Civil3D安装教程1.鼠标右键解压到“Civil3D 2022 64bit”。
3D视频编码(3d打印技术介绍)
3D-HEVC编码框架 3D-HEVC编码结构是对HEVC的扩展，每个视点纹理及深度图编码主要采用HEVC编码框架，但在其基础上增加了一些新的编码技术，使其更有利于深度图和多视点的编码。 图1 3D-HEVC编码结构 如上图所示，3D-HEVC编解码结构和MVC类似。图中所有输入的视频图像和深度图像是同一时刻，不同拍摄位置的场景，这些图像组成一个存取层。 原理上来说，每个视点的图像，包括视频图像和深度图像，均可以利用HEVC编码框架进行编码，输入的所有比特流复合形成3D比特流。 非独立视点编码技术 3D-HEVC在编码非独立视点时，除了使用独立视点编码所用的所有工具外，还用到了HEVC关于3D扩展的编码技术，使其更有利于多视点的编码。 右图表示为分割好的预测块，其中白色部分表示P1区域，黑色部分表示P2区域。 图6 轮廓分割模式 如上图所示，轮廓分割法的分割线不能像楔形分割法一样能够用一个几何函数表示出来。
Edge 的网页 3D 视图（3D View）
3D 视图 偶然在浏览网页 z-index 属性的时候发现了 3d view 这么一个东西，3d 视图点进去一看，发现了新大陆。 控制台中的 z-index 属性 z-index & dom 因为是从 z-index 打开的 3d 视图，所以点进去默认显示页面 z-index 层级关系图，其次右边还有一个 dom 按钮，点击后会进入 dom 3d 视图 两者都有不同的选项可以调，比如层级背景颜色，重新渲染生成等。
SuperLine3D：从3D点到3D线
导致想要研究的关键点周围的邻域点分布也存在较大不同，难以通过这些3D点的特征描述关联起点云帧。这个问题一直以来都十分棘手。 这个工作独辟蹊径，提出对于这种点云数据，不再通过3D点来构建关联以实现点云配准，而是研究点云数据中的高层次的几何原语。 为了重复提取它们作为特征并在离散的LiDAR帧之间进行关联以进行配准，我们提出了第一个基于学习的LiDAR点云3D线特征分割和描述模型。 3.我们探索了点云特征的尺度不变性，并通过消除Sim(3)变换中的尺度因子，为改善点云上基于学习的任务在尺度扰动下的泛化提供了可行的思路 Fig1：整体网络框架。 我们重复几何自适应3次以在KITTI里程计序列上生成12989个自动标注的 LiDAR帧。 Fig3：自动标注框架。
3D电影的原理_3D电影制作
在搞清楚3D立体原理之前我们先了解什么是“真3D”： 我们肉眼所看到的景像是一种具有层次、深度的立体影像。 一般我们所谓3D游戏或电影，实际上并非真正的3D；因为屏幕先天即是2D，并且拍摄电影也是使用单镜头的摄影机，所以就算用3D技术制作的动画电影，输出到显示屏也是平面的，我们称呼这种3D为「平面3D」。 从上面的文字我们基本上知道了真正3D是怎样形成的，说的简单一些，就是我们的肉眼的左右眼睛看到的物体因为存在位置不同而不同，所以，我们要体验真正3D图像就必须模拟出这个环境，就是要让我们的眼镜左右眼看到的内容不同 2、使用3D立体液晶眼镜。 3D液晶眼镜通常被用在计算机上，可以通过这种眼镜玩真正3D游戏和看3D电影，原理是通过软件将原来的3D游戏分成2组不同角度的影像，通过3D液晶眼镜看到不同的画面，液晶眼镜用一根电线连接到计算机(也有无线产品
动态多尺度图表达3D人体骨架运动，实现精准预测效果超SOTA
现有的基于3D人体骨架的运动预测方法往往不考虑身体不同部位之间的关联关系，或是仅考虑单一尺度的关节点关系。 动态多尺度图建模3D人体骨架 基于3D人体骨架的运动预测目的是基于观测的人体骨架运动序列生成未来的姿态，被广泛应用于众多领域如人机交互、自动驾驶和行人跟踪等。 消融实验 通过改变不同的身体尺度，可以发现： 1）当利用3个尺度时，模型的表达效果最优； 2）当尺度过少时，模型没有足够的抽象能力，无法准确把握动作的整体特征，故表达效果不够强； 3）当尺度过多时，模型引入了过多抽象的特征表达
CSS 3 3D 转换
3D转换时，要赋予改变元素的父元素 perspective 属性 perspective： m px; // 视点和画面的距离，视点的位置默认在父元素的中心 perspective-origin：right 属性将 HTML 元素在三维空间内 1.旋转 rotate rotateX(角度) rotateY(角度) rotateZ(角度) rotate3d (x,y,z,角度) // 2.移动 translate translateX(长度) translateY(长度) translateZ(长度) translate3d(x,y,z,角度) 3 ======================================== transform-style: flat //默认，子元素将不保留其3D位置 preserve-3d; //子元素将保留其 3D位置
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号