diff --git a/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js b/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js
index a57cdb46..ef3940cf 100644
--- a/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js
+++ b/ShadowEditor.Web/src/editor/menubar/ComponentMenu.js
@@ -1,6 +1,7 @@
 import UI from '../../ui/UI';
 import AddObjectCommand from '../../command/AddObjectCommand';
 import Sky from '../../object/Sky';
+import Fire from '../../object/component/Fire';
 import Smoke from '../../particle/Smoke';
 import ParticleEmitter from '../../object/component/ParticleEmitter';
 import PlysicsUtils from '../../physics/PlysicsUtils';
@@ -107,36 +108,12 @@ ComponentMenu.prototype.onAddSky = function () {
 
 ComponentMenu.prototype.onAddFire = function () {
     var editor = this.app.editor;
-    var camera = editor.camera;
 
-    VolumetricFire.texturePath = 'assets/textures/VolumetricFire/';
+    var fire = new Fire(editor.camera);
 
-    var fireWidth = 2;
-    var fireHeight = 4;
-    var fireDepth = 2;
-    var sliceSpacing = 0.5;
+    editor.execute(new AddObjectCommand(fire));
 
-    var fire = new VolumetricFire(
-        fireWidth,
-        fireHeight,
-        fireDepth,
-        sliceSpacing,
-        camera
-    );
-
-    fire.mesh.name = '火焰';
-    fire.mesh.position.y = 2;
-    fire.mesh.userData.type = 'Fire';
-    fire.mesh.userData.fire = fire;
-    fire.mesh.userData.width = fireWidth;
-    fire.mesh.userData.height = fireHeight;
-    fire.mesh.userData.depth = fireDepth;
-    fire.mesh.userData.sliceSpacing = sliceSpacing;
-
-    editor.execute(new AddObjectCommand(fire.mesh));
-
-    // 烧一下，在场景中留下痕迹
-    fire.update(0);
+    fire.userData.fire.update(0);
 };
 
 // ------------------------------ 添加烟 ------------------------------------
diff --git a/ShadowEditor.Web/src/object/component/Fire.js b/ShadowEditor.Web/src/object/component/Fire.js
new file mode 100644
index 00000000..4792ddbe
--- /dev/null
+++ b/ShadowEditor.Web/src/object/component/Fire.js
@@ -0,0 +1,42 @@
+/**
+ * 火焰
+ */
+function Fire(camera, options = {}) {
+    THREE.Object3D.call(this);
+
+    VolumetricFire.texturePath = 'assets/textures/VolumetricFire/';
+
+    var width = options.width || 2;
+    var height = options.height || 4;
+    var depth = options.depth || 2;
+    var sliceSpacing = options.sliceSpacing || 0.5;
+
+    var fire = new VolumetricFire(
+        width,
+        height,
+        depth,
+        sliceSpacing,
+        camera
+    );
+
+    this.add(fire.mesh);
+
+    fire.mesh.name = '火焰';
+
+    this.name = '火焰';
+    this.position.y = 2;
+
+    Object.assign(this.userData, {
+        type: 'Fire',
+        fire: fire,
+        width: width,
+        height: height,
+        depth: depth,
+        sliceSpacing: sliceSpacing
+    });
+}
+
+Fire.prototype = Object.create(THREE.Object3D.prototype);
+Fire.prototype.constructor = Fire;
+
+export default Fire;
\ No newline at end of file
diff --git a/ShadowEditor.Web/src/serialization/objects/FireSerializer.js b/ShadowEditor.Web/src/serialization/objects/FireSerializer.js
index 979ed319..9a948b42 100644
--- a/ShadowEditor.Web/src/serialization/objects/FireSerializer.js
+++ b/ShadowEditor.Web/src/serialization/objects/FireSerializer.js
@@ -1,5 +1,6 @@
 import BaseSerializer from '../BaseSerializer';
-import MeshSerializer from '../core/MeshSerializer';
+import Object3DSerializer from '../core/Object3DSerializer';
+import Fire from '../../object/component/Fire';
 
 /**
  * FireSerializer
@@ -13,31 +14,26 @@ FireSerializer.prototype = Object.create(BaseSerializer.prototype);
 FireSerializer.prototype.constructor = FireSerializer;
 
 FireSerializer.prototype.toJSON = function (obj) {
-    var json = MeshSerializer.prototype.toJSON.call(this, obj);
+    var json = Object3DSerializer.prototype.toJSON.call(this, obj);
 
-    json.userData.fire = null;
+    delete json.userData.fire;
 
     return json;
 };
 
 FireSerializer.prototype.fromJSON = function (json, parent, camera) {
-    VolumetricFire.texturePath = 'assets/textures/VolumetricFire/';
+    var fire = new Fire(camera, {
+        width: json.userData.width,
+        height: json.userData.height,
+        depth: json.userData.depth,
+        sliceSpacing: json.userData.sliceSpacing
+    });
 
-    var obj = parent || new VolumetricFire(
-        json.userData.width,
-        json.userData.height,
-        json.userData.depth,
-        json.userData.sliceSpacing,
-        camera
-    );
+    Object3DSerializer.prototype.fromJSON.call(this, json, fire);
 
-    MeshSerializer.prototype.fromJSON.call(this, json, obj.mesh);
+    fire.userData.fire.update(0);
 
-    obj.mesh.userData.fire = obj;
-
-    obj.update(0);
-
-    return obj.mesh;
+    return fire;
 };
 
 export default FireSerializer;
\ No newline at end of file