使用Javascript D3创建属于你的涂鸦作品

原创 于 2014-06-29 23:16:40 发布 · 3.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #d3 #图形 #数学 #涂鸦

本文介绍如何使用D3库创建个性化、涂鸦风格的数学图形，无需安装Matlab即可在线生成，通过网页界面输入方程式、标题、轴参数等，还能通过jQuery UISlider调整图形的涂鸦效果。

Matplotlib可以用来创建很漂亮精确的数学图形：


但是有时候在进行想法交流的时候，不想那么严谨正式，想使用那种轻松的、涂鸦风格的图形：


MATLAB XKCDify项目可以用来生成上述的涂鸦作品：

https://github.com/slayton/matlab-xkcdify


不过本文将介绍使用Javascript D3库来在线生成你自己的涂鸦作品，这个比安装Matlab要方便得多，

网页界面如下所示，填写你想表达的方程式，涂鸦标题，X/Y轴参数和标签，你还可以通过jQuery UI Slider控制来调整图形涂鸦度。


演示地址如下：创建你自己的涂鸦数学图形


by iefreer

博客
Stone教程：一行代码就可以把3D场景植入到普通网页中
10-22 2810
踏得网的Stone工具可以帮助用户快速构建3D场景，场景可以在Stone工具内编辑、播放、保存和重新加载。如果想把在Stone工具中制作的场景放到现有的网页中，也很简单，只需要2步。Stone提供了一个运行时库tds_rt.js，（tds_rt全称为techbrood stone runtime)链接地址为：https://techbrood.com/stone/tds_rt.js，第一步是把该js库加载到页面中：<script src="https://techbrood.co.
博客
踏得网发布轻量级网页3D编辑器Stone，可用于快速制作沉浸式网页应用
10-09 2412
从表现形态上来看，互联网已经走过了3个大的阶段。第一个阶段是简单文本信息的分享，源于学术之间文档的共享需求，然后普及到普通用户对于新闻获取和知识搜索方面的需求。第二个阶段是富媒体交互，在这个阶段网页的内容不再局限于文本，而是图文并茂、乃至音频视频动画。而在交互上也不只是被动的接收，而有了更多的交互和动效，这使得电商等众多网页应用和网页游戏成为可能。第三个阶段是信息载体的变化，从桌面走向了移动，催生了移动互联网时代。而现在互联网内容将走入第四个关键的阶段，即沉浸式互联网时代。沉浸式互联网和
博客
Three.js 中文文档和在线演示实例
06-16 9万+
Three.js是当下最流行的网页3D渲染JS引擎，其主要是对WebGL编程以面向对象方式进行的封装。踏得网专注于HTML5技术生态链的资源开发，鉴于网络上Three.js方面的资料比较散乱，且良莠不齐，因此我们把Three.js的官方文档、示例和我们的平台上已有资源整合起来，提供在线中文文档以及方便的调试学习环境。
博客
使用Stone 3D快速制作第一人称视角在线小游戏
08-27 261
然后有个场景模型，把怪物（如果模型较大，建议使用remote-mesh来加载）摆放到想放的位置。可以在character组件上编辑玩家和所有怪物的战斗属性，如生命值、攻防等。首先得有个怪物模型，怪物带有idle, attack动作。好了，目前要做的就这么多。
博客
Stone3D教程：免编码制作在线家居生活用品展示应用
07-17 411
类似上面视频所演示的交互式产品展示网页3D应用，包含如下主要功能：1. 家居（glb模型）场景实时渲染，三维浏览2. 选中沙发（或餐桌台面）可以进行多选材质交互定制3. 高亮选中物，并显示其商品规格4. 自动聚焦所选商品5. 点击地毯可以缓动移位切换视角完成以上功能，您不需要写一行代码，只需要使用几个Stone 3D的内置组件即可。和Unity或Unreal不同，Stone 3D是一款轻应用引擎，并不追求极致逼真的渲染效果，而是聚焦在小几十倍的体量里达到接近的渲染效果，以便于被快速访问和分享。
博客
Stone 3D客厅家装实时渲染效果图
06-24 236
几十M的客厅含家装模型。
博客
Stone 3D使用RemoteMesh组件极大的缩小工程文件尺寸
06-13 276
Stone 3D的工程文件tsp默认包含了场景中所有的对象和数据，这样的好处是tsp可以单独离线保存，但坏处是tsp文件通常偏大。解决这个问题的方法是把外部glb模型文件通过RemoteMesh组件来加载。这样保存时，tsp文件只有几十K大小。
博客
使用Stone 3D免编码快速创建带AI数字人的数字空间
06-13 480
你可以选择默认的男性和女性模型，也可以自定义人物模型（glb格式，需包含骨骼和变形数据，可参考模板glb模型：https://techbrood.com/stone/assets/models/male.glb），模型可以放在用户自己的服务器上（注意需要开启跨域访问许可）。"机器人产品简介": "‌当前主流机器人产品主要分为工业、家庭服务和人形机器人三大类，如特斯拉的Optimus、波士顿动力Atlas、‌杭州宇树机器人。运行后，可以点击数字人右上角的对话图标，进行对话或播报。该组件只能添加到空实体上。
博客
Stone 3D新版本发布，添加玩家控制和生物模拟等组件，增强路径编辑功能，优化材质编辑
06-03 668
1. 改写fps-controls组件，简化游戏应用的创建，你只需要一个场景glb，然后给Scene节点添加fps-controls组件，即可完成一个第一人称视角的“游戏”应用，可用键盘AWSD或箭头来控制行走，按shift进入奔跑状态，按space进入跳跃状态。3. 路径规划功能的增强，可以对已有路径再编辑，方法是：鼠标移动到控制点可以拖拉它，鼠标点击路径中的线条，可以添加控制点。7. 给sparkle组件添加范围和密度控制，可模拟水面涟漪，或天空群星闪耀。4. 对老版本路径动画兼容问题的修复。
博客
stone 3d v3.3.0版本发布，含时间线和连接器等新功能
04-25 494
新加了连接器（connects）系统，打开connector模块时，通过ctrl+click来连接场景实体，这使得在stone 3d中构建网络拓扑和仿真数据流变得容易。2.新加了度量（metrics）系统，通过scene对象检测器中的useMetrics属性来启用或禁用，启用时所选物体将显示三维度量数据。1.新加了时间线（timeline）编辑器，可以类似blender一样给对象制作动画。4.标签（Label）和注解（Annotation）组件重构和问题修复。5.添加了新的爆炸（explosion）组件。
博客
three.js中的动画系统设计简介
11-26 312
其中动画数据分为关键帧、动画轨道和动画片段，关键帧可以独立于动画对象属性而存在，这样便于复用，动画轨道对应于对象属性如位置或颜色，动画片段是一系列轨道的组合。动画连接器用来连接动画数据和对象，这样数据就能作用在特定对象属性上，这里有一点是数据类型需要和属性匹配。动画混合器用来管控动画任务，就像音乐混合器一样，如创建、播放、停止、切换动画动作。要设计一个通用的可复用3d对象动画系统，需要把动画任务做一些结构分解。主要是分为动画数据、动画连接器、动画混合器以及动画过渡曲线。在three.js中，
博客
探讨3D沉浸式在线会议系统的研发 - Meta演示的元宇宙虚拟化身多人对话场景，Web端现在也可以实现了 ！
07-06 744
现在随着沉浸式互联网渲染技术的成熟、大模型系统的成熟、3D虚拟人动画技术的成熟，结合传统游戏领域的MMORPG引擎，一个基于web的低成本高并发3D元宇宙会议系统正在快速成为可能。我可以快速创建多个角色，设定好角色剧本，然后让他们在同一个3D数字空间中彼此对话和交互。随着3D和AI技术的快速发展和普及，下一代互联网是越来越有趣了。1. 3D虚拟空间的构建（含光影特效、虚拟现实和增强现实）2. 3D虚拟化身的构建（含动画、表情、语音）想想20年前，web还只能用来分享文档！5. 语言大模型的支持。
博客
轻量级在线服装3D定制引擎Myway简介
06-24 630
用于在线商品定制，比如个性化服装的定制、日常用品（如杯子）、家装（被套）等物品的在线定制。我写的面向web元宇宙轻量级系列引擎中的另外一个，在线3D定制引擎Myway 3D。注：demo非最新版本，如需最新版或定制版可评论区回复。文档和sdk链接如下。
博客
适用于智慧城市、智慧文旅等在线场景的轻量级3D数字人引擎MyAvatar简介
06-24 1384
本人研发的国内首个纯面向web应用和小程序的轻量级3D虚拟人引擎MyAvatar。
博客
vite dev开发模式下支持外部模块引用
10-06 948
vite build通过rollupOptions.external来支持外部模块，可是这对vite dev模式不工作。一个临时解决方法是使用插件vite-plugin-externalize-dependencies。
博客
iOS播放MP3视频流AudioContext解码报错null问题处理
09-22 623
web中的媒体流是html5以后才引入的新的不断发展的技术，中间还经历了layer1，layer2和layer3标准。解码器不应该关心未知数据，解码器应该只是寻找，直到它找到它理解的和可以解码的标识。iOS设备的AudioContext对于Mpeg1,2,3数据流的编解码容错性支持不好，需要frame数据都是完整的（从头部边界开始）。mp3或mp2的每个音频帧（每大约200字节）的所有起始标头为0XFFE，而acc音频为0XFFF，因此可以使用0XFFE来做为同步标识。
博客
http请求header中设置的数据未能发送成功
07-14 613
通过在cookie中设置user token来实现用户请求鉴权是常见的方式，但cookie设置会遇到跨域的问题，这个时候可以在header中加user token来传递数据，而服务端返回的user token放在localstorage中。但在header中添加自定义数据时，需注意规避使用下划线，因为nginx服务器默认是把下划线禁用的，也就是header中带下划线的字段会被自动过滤，导致请求丢失了该字段。比如，如果token的名字是user_token，或者user_id，都会出现丢失问题。
博客
THREE .DRACOLoader: Unexpected geometrytype 错误解决
06-08 849
是因为three.js升级到152版本以上，需要相应升级draco库到1.5.6+。加载glb（压缩过的）文件时，遇到这个问题。
博客
git删除本地分支和远程分支
06-17 604
git删除本地分支和远程分支
博客
Stone教程：如何在普通网页中处理Stone 3D场景中实体交互事件
04-17 1346
如果是通过stone 3d运行时库集成到普通网页中，有可能会需要处理场景中物体的交互事件来实现一些自定义的行为，最常见的是点击、悬停等事件交互。这可以通过在stone 3d容器中侦听如下事件来实现：tds_ev_entity_pointerdown （点击） tds_ev_entity_pointerover （悬停）举例如下，假设stone_div是3d场景容器的id：var cont = document.getElementById('stone_div')cont.a...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值