【亲测免费】 Polygonjs 开源项目教程

1. 项目介绍

Polygonjs 是一个基于节点的 WebGL 设计工具，旨在帮助用户创建交互式的 3D 体验，而无需编写代码。通过创建和连接节点，用户可以构建 3D 场景，实现非破坏性工作流程，快速尝试不同的想法，而无需担心破坏任何内容。Polygonjs 还支持扩展，用户可以根据需要添加自定义功能。

2. 项目快速启动

2.1 安装

要开始使用 Polygonjs，您可以使用以下命令创建一个新项目：

npm create polygonjs@latest

或者使用 Yarn：

yarn create polygonjs

2.2 启动编辑器

在项目创建完成后，您可以使用以下命令启动编辑器：

npm run polygonjs-editor

或者使用 Yarn：

yarn polygonjs-editor

2.3 添加到现有项目

如果您已经有一个 npm 项目，可以通过以下命令添加 Polygonjs 编辑器：

npm add polygonjs-editor

或者使用 Yarn：

yarn add polygonjs-editor

然后启动编辑器：

npm run polygonjs-editor

或者：

yarn polygonjs-editor

3. 应用案例和最佳实践

3.1 创建 3D 场景

Polygonjs 允许用户通过创建和连接节点来构建 3D 场景。以下是一个简单的示例，展示如何创建一个基本的 3D 场景：

const scene = new PolyScene();
const rootNode = scene.root();

const geo = rootNode.createNode('geo');
const plane = geo.createNode('plane');

// 获取 plane 节点的内容
const container = await plane.compute();
const coreGroup = container.coreContent();
const objects = coreGroup.threejsObjects();

// 使用 Three.js API 操作对象
const object = objects[0];
object.position.set(0, 1, 0);
object.updateMatrix();

3.2 使用插件

Polygonjs 支持多种插件，例如 Mapbox、Occlusion、Mediapipe Facemesh 和 Physics。以下是如何使用 Mapbox 插件的示例：

const mapboxPlugin = scene.plugins.get('mapbox');
mapboxPlugin.add3DObjectToMap(mapboxMap, threejsObject);

4. 典型生态项目

4.1 Three.js

Polygonjs 基于强大的 WebGL 库 Three.js。虽然 Polygonjs 提供了许多节点来处理各种类型的 3D 场景，但在某些情况下，您可能需要更深入地更新场景。此时，您可以直接访问 Three.js 对象。

4.2 Vue.js 和 React

Polygonjs 可以与 Vue.js 和 React 等前端框架集成。以下是如何在 React 项目中使用 Polygonjs 的示例：

import React from 'react';
import { PolyScene } from 'polygonjs';

function App() {
  const scene = new PolyScene();
  const rootNode = scene.root();

  // 创建和操作节点

  return (
    <div>
      <canvas ref={canvasRef} />
    </div>
  );
}

export default App;

通过这些模块，您可以快速上手并深入了解 Polygonjs 的使用和扩展。