hi, 大家好, 我是徐小夕。 之前在研发多模态文档编辑器 flowmix/docx 的过程中，写了一款3D可视化图表编辑器，我们可以使用它轻松通过拖拽的方式创作3D模型设计。
目前这个3D编辑器方向是家具设计方向，我们可以使用它快速搭建3D家具场景布局，并一键导出数据。断断续续开发了2个月，今天和大家分享一下。
demo演示
技术实现
在调研3D可视化编辑器的技术实现上，我借鉴了我们之前研发可视化零代码平台H5-Dooring 的研发架构经验，并采用 three.js 实现3D模型渲染。接下来分享一下核心技术栈。
1.@react - three/fiber
- 介绍
@react - three/fiber是一个基于 React 的渲染器，用于在 React 应用中创建 3D 场景。它将 Three.js 的功能封装成 React 组件，让开发者可以使用熟悉的 React 语法来构建复杂的 3D 场景，例如创建几何体、设置材质、添加光照等。 - 应用场景适用于需要在 React 项目中集成 3D 效果的场景，如 3D 产品展示、3D 游戏开发、3D 数据可视化等。例如，电商平台可以使用它来展示商品的 3D 模型，让用户从不同角度查看商品细节。
2.three
- 介绍
three即 Three.js，是一个基于 WebGL 的 JavaScript 3D 库，它简化了在网页上创建和显示 3D 图形的过程。Three.js 提供了丰富的 3D 功能，包括几何体创建、材质设置、光照效果、相机控制等。 - 应用场景广泛应用于 Web 端的 3D 开发，如 3D 网页游戏、虚拟展厅、建筑可视化、科学数据的 3D 呈现等。例如，房地产公司可以使用 Three.js 来创建虚拟样板房，让客户在线上进行沉浸式的参观。
3.expo
- 介绍Expo 是一个用于构建原生 React Native 应用的平台，它提供了一系列工具和服务，帮助开发者更轻松地创建、发布和管理 React Native 应用。Expo 封装了许多原生功能，使得开发者无需编写大量的原生代码即可实现相机、地图、推送通知等功能。
- 应用场景适合快速开发跨平台的移动应用，尤其适用于初学者和小型团队。例如，开发一个简单的社交媒体应用、旅游指南应用等，使用 Expo 可以大大缩短开发周期。
4.expo - asset
- 介绍
expo - asset是 Expo 生态系统中的一个库，用于管理应用中的静态资源，如图片、音频、视频等。它提供了加载和缓存资源的功能，确保资源在应用中能够正确加载和使用。 - 应用场景 在任何需要使用静态资源的 Expo 应用中都会用到，例如在图片展示应用、音乐播放应用、视频播放应用中，使用
expo - asset来管理和加载相应的资源。
5.expo - file - system
- 介绍
expo - file - system允许开发者在 Expo 应用中进行文件系统操作，如读取、写入、删除文件和目录等。它提供了跨平台的文件系统 API，方便开发者处理本地文件。 - 应用场景适用于需要进行文件存储和管理的应用，如文件管理器应用、笔记应用（需要保存笔记到本地文件）、图片编辑应用（需要保存编辑后的图片到本地）等。
6.expo - gl
- 介绍
expo - gl是 Expo 提供的用于在 React Native 应用中使用 OpenGL ES 的库。它允许开发者在应用中创建和管理 OpenGL 上下文，实现高性能的图形渲染，如 2D 和 3D 图形绘制。 - 应用场景 常用于开发需要高性能图形渲染的应用，如游戏、图形设计工具、3D 建模应用等。例如，开发一个简单的 2D 游戏，使用
expo - gl可以实现流畅的图形渲染效果。
7.@react - three/drei
- 介绍
@react - three/drei是一个基于@react - three/fiber的辅助库，它提供了许多预构建的 3D 组件和工具，用于简化 3D 场景的创建过程。这些组件包括光源、控制器、几何体、材质等，可以帮助开发者更快速地搭建复杂的 3D 场景。 - 应用场景 与
@react - three/fiber结合使用，在需要快速搭建 3D 场景的 React 项目中非常有用，如 3D 动画展示、3D 广告等。例如，在一个 3D 动画展示页面中，使用@react - three/drei可以快速添加光照、相机控制器等组件，减少开发时间。
1. 可视化画布区域
画布区域主要用来承载模型和实时预览，类似于我们熟悉的低代码零代码（比如H5-Dooring）平台，区别就在于我做的这个3D-Tony可视化平台画布是3维的：
当然画布的主题，色系大家都是可以自己二开来配置的。
2. 组件物料区域
物料区域主要存放不同的组件元素，目前我内置了近20多种3D元素，可以通过拖拽的方式拖拽进画布，同时如果大家有不同的需求，也可以二次扩展组件。我之前在公众号也分享了很多可视化零代码的技术实现和架构设计，目前3D-Tony可视化平台也是用的我之前设计的同样的架构，大家可以参考一下：
3. 属性配置面板
属性配置面板可以实时的调整3D模型的样式，位置，大小等信息，不同的组件可以有不同的属性配置，这块也是用我之前设计的属性动态面板实现的。当然在处理实时数据时需要考虑3D模型的渲染性能，这块很关键，也是目前实现上WEB端3D编辑器的一个难题。不过也有比较成熟的方案，后续我会在公众号趣谈前端中和大家继续探索。
4. 头部功能菜单
头部功能菜单主要提供一些快捷的功能操作，比如导出模型JSON，打开属性面板，预览设计等，这块大家可以根据需求自行扩展。
演示地址： tony-3d.turntip.cn
后续会持续分享我对3D可视化编辑器的设计方案和技术实现，大家有好的想法和实践也可以在评论区交流。
最后
我们最近研发的 flowmix/docx 多模态文档引擎，目前也在持续更新中，欢迎体验参考：
