@GoGoFly23: 复刻了大神@DilumSanjaya的视觉框架,建了一个 F-22、F -35、星舰、猛禽发动机的展示网页。主要有 3 步: 1、使用 GPT 2 Image 生成模型三视图, 2、然后在 ComfyUI 里使用 Hunyuan 3.1生…
摘要
This article introduces 3DCellForge, an open-source React and Three.js-based web application for generating and exploring interactive 3D models. It utilizes AI models like Hunyuan 3D and Tripo via ComfyUI or direct API integration to create visualizations of objects such as aircraft and spacecraft.
查看缓存全文
缓存时间: 2026/05/12 08:52
复刻了大神@DilumSanjaya的视觉框架,建了一个 F-22、F -35、星舰、猛禽发动机的展示网页。主要有 3 步: 1、使用 GPT 2 Image 生成模型三视图, 2、然后在 ComfyUI 里使用 Hunyuan 3.1生成对应的模型, 3、把大神@servasyy_ai开源的仓库丢给 Codex,然后换个SpaceX 网站的风格就可以了。 https://github.com/huangserva/3DCellForge… 非常轻松就可以搞定了
huangserva/3DCellForge
Source: https://github.com/huangserva/3DCellForge
3DCellForge
AI-powered interactive 3D cell generation and exploration studio.
3DCellForge is a React + Three.js prototype for exploring biological cell models in a polished browser UI. It supports live WebGL orbit controls, organelle panels, screenshots, GLB export, and optional image-to-3D providers for generating real 3D models from uploaded reference images.
Demo
Open the demo video: 3DCellForge-demo-2026-05-10.mp4
Features
- Interactive cell viewer built with React Three Fiber.
- Drag to rotate, scroll to zoom, and toggle 3D proof mode.
- Organelle detail cards, microscope references, comparison panel, notes, and gallery actions.
- Tripo cloud image-to-3D pipeline through a local Node backend.
- Hunyuan3D local provider support as a backup generation path.
- Cached demo GLB models for offline-friendly screenshots and demos.
- Auxiliary Khronos glTF reference models for GLB loader and PBR material checks.
- API key stays server-side in
.env.local; it is never exposed to the frontend bundle.
Tech Stack
- React
- Vite
- Three.js
- React Three Fiber
- Drei
- Framer Motion
- Tripo API optional backend
- Hunyuan3D local API optional backend
Quick Start
npm install
npm run dev
Open the Vite URL shown in the terminal.
Optional Image-to-3D Backend
To enable image-to-3D generation, create .env.local:
cp .env.example .env.local
Then set:
TRIPO_API_KEY=your_tripo_key
RODIN_API_KEY=your_rodin_api_key
API_HOST=127.0.0.1
For Hunyuan3D local backup mode, start your local Hunyuan3D API server and set:
HUNYUAN_API_BASE=http://127.0.0.1:8081
HUNYUAN_CREATE_PATH=/send
HUNYUAN_STATUS_PATH=/status
The 3D generation backend supports these provider paths:
Tripo Tripo cloud generation only (default)
Rodin Hyper3D Rodin cloud generation only
Auto Tripo first, then Rodin and Hunyuan backup
Hunyuan Local Hunyuan3D generation only
The upload panel exposes the full generation mode choice before picking a file:
Tripo Tripo cloud GLB generation
Rodin Hyper3D Rodin GLB generation
Hunyuan Local Hunyuan3D GLB generation
JS Depth Browser-side image relief with layered PNG fallback
Auto Tripo, Rodin, Hunyuan, then JS Depth fallback
Local GLB Import an existing .glb or self-contained .gltf
Tripo uploads use the current STS object-storage flow (/upload/sts/token) before creating an image_to_model task.
Rodin uploads use Hyper3D’s multipart /rodin task API, then poll /status and cache the GLB returned by /download.
Generated GLBs are cached by the Node backend under .generated-models/, so later views use the local copy instead of the temporary Tripo URL.
You can also import a local .glb or self-contained .gltf from the Microscope View add button. Imported models become custom Cell Types and are served from the same local cache.
Expected Hunyuan3D local API shape:
POST /send
GET /status/:uid
The status response can return either a remote model URL or a base64 GLB field such as model_base64 / glb_base64. Base64 GLBs are cached under .generated-models/ and served by the Node backend.
Start the backend:
npm run dev:api
Then start the frontend:
npm run dev
The frontend talks to the local Node backend at http://127.0.0.1:8787 by default.
Demo Models
The repository includes cached generated GLB files under:
public/generated-models/
These make the demo usable without spending API credits on every run.
Reference Models
The Library panel includes remote Khronos glTF Sample Models as auxiliary references for material and loader checks:
- Transmission Test, CC0, Adobe via Khronos.
- Transmission Roughness Test, CC-BY 4.0, Ed Mackey / Analytical Graphics via Khronos.
- Mosquito In Amber, CC-BY 4.0, Loic Norgeot / Geoffrey Marchal / Sketchfab via Khronos.
These are loaded from the archived Khronos sample repository and are not bundled into this repo.
Security
Do not put real API keys in frontend code. Keep secrets in .env.local, which is ignored by git.
License
MIT
相似文章
@Huahuazo: 翻GitHub时挖到一个让人眼前一亮的项目——上传一张普通照片,它能自动识别物体结构、比例和材质,直接生成完整的3D模型。 说几个让我觉得路子很野的设计: 出厂自带“半成品”属性——生成的模型不是死板的照片贴图,而是包含清晰层级与碰撞体组…
介绍GitHub上的开源项目img2threejs,可上传普通照片自动生成带层级和碰撞体的代码化Three.js 3D模型,适合开发者和游戏制作人直接使用。
@LufzzLiz: 卧靠,这个好棒啊。 GPT image 2 + Gemini 3.1 pro生成的3D生物结构页面 有利于AI教育,我要复刻一下~
The user shares an impressive example of a 3D biological structure page generated using GPT Image 2 and Gemini 3.1 Pro, noting its potential for AI education and expressing intent to replicate it.
@Saccc_c: 受全网浏览近千万的 3D 生物结构视觉启发,我制作了三星堆 3D 文物展览 我认为历史文物可视化是有着巨大商业价值的,因为当下国内博物馆制作的 3D 参观依然一言难尽 制作的方法也非常简单: 1、三星堆博物馆官网截图文物后让Image 2…
The author used the Tripo image-to-3D service and an open-source React+Three.js 3D model studio (3DCellForge) to create a 3D exhibition of Sanxingdui artifacts, arguing for the commercial value of historical artifact visualization.
@MMMusol: Gemini 3.1 Pro,GPT 5.5 Deepseek V4和最新Claude Fable 5 做了一个相同的测试,如视频所示,对比请自行体会~ 提示词如下: 创建一个 HTML 文件,用来呈现一架高速、充满攻击性的战斗机在全力加…
多个AI模型(Gemini 3.1 Pro、GPT 5.5、Deepseek V4、Claude Fable 5)被要求生成同一款战斗机HTML动画,视频展示了各模型的输出对比。
@cevenif: 最近在 GitHub 上扒到一个挺有意思的开源工具:AetherViz Master。你给它一个教学主题,它能自动生成一套 3D 交互式教学网页,打开浏览器就能直接用。 它底层是 Three.js 加 SVG 混合渲染,能自动识别学科——…
介绍了一个名为 AetherViz Master 的开源工具,它利用 AI 将教学主题自动转化为沉浸式 3D 交互式网页,支持物理、化学、数学等多个学科。
