用eagle管理你的D5模型素材
eagle的最新beta版支持插件系统了。
刚刚整理模型整理地很烦就想到要是能用eagle管理一下D5的模型素材就好了，摸了一下eagle的插件文档，已经基本搞定了。
其实主要代码就这么几行：
const fs = require('fs');
const imageSize = require('./../js/image-size.js');
const AdmZip = require('adm-zip');
module.exports = async ({ src, dest, item }) => {
return new Promise(async (resolve, reject) => {
try {
// 1. Unzip the .d5a file
let zip = new AdmZip(src);
let zipEntries = zip.getEntries();
// 2. Find the icon.png file
let iconEntry = zipEntries.find(entry => entry.entryName === 'icon.png');
if (!iconEntry) {
return reject(new Error(`icon.png not found in .d5a file.`));
}
// 3. Extract the icon.png file to dest
let iconData = iconEntry.getData();
fs.writeFileSync(dest, iconData);
// 4. Get the size of the icon.png file
let size = await imageSize(dest);
// 5. Check if the result is correct
if (!fs.existsSync(dest) || size.width === 0) {
return reject(new Error(`icon.png file thumbnail generate fail.`));
}
// 6. update the item dimensions
item.height = size?.height || item.height;
item.width = size?.width || item.width;
// 7. return the result
return resolve(item);
}
catch (err) {
return reject(err);
}
});
}
上面那个是从d5a文件中解压出缩略图的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ICNS Viewer</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#viewer {
pointer-events: none;
object-fit: contain;
object-position: center;
width: 100%;
height: 100%;
max-width: 100vw;
max-height: 100vh;
}
</style>
</head>
<body>
<img id="viewer" />
<script>
// 创建一个URLSearchParams对象，用于解析URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
// 从查询参数中获取文件路径
const filePath = urlParams.get('path');
// 从查询参数中获取宽度
const width = urlParams.get('width');
// 从查询参数中获取高度
const height = urlParams.get('height');
// 从查询参数中获取主题
const theme = urlParams.get('theme');
// 从查询参数中获取语言
const lang = urlParams.get('lang');
// 通过ID选择器获取HTML中的viewer元素
const viewer = document.querySelector('#viewer');
// 1. 首先加载缩略图
// 👍 避免加载时间过长，UI无内容
// 将文件路径中的".d5a"替换为"_thumbnail.png"，并设置为viewer的src
viewer.src = filePath.replace(".d5a", "_thumbnail.png");
// 2. 加载文件并替换缩略图
// 使用自执行的异步函数
(async function () {
// 引入AdmZip库，用于处理zip文件
const AdmZip = require('adm-zip');
// 引入fs库，用于文件系统操作
const fs = require('fs');
// 解压.d5a文件
let zip = new AdmZip(filePath);
// 获取zip文件中的所有条目
let zipEntries = zip.getEntries();
// 在zip条目中找到名为'icon.png'的文件
let iconEntry = zipEntries.find(entry => entry.entryName === 'icon.png');
// 如果没有找到'icon.png'，则在控制台输出错误信息并返回
if (!iconEntry) {
console.error(`icon.png not found in .d5a file.`);
return;
}
// 将'icon.png'文件提取到一个buffer中
let buffer = iconEntry.getData();
// 将buffer转换为base64格式
let base64 = `data:image/png;base64,${buffer.toString('base64')}`;
// 将viewer的src设置为base64字符串，即显示'icon.png'图片
viewer.src = base64;
})();
</script>
</body>
</html>
这段是预览用的。
好了基本上就是这样了.
使用效果类似这样，三维的预览没搞懂d5mesh到底是个什么章程就还是拿图片顶顶吧。
代码都放这里了，拿示例项目改的甚至文件名都没改完，懒得搞了leolee9086/d5a (github.com)。
有时间再整整d5m。
本文使用思源笔记 - 隐私优先的个人知识管理系统，支持 Markdown 排版、块级引用和双向链接 (b3log.org)创作完成