不写代码也能玩 Three.js？这个可视化工具太强了！转载

原文链接：https://mp.weixin.qq.com/s/fqZ-ExjFhHCVdkZf8RDx5Q

最近在翻 GitHub 的项目时，意外发现了一个有点年代感但挺有意思的东西 —— ThreeNodes.js。

这个项目虽然是 2012 年左右写的，但看完之后我第一反应是：

“

“这不就是早期的 Web 版 TouchDesigner 吗？”
“要是我刚接触 Three.js 时有它，应该能少踩不少坑……”

ThreeNodes.js 到底是个啥？

一句话总结：

“

ThreeNodes.js 是一个在浏览器里运行的“节点式 3D 场景编辑器”，它让你不用写一行代码，就能搭建 Three.js 的场景。

它长这样：

• 拖一个立方体出来
• 连上一个材质节点
• 接个光源
• 场景就有了！ 全程可视化操作，像拼积木一样，把复杂的 Three.js 编程流程变成了“拖线连节点”的形式。

它主要帮你解决什么问题？

你是不是也有过这样的经历：

• 看了官方示例，代码一堆不知道怎么改
• 有同事不会写 Three.js，沟通成本很高
• 搭个 demo 得半天，效果还没调好

ThreeNodes.js 就是为了解决这类问题而来的。

它做了这些事：

遇到的问题	ThreeNodes.js 怎么帮你
不会写代码也想做 Three.js 场景	拖拖拽拽就能搭好，还能导出
场景逻辑太绕不好调试	节点连接一目了然
反复调材质、动画太慢	实时预览，所见即所得
想快速做个原型	打开浏览器就能开始，零依赖

总结一下就是 —— 省心、省力、还能看得见逻辑流程。

案例演示

打开它的可视化界面后，你会看到左侧是一排可以拖拽的节点，每个节点其实都对应着一段 Three.js 的功能或代码逻辑。

打开他的example案例，我们看看效果

立方体

粒子

贴图

写在最后

虽然 ThreeNodes.js 看起来像个“过气老项目”，但它的核心理念 —— 用可视化节点系统去降低 3D 编程门槛，依然非常有价值。

现在大家都在追求低代码、可视化、AI 辅助创作，像这样的思路正好是桥梁。如果你正打算做自己的 Three.js 编辑器、搭建交互式创意系统、或者探索图形化开发工具的可能性，强烈建议你看看它的源码，说不定能带来很多启发。

地址

github:：https://github.com/idflood/ThreeNodes.js/tree/master 编辑器：http://idflood.github.io/ThreeNodes.js/index_optimized.html