Polygonjs

Polygonjs是一个基于节点的3D WebGL设计工具。

--- 主页 --- 文档 --- 试用演示 ---

Polygonjs可帮助创建Web上的3D交互体验，无需编码。

通过创建和连接节点来构建3D场景。这提供了一个非破坏性的工作流程，让您可以快速尝试不同的想法，而不用担心破坏任何东西。

Polygonjs还设计为可扩展的。这意味着如果它没有您需要的功能，您可以通过使用其API或阅读此存储库中现有节点的实现方式来添加它，并将其作为起点。

编辑器可以从网络或本地使用。网络版本方便探索编辑器，但对于生产环境，推荐使用本地版本，因为它具有以下优势：

快速访问计算机上的模型和纹理
树摇优化导出：仅导出您使用的节点
Git集成：每个文件都以文本形式保存，可以是json或javascript
版本跟踪：它是一个npm模块，其版本在package.json中，就像其他依赖项一样
集成到任何Web项目中（如threejs、vuejs、react、vanilla）

Polygonjs基于节点的编辑器内部

开始一个项目：

启动项目最简单的方法是使用CLI工具：

npm create polygonjs@latest

或

yarn create polygonjs

然后您可以选择vanilla js、threejs、vuejs、react或react-three-fiber的模板之一。

添加到现有项目：

如果您已经有一个npm项目，可以轻松地添加它：

npm add polygonjs-editor

或

yarn add polygonjs-editor

然后您可以使用以下命令启动编辑器：

npm run polygonjs-editor

或

yarn polygonjs-editor

基于节点

节点按上下文分组，每个上下文用于特定类型的任务：

ANIM节点创建动画。
AUDIO节点生成和修改音频。
COP节点导入和更新纹理。
EVENT节点触发或响应场景事件。
GL节点创建GLSL着色器。
JS节点为场景对象添加状态和事件。
MAT节点创建材质。
OBJ节点向场景添加对象。
POST节点设置后期处理。
ROP节点设置渲染器。
SOP节点处理程序化建模。

插件

Polygonjs设计为可扩展的。您可以创建自己的插件来添加自定义节点。目前有4个官方插件：

Mapbox将3D对象添加到Mapbox地图中。
Occlusion计算几何体上的遮挡，获得更pleasant的光照效果。
Mediapipe Facemesh从网络摄像头追踪人脸。
Physics创建和模拟刚体。

基于Threejs

Polygonjs基于强大的WebGL库Threejs。虽然Polygonjs为许多不同类型的3D场景提供了许多节点，但有时您可能想深入研究并以特定方式更新场景。

为此，您可以直接访问threejs对象。有两种方法可以做到这一点：

从场景

const scene = new PolyScene(); // 这是polygonjs场景
const threejsScene = scene.threejsScene(); // 它包含threejs场景

从任何节点

const scene = new PolyScene();
const rootNode = scene.root();
const geo = rootNode.createNode('geo');
const plane = geo.createNode('plane');

// 现在让我们获取平面节点的内容
const container = await plane.compute();
// container是包含coreGroup的封装
const coreGroup = container.coreContent();
// 现在我们可以获取THREE.Object3D的数组：
const objects = coreGroup.threejsObjects();
// 我们可以使用threejs API：
const object = objects[0];
object.position.set(0, 1, 0);
object.updateMatrix();