3D-Tony，一款免费的3D可视化模型制作工具-CSDN博客

本文链接：https://blog.csdn.net/KlausLily/article/details/147405252

hi, 大家好, 我是徐小夕.

上篇文章和大家分享了我实现的3D可视化模型制作工具，介绍了我实现3D可视化的技术栈和功能亮点：

为了让大家更好的体验和研究它，我已经部署到服务器上了，大家可以体验参考。

体验地址：http://tony-3d.turntip.cn

接下来我会用浅显易懂的方式，和大家介绍一下这款3D可视化编辑工具的功能特点以及技术实现，同时我也会在我的“源码专栏”中和大家分享这款工具的详细源码实现，大家感兴趣的也可以参考一下：

功能特点介绍

为了让大家更直观的感受，我录制了一个演示的视频，具体的功能模块如下：

1. 可视化画布区域

画布区域主要用来承载模型和实时预览，类似于我们熟悉的低代码零代码（比如H5-Dooring）平台，区别就在于我做的这个3D-Tony可视化平台画布是3维的：

当然画布的主题，色系大家都是可以自己二开来配置的。

2. 组件物料区域

物料区域主要存放不同的组件元素，目前我内置了近20多种3D元素，可以通过拖拽的方式拖拽进画布，同时如果大家有不同的需求，也可以二次扩展组件。

我之前在公众号也分享了很多可视化零代码的技术实现和架构设计，目前3D-Tony可视化平台也是用的我之前设计的同样的架构，大家可以参考一下：

3. 属性配置面板

属性配置面板可以实时的调整3D模型的样式，位置，大小等信息，不同的组件可以有不同的属性配置，这块也是用我之前设计的属性动态面板实现的。

当然在处理实时数据时需要考虑3D模型的渲染性能，这块很关键，也是目前实现上WEB端3D编辑器的一个难题。不过也有比较成熟的方案，后续我会在公众号趣谈前端中和大家继续探索。

4. 头部功能菜单

头部功能菜单主要提供一些快捷的功能操作，比如导出模型JSON，打开属性面板，预览设计等，这块大家可以根据需求自行扩展。

技术实现

毫无疑问，3D模型可视化设计的首选框架，经过我的试错整理，有如下几个比较靠谱的：

简介
Threejs是一个被广泛使用的基于 WebGL 的 JavaScript 3D 库，它对 WebGL 的复杂细节进行了封装，让开发者能在网页上轻松创建和展示 3D 图形。Three.js 提供了丰富的 API，涵盖几何体创建、材质设置、光照效果、相机控制等功能。
应用场景
应用范围极为广泛，如 3D 网页游戏、虚拟展厅、建筑可视化、科学数据的 3D 呈现等。例如，房地产公司可借助它创建虚拟样板房，让客户在线上进行沉浸式参观；电商平台能用它展示商品的 3D 模型，使用户从不同角度查看商品细节。

简介
Badylon是一款功能强大且易于使用的开源 JavaScript 3D 游戏和图形引擎，提供了丰富的工具和功能，包括物理引擎、动画系统、粒子系统等，支持多种文件格式的 3D 模型导入。
应用场景
特别适合用于开发 3D 游戏、交互式 3D 应用和虚拟实境（VR）/ 增强现实（AR）应用。例如，开发一款基于网页的 3D 射击游戏，或者创建一个交互式的 3D 产品配置器。

简介
Play是一个基于 WebGL 的开源游戏引擎和 3D 内容创作平台，提供了可视化编辑器和强大的 JavaScript API，支持实时协作和版本控制，方便团队开发。
应用场景
适用于开发大型 3D 游戏、3D 广告、交互式 3D 营销内容等。例如，为品牌创建一个交互式的 3D 广告，让用户可以与广告中的 3D 元素进行互动。

简介
AFrame 是一个基于 Three.js 的 WebVR 框架，使用 HTML 语法来创建虚拟现实场景，降低了创建 VR 应用的门槛，让开发者可以像编写 HTML 页面一样轻松创建 3D 和 VR 场景。
应用场景
主要用于创建虚拟现实（VR）和增强现实（AR）体验，如虚拟旅游、VR 教育应用等。例如，创建一个虚拟博物馆，让用户可以在其中进行沉浸式参观。

强烈大家把上面我总结的4款3D可视化设计框架收藏起来，它们是开发3D产品必备框架。

目前我写的3D-Tony可视化搭建工具就是采用 Threejs 实现，每一个功能模块我都采用模块化的设计，下面是我定制的组件元数据结构：