【WEB前端】开源智体世界：乔布斯3D纪念馆-22课-烟花插件的制作
使用dtns.network德塔世界（开源的智体世界引擎），策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎（内嵌了three.js编辑器的定制版-支持以第一视角游览3D场馆），可以在浏览器和node.js、deno、electron上运行，它是一个跨平台的软件，支持多个操作系统使用！
下面分为几步介绍，如何基于dtns.plugin实现烟花插件的制作。该《烟花插件》采用开源的js-canvas绘制燃放烟花的特效。通过dtns.plugin（基于vue2.x版本构建《烟花插件》），通过npm build lib编译生成index.js，将index.js和index.json配置文件，压缩生成dpkg的类似各类小程序安装包的插件。
基于js原生开发的dtns.plugin插件，拥有移植方便，使用简单，易于传播的特点。并且上手简单，特别容易开发。是除了poplang智体编程之外，极好的插件开发技术栈。可以轻松地在dtns.network智体世界和dtns.connector客户端中，实现各类轻应用（例如dpkg、xverse、xcard等）开发的利器！
这也是构建dtns.os（智体OS）的利器！
第一步：打开头榜页面，找到“烟花插件-4”
注：第一次点击会下载dpkg插件文件（并提示文件保存路径——游览器）；第二次点击会进入“烟花插件”页面（/firework路径，后面会讲到如何配置这个页面路由路径）
第二步：点击“烟花插件”，查看烟花燃放动画效果
注：由于顶部无【返回】按钮，须通过游览器的回退按钮或手机上的返回触摸键返回头榜页面。
第三步：打开vscode中的dtns.plugin文件夹，了解dpkg插件开发原理
注：如上图所示，在dtns.plugin/pkgs/pages/firework/FireWork.vue中查看到template标签，继续向下滑动，可以看到这个是一个典型的vue文件（如下图所示）
注：可以看到vue模板template的name为FireWork（插件名称，后续引入这个component组件，需要用到，并且在dpkg插件的配置文件index.json中也需要声明）
第四步：查看dtns.plugin/pkgs/index.js文件，了解插件install安装到vue全局组件的机制和配置
注：须将刚才的Firework.vue组件，导入为FireWork变量，并且存放于components数组中，以便install函数安装（在vue中安装为全局组件，以方便导入dtns.connector后能按组件名称（name）进行加载插件。
第五步：查看dtns.plugin插件工程下面的package.json——可看到npm run lib指令将刚才的FireWork.vue插件编译为库文件
注：通过上述的scripts中的指令，可以看到运行npm run lib，即可编译生成index.js库文件（后续改名为index.js插件文件）
在vscode终端中运行npm run lib指令后，生成lib\dtns-plugin.um.min.js库文件（如下图所示）
注：后续步骤，会将这个文件修改为index.js的dpkg插件js文件。
第六步：通过demo.html测试刚编译的js插件lib库文件是否可用
注：打开demo.html，可以看到将./lib/dtns-plugin.um.js库文件导入，并引入了vue.min.js库文件，然后在div-id=”app”的html元素正方，通过fire-work标签引入了名称为FireWork的组件。这是一个典型的vue2.x的web应用。Vue.js开发者应该很快能理解它。
第七步：双击demo.html，查看插件运行结果（如下图所示）
打开刚才的dtns.plugin/demo.html，可以看到如上效果图
第八步：在dtns.plugin/lib路径下，复制dtns-plugin.um.min.js文件
注：亦可复制dtns-plugin.um.js文件（但是文件未经压缩，会导致插件dpkg文件变大）
第九步：将此文件复制至dtns.plugin/dpkg/firework路径下，将dtns-plugin.um.min.js改名为index.js目标库文件名
注：只有index.js才能被dtns.connector真正识别并导入插件成功。
第十步：点击dpkg/index.json，将其内容修改如下图所示
注：这是一个[]的数组，里面包含了一个{}json对象
注2：属性name是插件的名称；path代表了插件加载后打开的路径，workPath是代表在ibchat智体IB中输入指令“firework”（“word”属性的值）后路径的路径。
注３：url属性务必为刚才的vue组件名“FIreWork”——写错将导致该插件无法被识别并导入——并且type属性须为“name”，不能为vue或其它值。
注４：其它的title、desc、author、date按照开发者实际情况填写即可。
第十一步：将index.js和index.json不加文件夹情况下，直接压缩为zip压缩包，并将.zip文件格式修改为.dpkg，成功构建真正的dpkg的轻应用插件（类似各类小程序包）
注：将index.js和index.json直接右键菜单，选择压缩文件为zip。然后将.zip文件后缀修改为.dpkg（注意，有些操作系统会隐藏这个文件格式后缀，将在【文件夹选项-查看文件格式】等方式实现文件后缀的查看和修改为.dpkg。
第十二步：回到dtns.connector德塔世界连接器，点击头榜右上角+号，进入发布头榜页面
点击+号后，进入发布头榜页面（如下图所示）
注：将刚才压缩生成的firework-4.dpkg轻应用包，以文件方式上传。并将头榜内容设置为“烟花插件-4”，并点击右上角“确认”按钮，发布插件成功！
第十三步：回到头榜页面，找到《3D纪念馆-购买烟花》的xverse轻应用，点击右上角...，进入头榜编辑器，然后点击下方的“编辑xverse轻应用源码”进入3D场景编辑器
进入3D场景编辑器（如下图所示）
注：通过滚动球控制玩家视角正对着“乔布斯传”3D摆件正前方。
第十四步：点击3D摆件右侧属性面板的“脚本”-编辑按钮，打开poplang智体编程编辑器
注：我们看到，通过$.g_firework_onload实现了对烟花插件的全局函数的调用——以实现在3D纪念馆中燃放烟花。
注2：通过ib3.file.go obj_file* onflag实现了烟花插件的预加载（不须人工点击，实现自动安装烟花插件——后续的dtns.os智体操作系统，亦可通过该指令实现了插件的自动化部署和全局函数的调用）
第十五步：在dtns.plugin的vscode工程中，我们通过查看FireWork.vue源码，找到了全局函数window.g_firework_onload的出处（如下图所示）
第十六步：点击顶部的“启动（自由视角）”预览3D场馆，点击中间的“乔布斯传”3D摆件，出现燃放烟花动画效果
注：点击屏幕中间，这些烟花特效会关闭（亦是在FireWork.vue中实现了该事件的绑定）
通过上述16步，我们成功完成了“烟花插件”的制作。通过dtns.plugin插件引擎，我们成功的构建了dpkg插件文件，从而直接通过头榜上传和头榜支付购买烟花插件.dpkg文件的方式，为dtns.connector德塔世界连接器融入了烟花插件功能（并实现了3D场馆中调用插件全局函数）。最终实现了3D场馆的摆件点击播放烟花插件动画，完整实现了一个从vue插件构建，上传发布，文件锁售卖插件，在poplang智体编程场景中调用全局函数使用它的完整闭环。
整个dpkg插件的体验非常完整。可以看到，使用dpkg和dtns.plugin插件系统，可轻松构建dtns.connector的轻应用插件生态。插件的开发、部署、上传、体验、销售、购买均非常方便。非常适合构建【插件商店】生态、插件开发者生态、插件开源生态等。
总结而言：dtns.connector德塔世界连接器，拥有了dpkg轻应用生态（融入了vue.js插件开发生态），变得更像是一个基于游览器原生应用的操作系统：可命名为dtns.os操作系统。所有插件和项目均为开源，欢迎体验！
注：dtns.network德塔世界（开源的智体世界引擎）是在github和gitee上开源的项目！
3分钟学习AI生成产品与静物！零基础做出秒过设计，第36课必看
本教程章节较多，喜欢的话，请关注点赞收藏，第一时间推送最新教程！
本教程已创建合集，可到合集查看往期教程。
本教程在今日头条首发，授权平台维权，请勿抄袭搬运！
基础图文教程还有15章，创作不易，特别是视频制作，后期视频专项突破教程50章。
第36章 家居摆件构图
为什么你精心布置的北欧风客厅，总觉得差点意思？
明明买了网红款的浅灰色沙发、原木边几，
摆上了几何造型的陶瓷花瓶和针织地毯，
却怎么看都没有家居博主晒图里的那种高级感？
不是你买的东西不够好，
很可能是摆件构图没掌握诀窍——
北欧风的精髓，就藏在“看似随意，实则讲究”的搭配逻辑里。
想要摆好北欧风客厅的摆件，要抓住三个核心技巧 ，每一个都有门道。
第一个是「留白呼吸」。
北欧风最忌讳“满”，留白不是浪费空间，而是给视觉留喘气的地方。
桌面（比如茶几、边几）的摆件不能超过总面积的40%，
也就是说，至少60%的地方要空着，
这样才能凸显每件摆件的质感。
墙面也是如此，装饰画或挂件的总面积，
不能超过墙面可视面积的30%，
尤其是沙发上方的背景墙，
宁可少挂一幅画，也别挤得满满当当。
第二个是「三角平衡」。
视觉上的稳定感，往往来自隐形的三角形。
可以是“高-中-低”的高度三角，
比如落地灯（高）+ 花瓶（中）+ 烛台（低）；
也可以是“大-中-小”的体量三角，
比如双人沙发旁的大绿植 + 中等尺寸的边几 + 小巧的桌面摆件。
这样的组合会让视线有起伏，不呆板。
摆放时，三个点不要排成一条直线，
稍微错开一点角度，更有灵动感。
第三个是「材质呼应」。
北欧风常用的材质就那么几种：原木、金属（多是黄铜或黑色细线条）、陶瓷、棉麻。
关键是让这些材质“互相打招呼”。
比如茶几用了原木，
那可以在沙发上放一个带木质纽扣的棉麻抱枕，
远处的落地灯底座用黄铜材质，
这样不同位置的材质有呼应，整体感就出来了。
但要注意，同一种材质不要堆在一起，
分散摆放效果更好。
最适合练习这些技巧的场景，就是北欧风客厅的“C位组合”——
沙发、茶几，以及沙发背后的背景墙。
这个区域是进门第一眼看到的地方，
摆件构图做得好，整个客厅的风格就立住了。
我们就以“北欧风沙发区（沙发+茶几+背景墙）摆件构图”为例，看看AI怎么帮我们找到灵感，分步骤来演示。
先看基础提示词的效果。
如果只是简单输入：北欧风客厅，沙发上放抱枕，茶几上放摆件，墙上挂画。
AI生成的画面会有什么问题呢？
可能茶几上摆满了五六个东西：
一个大花瓶、两个小雕塑、一本摊开的书，还有一个果盘，
几乎看不到桌面的原木纹理。
沙发上堆了四个颜色各异的抱枕，
有灰色、米色、浅蓝色，还有一个带花纹的。
背景墙挂了三幅大小不一的画，挤在一起，
下面还放了一个矮柜，上面也摆得满满当当。
整体看起来杂乱，没有北欧风的清爽感。
再看优化后的提示词，要把构图技巧加进去：
北欧风客厅，浅灰色三人沙发，沙发上放两个同色系抱枕（一个浅灰针织，一个米色亚麻，尺寸相同）。
原木茶几上，用一个高20厘米的白色陶瓷花瓶（插3支干尤加利叶）、一个直径15厘米的黄铜圆形托盘（里面放一本翻开的白色封面的书），形成高低三角，茶几留白60%。
沙发背景墙，左侧挂一个直径30厘米的圆形木质挂钟，右侧挂一幅竖版植物插画（30x40厘米），两件物品之间间隔50厘米，墙面留白70%。
地面铺浅灰色短毛地毯，沙发旁放一盆高120厘米的琴叶榕。
参数上，把“场景简洁度”调到80（数值越高越简洁），“风格统一度”调到90。
这样生成的画面会好很多：
茶几上只有两件主要物品，花瓶高、托盘低，形成自然的三角，
原木桌面大部分露出来，质感很清晰。
沙发上的抱枕数量少而精，颜色统一，
不会抢了沙发本身的风头。
背景墙的挂钟和插画左右分布，距离适中，
墙面大片留白，显得空间特别通透。
琴叶榕的高度和沙发、挂钟形成另一个隐形的三角，
整个画面看起来舒服又有层次。
摆北欧风摆件时，这几个坑很容易踩，一定要避开。
第一个坑是“摆件数量超标”。
很多人觉得摆件少了太空，
茶几上放了花瓶、香薰、果盘、相框，
边几上又堆了杂志、小雕塑、绿植……
结果每个地方都堆满，视觉上就会很累。
修正方法：做“三减原则”——
同类物品只留一件（比如香薰和花瓶都属于装饰类，选一个最喜欢的），
颜色冲突的去掉（比如已经有了蓝色抱枕，就别再放红色小摆件），
尺寸太小的舍弃（低于5厘米的小物件，在北欧风里很容易显得琐碎）。
第二个坑是“高度没层次”。
摆件高度都差不多，比如茶几上的花瓶、烛台、托盘都是10-15厘米，
看起来像一条水平线，很平淡。
修正方法：加一件“拔高”的物品，
比如在沙发角落放一个高一点的落地灯（高度150厘米以上），
或者在茶几上换一个25厘米高的细长花瓶，
让高度差拉开到10厘米以上，视觉就有起伏了。
第三个坑是“颜色太跳脱”。
北欧风的主色调是白、灰、原木色，
点缀色最多不超过两种（比如浅蓝、淡粉、薄荷绿），
而且面积不能大。
有人觉得单调，
就加了亮黄色靠垫、橙色地毯，还有红色小摆件，
整个空间就乱了。
修正方法：用“6:3:1配色法”——
60%基础色（白/灰），30%辅助色（原木色），10%点缀色（选一种柔和的亮色，比如浅蓝），
所有摆件都按这个比例来选，就不容易出错。
第四个坑是“对称过头”。
很多人觉得对称就是整齐，
在沙发两侧各放一个一模一样的边几，
上面摆一样的台灯和花瓶，
背景墙挂两幅完全相同的画，左右对齐。
这样确实整齐，但北欧风追求的是“松弛感”，
太过对称会显得呆板。
修正方法：把其中一侧的摆件换个款式，
比如左边边几放台灯，右边就放一盆小型绿植，
保持大小差不多，但形态不同，
既有平衡感，又不死板。
今天的课后练习 很简单，
试着给你家的北欧风客厅茶几做一次“减法构图”。
要求：摆件不超过3件，
用“高-中-低”的三角原则摆放，
保证茶几表面60%以上是留白的。
摆好后，用手机拍张照，
然后用提示词“北欧风茶几，3件摆件按高-中-低三角形摆放，留白60%，原木桌面，搭配陶瓷和金属材质”让AI生成一张图，
对比一下你的摆放和AI的灵感，看看哪里可以再调整。
相关问答
金属工艺品制作流程金属工艺品摆件欣赏
工艺品窗花制作办法;1、起稿:构思确定后,起稿布局,对画面进行具体的描绘,画出黑白效果。修改部分可用。对初学者来说,稿子越细,刻起来越省事。若刻...
