C3D OBJ Renderer

基于 C++ / WASM / WebGL 的 OBJ 3D 渲染器 npm 包。所有几何计算（OBJ 解析、法线、AABB 包围体、描边边缘检测）均在 C++ 层完成，通过 WASM 暴露给 JavaScript。

功能特性

• 金属哑光灰材质 — 偏白冷灰金属质感 + 哑光表面处理（中性光，不偏黄）
• 选择性描边 — 仅渲染边界边和特征边（锐角 > 30°），非全部线框
• AABB 包围体 — 黄色边框，微微大于模型（2% 内边距）
• 尺寸标注 — 显示长/宽/高（原始值 × 100000）
• 模型透明 — 可调节透明度
• 重置视图 — 恢复默认相机角度
• 坐标轴显示 — RGB 三色 XYZ 轴

安装

npm install c3d-obj-renderer

快速使用

import { createRenderer, CAMERA_PERSPECTIVE, CAMERA_ORTHographic } from 'c3d-obj-renderer';

// Vite 项目需显式传入 wasmUrl，避免开发时 @fs 路径 403
import wasmUrl from 'c3d-obj-renderer/wasm/c3d_obj.wasm?url';

const canvas = document.getElementById('canvas');
const renderer = await createRenderer(canvas, {
  wasmUrl,
  modelColor: [0.99, 0.99, 0.99],
  backgroundColor: [1.0, 1.0, 1.0],
  camera: CAMERA_PERSPECTIVE,  // 或 CAMERA_ORTHographic
  alpha: 1.0,
  showOutline: true,
  showAABB: true,
  showAxes: true,
  showLabels: true
});

const objText = await fetch('/model.obj').then(r => r.text());
renderer.loadOBJ(objText);
renderer.start();

// 控制
renderer.setAlpha(0.5);
renderer.resetView();
renderer.setShowAxes(false);

API

createRenderer(canvas, options?)

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | alpha | number | 1.0 | 模型透明度 | | showOutline | boolean | true | 描边线条 | | showAABB | boolean | true | AABB 包围体 | | showAxes | boolean | true | 坐标轴 | | showLabels | boolean | true | 尺寸标注 | | modelColor | [r,g,b] | [0.99,0.99,0.99] | 模型颜色（偏白哑光金属灰，0~1） | | backgroundColor | [r,g,b] | [1.0,1.0,1.0] | 背景颜色（0~1） | | camera | CameraType | CAMERA_PERSPECTIVE | 投影相机类型 | | outlineColor | [r,g,b] | [0.35,0.37,0.40] | 描边颜色 | | aabbColor | [r,g,b] | [1.0,0.85,0.0] | 包围体颜色 | | wasmUrl | string | — | WASM 文件 URL（Vite 项目推荐用 ?url 导入） |

常量

• CAMERA_PERSPECTIVE — 透视相机
• CAMERA_ORTHographic — 正交相机

ObjRenderer 方法

• loadOBJ(content) — 加载 OBJ 文本
• setModelScale(scale) — 设置模型缩放（无上限）
• getModelScale() — 获取当前模型缩放
• fitToView() — 模型居中并适配视图
• setAlpha(alpha) — 设置透明度
• setCamera(camera) — 切换透视 / 正交相机（使用 CAMERA_PERSPECTIVE / CAMERA_ORTHographic）
• getCamera() — 获取当前相机类型
• setShowOutline(show) — 切换描边
• setShowAABB(show) — 切换包围体
• setShowAxes(show) — 切换坐标轴
• setShowLabels(show) — 切换尺寸标注
• resetView() — 重置视图
• getDimensions() — 获取尺寸（含 xScaled/yScaled/zScaled）
• render() / resize() / start() / stop() / destroy()