Free 3D Website Builder — Polygonjs No-Code WebGL Scene Editor

These days you see 3D effects everywhere on good startup landing pages. It’s either some sort of glowy blob, a levitating object or animated particles based on mouse input. But I’ve learned to live with plain websites, since everything that remotely involves WebGL requires you to learn Three.js, shaders and a lot of other stuff that I don’t feel like learning. So I told my agent to add “some 3d” and got a rotating grey cube in return.

Polygonjs does things differently. It’s a node-based WebGL design tool. It’s like Blender’s node editor, but for creating 3D scenes for your website. Connect nodes to build shapes and terrain, apply materials and shaders, animate and use post-processing. Everything within a visual editor, no coding necessary. The web editor is hosted at polygonjs.com, so you can play around and prototype quickly. For your projects you can use the CLI to export your scenes to any web project.

Nodes are grouped by context. Geometry nodes are used to build shapes and terrain, while material nodes are used to build shaders and textures. Animation nodes are used to animate objects, and audio nodes can be used to add sounds to your scene based on events. Post-processing nodes can be used to add bloom, depth of field and ambient occlusion. Under the hood everything is powered by Three.js. That means that all Three.js compatible assets like models, textures and libraries can be used. Once you’ve created your scene, export it and include it in your vanilla JS, React, Vue or any other web project.

1How to add a 3D scene to your site

Head over to polygonjs.com/demo to see the live editor running in your browser. Play around with the examples, see if one fits what you have in mind. Get an idea how to connect the nodes. Once you know what you want to add to your project, describe it to your agent and share the github repo.

npm create polygonjs@latest

The CLI will prompt you to select a template (vanilla JS, Three.js, Vue, React, React Three Fiber). Your agent then gets a project with the Polygonjs editor connected. It’s ready to build the scene you described.