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可以快速添加光照、相机控制器等组件，减少开发时间。
后续会持续分享我对3D可视化编辑器的设计方案和技术实现，并提供完整的项目演示供大家体验。
我会在我的专栏中和大家分享这个高价值的项目源码，感兴趣的也可以关注一下：
同时我建了一个AI + 可视化技术交流群，大家感兴趣可以在群里沟通学习：
最后
我们最近研发的 flowmix/docx多模态文档引擎，目前也在持续更新中，欢迎体验参考：
https://flowmix.turntip.cn
每个月我们都会根据用户的需求和规划的迭代计划持续迭代, 大家可以关注flowmix视界 公众号获取最新更新的信息.
往期更新:
Flowmix/Docx 多模态文档编辑器: 让文档不止于文档
MindLink，一款功能强大的AI文档编辑器
flowmix/docx, 支持超大PDF/Docx文件解析的多模态文档编辑器
市面上大多数文档编辑器的【划线评论】功能，是如何实现的？
多模态文档+思维导图：引领内容创作新潮流
