@chestnutlabs/ gcode- model- resanderer (英语)

3个J 列报 源模型的渲染器——绘制 .stl 或者说 .3mf 网状为干净, 录音室的缩略语。 它会回答的 "这是什么物体?",并且是故意的 单独 从 工具路径渲染器, 答案 "这个打印/剪辑是如何运行的?" (设计:DD-018).

同伴依赖 : three (支持范围) ^0.178.0)——与这个包一起安装.

用于文件浏览器缩略图、库卡和“文件内容”预览——图片 a 切片器显示一个部分,而不是工具路径。 检查实际移动情况(层、出行、接缝、, 颜色模式、活进度、使用 @chestnutlabs/gcode-renderer-three 换句话说.

• STL 和 3MF - 裸露的STL是没有申报材料的单一物体;3MF带来自己的物质 多对象结构,每个对象变换,以及每个对象/每个三角的物质颜色, 包括使用 3MF 的文件 生产扩展 (单位:千美元)p:path (外部部分).
• 生产多颜色 – 真正的 Bambu Studio / OrcaSlicer 文件用一个区域涂色 专有 paint_color 平面属性并保留调色板 project_settings.config中,没有 标准3MF材料。 渲染器解码出面绘格式( 清洁室, 见 RR-005号并阅读 filament_colour 调色板本身,所以一个设计师的多彩模型在不切切切的情况下,以真实的颜色来制作.
• 能力诚实颜色 当来源声明颜色时——标准 3MF basematerials,或 paint_color + 有丝调色板——渲染器使用它们和报告 materials: 'known' (单位:千美元)'approximated' 当若干个多色的面被平整的时候。 当它宣布无时——a plain STL, 或没有调色板的油漆格式 —— 它绘制中性默认和报表 materials: 'unavailable'。它永远不会发明源色.
• 固定列报形式 ——在共享渲染"相"上以3/4角度被设定 @chestnutlabs/gcode-renderer-three,在中性工作室轻型钻机下,透明(默认) 或可混入卡片的坚实背景.
• 头没了 —— 说 renderModelStill 镜像工具端 renderStill: 递出字节, 拿回画布加马厩 cacheKey 编辑 materials 相信这一点。 运行在 任意铬级的WebGL2(一种 OffscreenCanvas 或无头的铬.
• 交互式查看器 —— 说 createModelViewer 是静态的活模拟:轨道、缩放和平坦 浏览器中相同的 STL / 3MF( 包括生产多彩) <canvas>,带有相机预设,a 可序列相机状态, 和事件流 准备和错误.
• 三种免费公共类型 —— 说 ModelScene 编号 : ModelObject 编号 : MeshGeometry 是数不清的, 所以包裹的表面不会漏出 three; 渲染器在内部构建出三个 meshes.

import { renderModelStill } from '@chestnutlabs/gcode-model-renderer';

// In a Worker with an OffscreenCanvas, or headless Chromium:
const { canvas, objectCount, materials, cacheKey } = await renderModelStill(
  { kind: '3mf', bytes },                        // or { kind: 'stl', bytes }
  { canvas: new OffscreenCanvas(512, 512), background: 'transparent' }
);
// materials === 'known'  → the render used colors the file declared
// materials === 'unavailable' → the file carried none; a neutral default was used (never faked)
const blob = await canvas.convertToBlob();

已经持有一个更正或更丰富的丝状调色板( 例如重交切出的文件) ? 过 filamentPalette (每以0为基数的位数)改为 renderModelStill 编号 : parse3mf 以覆盖读取的 从 project_settings.config. option —— 渲染器不读取文件自己的调色板.

交互式查看器

对于活地表面,用户可以轨道——用于源模型的"3D中的视频",相对于静态 缩略语.. createModelViewer 在共享相机下驱动同一场景,轨道控制 工具路径渲染器的使用 :

import { createModelViewer } from '@chestnutlabs/gcode-model-renderer';

const viewer = createModelViewer(canvas);           // a real <canvas> in the page
viewer.onEvent((e) => {
  if (e.type === 'ready') {
    // e.info.materials === 'known' | 'approximated' → showing the file's true colors
    // e.info.materials === 'unavailable'            → neutral render; don't claim "true colors"
    console.log(e.info.objectCount, e.info.materials, e.info.bounds);
  }
  if (e.type === 'renderer-unsupported') {
    // No WebGL — fall back to a renderModelStill image or a static thumbnail
  }
});

await viewer.setSource({ kind: '3mf', bytes });     // or { kind: 'stl', bytes }; parse → build → frame
viewer.setView('front');                            // 'iso' | 'top' | 'front' | 'back' | 'left' | 'right' | 'bottom'
// ...on unmount:
viewer.dispose();

拖入轨道,滚动到缩放,右拖至平板. getCameraState() 编号 : setCameraState() 持续和 恢复一个姿势( 相同的序列式) CameraState 作为工具的制造者, resize(w, h) 匹配一个 ResizeObserver,以及 setInteractionQuality('auto') 在轨道运行时进行关于平滑性的详细交易。 新设 源格式通过注册可查看 ModelLoader 用于新的 kind,无改动 取景器的API(设计: DD-021号) (中文(简体) ).

第一个框架和 frame() (a"重置视图"按钮)将模型的边框与画布相接: a 宽而平的部分填满了宽的画布,仍然适合一个狭长的375px面板,以小边为中心. 在用户轨道、缩放或平板之前 resize(w, h) 重用模型,所以侧边栏倒塌 或窗口调整大小 永远不会离开它裁剪。 用户移动相机后, resize 保持他们的 视图,以及 frame() 手拍到观众 过 autoFrameOnResize: false 保留 首先设定跨大小。 这个 camera-changed 仅当用户手势稳定时,事件才会起火.

更喜欢自己造场景? parseStl 编号 : parse3mf 返回一个三自由 ModelScene,两个 仍然,观众接受一个预建 ModelScene 直接说.

框架中性准备控制器

createModelPreviewController 包装 createModelViewer 在控制器中塑造框架适配器 消耗——它是工具路径核心控制器的准备侧模拟. 在原始的观众上面 添加画布..bindCanvas 使用寿命周期( 重组在重载中存活; 最后一个源和任何队列控制) 操作重放在绑定上,一个单一的反应状态快照(getState() 编号 : onStateChange()),以及一个操作 队列, 因此在画布存在前的调用不会丢失 。 它背对 /model 伏特的后裔, React, Svelte, 和 Web 组件包; 直接使用它来构建自己的适配器.

import { createModelPreviewController } from '@chestnutlabs/gcode-model-renderer';

const controller = createModelPreviewController();
const off = controller.onStateChange((s) => {
  // s: ModelPreviewState — loading, ready, rendererSupported, objectCount, materials,
  //    instancedCount, decimationApplied, bounds, plates, hasPlates, cameraState, progress, error
});
controller.bindCanvas(canvas);                       // a real <canvas> in the page
await controller.controls.setSource({ kind: '3mf', bytes });
// ...on teardown:
off();
controller.dispose();

这两类合同是: ModelPreviewControls (单位:千美元)setSource 编号 : setView 编号 : getCameraState 编号 : setCameraState 编号 : setBackground 编号 : setInteractionQuality 编号 : setRenderScope 编号 : frame 编号 : resize 编号 : capture)和 ModelPreviewState 以上快照; materials 在那张快照里也是一样的诚实 平面和查看器报告('known' 编号 : 'approximated' 编号 : 'unavailable'从来没有发明过).

手提式行为套装船 /testing 子路径 : runModelBehavioralSuite(name, api, harness) 运行一个共享的一套断言 针对任何适配器, 所以每个框架的 <ModelViewer> 对照与核心控制器相同的合同进行核查.

import { runModelBehavioralSuite } from '@chestnutlabs/gcode-model-renderer/testing';

见 docs/manual/adapters.md "两个观众:预览和准备" 四个框架包装的跨适应器巡演.

决定主义( stills):相同的输入+相同的环境 QQ相同的输出. 跨GPU/驱动像素身份 未承诺——由返回的缓存 cacheKey。 。 。 .

部分 栗子实验室 G 代码预览 麻省理工学院