Polygonjs

WebsiteDocs

Node-based 3D web editor inspired by Houdini. Build interactive WebGL scenes on top of Three.js.

PlatformWeb / Node.js

LanguageTypeScript

Shortcuts

General

Action	Shortcut
Open scene tree	Ctrl 0

Prerequisites

Node.jsYarn

Embed on a WordPress site

Open Visual Studio Code and a new terminal by pressing Ctrl Shift `.

Create a new project:

yarn create polygonjs

Give the project a name and pick a framework (e.g. Vanilla & JavaScript), then:

cd project-name && yarn

Start the Polygonjs 3D editor:

yarn polygon

Build your scene(s). When using multiple scenes, set the preferred one to open in src/main.ts. Save main.ts, then reopen and re-save that scene in the editor so the change sticks. You can now close the editor.

Test build:

yarn dev

If that runs without errors, build for production:

yarn build

A dist folder appears in your project. Zip it and upload to your webserver — into the WordPress install root (the folder containing wp-admin, wp-content, wp-includes, index.php). Unzip it there.

Some hosts require you to enable the file manager before you can access the install root.

Verify by visiting https://yourwebsite.com/dist/.

Embed the scene on a WordPress page with an iframe:

<iframe
    src="https://yourwebsite.com/dist/"
    style="width: 100%; height: 100vh; border: none;"
></iframe>

References

Polygonjs docsThree.js — useful links