【学习工作赛道】 + 分子漫游（Molecular Wander）让化学分子可视化的初赛作品

TRAE AI 创造力大赛 【大赛初赛专区】
,
1

【标签】 学习工作，社会公益，有机化学分子，球棍图，3D渲染

【标题】 【学习工作赛道】+ 分子漫游（Molecular Wander）

【正文】

  • 你是谁： 我是一名产品经理，也是一位暖心老爸

  • 你是怎么用 TRAE 把 Demo 做出来的： 我是从不直接参与代码开发的产品经理，偶然机会接触到Trae Work，感觉它有很强的代码开发能力，正值家里小同学在学有机化学，亟需一款可以直观查看、分析复杂分子结构的工具，没找到很好的免费软件，萌生了试一试的想法，经过一段时间尝试摸索，效果不错，也更有力量和信心了（感觉有点飘……），这款小工具可以继续打磨打磨。

1. Demo 简介

  • 是什么：一款基于Web的3D分子球棍图编辑器，支持有机分子的展示和结构分析。

  • 面向谁： 面向全国师生免费开放，助力化学教育普惠，科研工作者、化学爱好者以及其他想学习了解分子空间结构的同学都可以用。

  • 主要功能：
    :test_tube: 分子解析与渲染：输入分子名称或SMILES表达式，即可即时渲染3D分子结构。

    image
    image2864×1524 215 KB

    :artist_palette: 可视化编辑：支持所有原子、单/双/三键、官能团的插入，及遵循刚性约束规则的拖拽拼接。

    image
    image2866×1522 189 KB

    :microscope: 智能分析：自动识别杂化轨道类型（sp³/sp²/sp）、检测共线/共面原子组，支持手动调整。

    image
    image2874×1610 294 KB

2. Demo 创作思路

  • 灵感来源：所有的物质都是由分子组成，而分子是由人肉眼无法观测的原子组成，原子或独立、或成团，分子或有机、或无机，孤独的游荡在宇宙空间。突然觉得每个存在的分子、原子都应该得到足够的理解和尊重，灵机一动：设定一个固定的宇宙坐标，以可变化的观察者视角，面向姿态可变化的观察对象（分子），清晰的观测其原子构成，从而让观测者形成以不同视角、姿态分子的直观体验。

  • 想解决的问题：初学有机化学的同学，难以直观理解各种复杂有机分子构成；有机化学的教师，缺少免费的可自由编辑、呈现化学分子的工具来讲解抽象结构；通过3D可视化工具，有助于更高效的进行复杂化学分子的构建、分析和理解。

  • 为什么做这个方向：一方面是个人对于原子、分子结构及构建规则的好奇，另一方面也可以让对化学感兴趣的人都能免费了解和体验奇妙的微观世界。

3. Demo 体验地址
在线访问：https://luhongbing.github.io/BSofMolecule/
4. TRAE 实践过程

  • 开发关键步骤

    Step 1：项目初始化与技术选型

    • 使用TRAE Work创建React + TypeScript项目

    • 选择Three.js作为3D渲染引擎，TailwindCSS作为样式框架

    • 配置Vite构建工具，确保开发环境快速启动

    Step 2：SMILES解析器实现

    • 实现完整的SMILES语法解析器，支持分支、环闭合、芳香体系

    • 处理原子符号、电荷、显式氢等复杂情况

    • 加入空间冲突检测与自动矫正算法，确保分子结构合理

    Step 3：3D场景构建

    • 创建Three.js场景，实现原子球和化学键的渲染

    • 添加光照、阴影效果，提升视觉体验

    • 实现鼠标交互：旋转、缩放、平移视角

    Step 4：分析功能开发

    • 实现杂化轨道自动识别算法

    • 开发共线/共面检测与调整功能

    • 构建分析面板，展示分子属性和结构分析结果

    关键任务Session ID

    • Session ID 1：3264882983834680:0c55aedd1734f33aa571627ec75fb66a_6a04730cb272cc9b49f39d69.6a342a00aee0b54918370c78.6a342a00aee0b54918370c76:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 01:25:20)

      image
      image1552×1188 127 KB

    • Session ID 2：3264882983834680:020abfc7f33411ac8015da93c04ca902_6a04730cb272cc9b49f39d69.6a34c3f3aee0b54918370ebb.6a34c3f3aee0b54918370eb9:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 12:22:11)

      image
      image1530×1008 127 KB

    • Session ID 3：3264882983834680:8f762954b5747155538c733bea5f34ea_6a04730cb272cc9b49f39d69.6a350c2aaee0b549183715b1.6a350c2aaee0b549183715af:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/19 17:30:18)

      image
      image1536×1138 112 KB

    • Session ID 4：
      3264882983834680:ab033606161813e6cc4293bf7c36c881_6a04730cb272cc9b49f39d69.6a37d012aa71d70c41509ac4.6a37d012aa71d70c41509ac2:TRAE Work CN.0.1.21.no_sid.no_ppe.T(2026/6/21 19:50:42)

      image
      image1532×1062 132 KB

5. 对应的报名审核通过的帖子链接

2 个赞
2

在线体验地址： https://luhongbing.github.io/BSofMolecule/

下载的附件内容说明：

1、Demo访问说明.docx -说明如何启动并查看demo

2、分子漫游-操作说明.docx -说明如何正确的操作Demo

3、dist目录：下面包含网页（index.html) 及附属脚本（assets目录，包含js，css文件）

2 个赞
3

最近优化时，出现过几次大模型版本改动失控的情况，幸好做了版本管理，但也浪费了一些精力，这里补充一点关于TraeWork Code模式的使用技巧：
1、对于复杂的开发任务，最好让Trae先做好实施的规划方案，并对方案做一下验证，可以分步骤串行/并行实施。
2、大的改动前，一定要有版本管理，也可以提醒Trae做好回滚的准备，避免大模型出现异常导致的代码丢失或返工。
3、大模型对于物理世界空间关系的理解缺乏，对于涉及位置关系、方位方向等的任务，要先跟大模型定好规范，然后从始至终严格遵循，不然一旦陷入错乱，修正成本非常高。
4、不同的大模型对于同一个任务的处理方式可能会有比较大的差异，建议整体规划和难点问题的解决用好一点的模型，小的问题修改用简单点的模型。

2 个赞
4

有点意思，Mark下。

2 个赞
6

最近启用了iOS端分支的尝试，Trae Work Code可以给出详细的转换开发及与Xcode结合发布到手机端APP的步骤。

2 个赞
7

补充几个相对复杂的分子式（smiles格式）解析生成3D解析图的用例：
c1ccc2c(c1)oc3ccccc3n2

COC1=C(OC(F)F)C=C(C=C1)B2OC(C)(C)C(C)(C)O2

B1(OC(C(O1)(C)C)(C)C)C2=CC(=C(C=C2)OC)OC(F)F

C(C)OC(=O)C1(CCCCC1)NC(=O)OC(C)(C)C

C1CC(C2=CC=CC=C2OC1)O

2 个赞
8

:+1: 可以可以，这么复杂的结构都能解析。

3 个赞
9

感谢支持。还有更复杂的有机分子，目前这版支持的还不全。

3 个赞
10

升级了一下，增加对于桥环、螺环分子的支持，在线体验：https://luhongbing.github.io/BSofMolecule/
一、饱和桥环烷烃（基础母体）
降冰片烷 C1C2CCC1CC2
二、桥环烯烃 / 二烯烃（不饱和碳桥环，含 C=C 双键）
降冰片烯 C1=CC2CCC1CC2
二环 [2.2.2] 辛 - 2 - 烯 C1=CC2CCC1CC2

三、含氧桥环（杂桥环，氧原子参与成桥 / 环，天然产物、香料高频）
7 - 氧杂二环 [2.2.1] 庚 - 2 - 烯 C1=CC2CCOC1C2
1,4 - 二氧杂二环 [2.2.2] 辛烷 C1COC2CCOC1C2
桉叶素（1,8 - 桉叶油素） CC1(C)CCC2(CC1)OCC2

四、含氮桥环（氮杂桥环，药物、生物碱核心骨架）
7 - 氮杂二环 [2.2.1] 庚烷 C1C2CCNC1CC2
奎宁环 C1CN2CCC1CC2

五、多环桥环（三环及以上笼状桥环，由双环桥环拼接衍生）
金刚烷 C1C2CC3CC1CC(C2)C3
金刚烷酮 O=C1C2CC3CC1CC(C2)C3

六、基础螺环
螺[3.3]庚烷 C1CCC12CCC2
2-氧杂螺[4.5]癸烷 C1CCOC12CCCCC2
Solasodine（茄解定） CC1CCC2(C(C3C(O2)CC4C3(CCC5C4CC=C6C5CCC(C6)(C)C)O)C)NC1

七、碳螺旋烯（全苯环邻位稠合）
[6] 螺旋烯（六螺烯） C1=CC=C2C(=C1)C=CC3=C2C4=C(C=C3)C=CC5=C4C6=CC=CC=C6C=C5
[9] 螺旋烯（九螺烯） C1=CC=C2C(=C1)C=CC3=C2C4=C(C=C3)C=CC5=C4C6=C(C=C5)C=CC7=C6C8=C(C=C7)C=CC9=CC=CC=C98

八、三蝶烯的多环 / 笼状芳烃
三蝶烯（标准规范式） C1=CC=C2C3C4=CC=CC=C4C(C2=C1)C5=CC=CC=C35
桶烯（Barrelene） C1=CC=C2C(C=C1)C1C=CC2=C1

2 个赞
11

这些分子好复杂的说。

3 个赞
12

image
image1755×858 116 KB

加油！

3 个赞
13

互相支持呀！https://forum.trae.cn/t/topic/72727/69太厉害了！

2 个赞
14

已支持，加油。

image
image1402×268 42.2 KB

互相支持，来捧个场，谢谢，【学习工作赛道】英语星图 · 小学英语AI闯关学习舱，AI闯关系统，带你在星空中学习。 - TRAE AI 创造力大赛 / 【大赛初赛专区】 - TRAE 官方中文社区

3 个赞
15

哈哈，谢邀，你的作品挺好，已投。

2 个赞
16

化学大佬，做的太好玩了。

我做了一个四次元伙伴-AI技能社交平台，交流一下哈

3 个赞
17

我不是化学专家 :blush:，Trae Work拓展了我的知识领域和专业高度。

2 个赞
18

IMG_1606
IMG_16061320×1228 158 KB

3 个赞