POD 3D 模型渲染引擎

支持能力

• 异步下载 glb/gltf 模型，解析模型数据
• 支持解析 Draco 算法压缩模型（自动选择 wasm/js 模式）
• 模型 mesh 层点击事件监听回调
• 兼容透明 PNG 纹理
• 高亮动画显示 mesh 区域
• 淡入淡出动画显示 mesh 区域
• 相机围绕模型旋转切换位置
• 自动加载环境纹理
• 支持模型 PBR 材质
• 支持模型 AO 贴图
• 根据匹配模型空间大小，自动化设置相机视角远近边界值
• 支持预设的相机视角拍照，生成预览图

安装

# yarn
yarn add pod-3d
# npm
npm i pod-3d

CDN

<script src="https://unpkg.com/pod-3d/"></script>

简单使用

import Pod3D, { EventType } from 'pod-3d';

const renderCanvas = document.getElementById('render-canvas') as HTMLCanvasElement;

// 实例化
const pod3d = new Pod3D({ renderCanvas });

// 下载解析模型
await pod3d.parseModel('模型地址');

// 获取模型 mesh 名称
pod3d.getModelMeshes();

// 获取模型 camera 名称
pod3d.getModelCameras();

// 监听模型事件
pod3d.on(EventType.Click, (data) => {
  // ....
});

// 更新纹理
pod3d.updateTexture('mesh 名称', '纹理图片地址');

// 淡入淡出动画显示 mesh 区域
pod3d.setFadingMesh('mesh 名称');

// 高亮动画显示 mesh 区域
pod3d.setHighlightMesh('mesh 名称');

// 设置相机位置
pod3d.setCameraPosition('camera 名称');

// 根据预设 camera 位置进行拍照
await pod3d.takePicture('camera 名称');

// 开始渲染模型
pod3d.render();

案例

• 鞋子
• 鼠标

请在办公网打开浏览