ISSUE:On adding modal dynamically in canvas adding it twice

Hi,
Im adding modal dynamically in canvas but on adding its showing same modal twice and can’t able to select or move that second object…
Can anyone suggest solution. @prisoner849 @Mugen87

class World {
  constructor(container) {
    camera = createCamera();
    renderer = createRenderer();
    scene = createScene();
    loop = new Loop(camera, scene, renderer);
    container.append(renderer.domElement);
    //add light
    const light = createLights();
    scene.add(light);
    //add helper
    helper = createHelper();
    scene.add(helper);
    new Resizer(container, camera, renderer);
  }

  async init() {
    let object_id;
    let control_state;
    let model_object;
    let model_objects = new THREE.Group();
    model_objects.name = "modelObjects";
    let current_object;

    //initial setting

    controls = createControls(camera, renderer.domElement);
    loop.updatables.push(controls);
    transcontrols = createTransControls(
      camera,
      renderer.domElement,
      control_state
    );
    const model = await loadWall();
    scene.add(model);

    setControlState("init");

    let openSelectPanelDivState = false;

    $("#components-nav").on("shown.bs.collapse", function () {
      changeSelectPanelDiv(true);
    });

    $("#components-nav").on("hidden.bs.collapse", function () {
      changeSelectPanelDiv(false);
    });

    function changeSelectPanelDiv(state) {
      if (!state) {
        document.getElementById("select-panel").style.marginLeft = "-450px";
      } else {
        document.getElementById("select-panel").style.marginLeft = "-30px";
      }
      openSelectPanelDivState = !openSelectPanelDivState;
    }

    for (
      var i = 0;
      i < document.getElementsByClassName("model-item").length;
      i++
    ) {
      document
        .getElementsByClassName("model-item")
        [i].addEventListener("click", add_model, false);
    }

    async function add_model() {
      if (control_state == "init" || control_state == "add") {
        object_id = this.getAttribute("id");
        model_object = await loadModel(object_id);

        changeModel_object_state(model_object, false);
        model_object.position.set(100, 1000, 1000);

        scene.add(model_object);
        setControlState("add");
        $("#components-nav").collapse("hide");
      }
    }

    var old_control_state;

    var myModal = new bootstrap.Modal(document.getElementById("basicModal"));

    document
      .getElementById("btn_openAddTextModal")
      .addEventListener("click", () => {
        if (control_state == "init") {
          openSetTextModal();
        }
      });
    document
      .getElementById("btn_setTextModalOk")
      .addEventListener("click", () => {
        if (document.getElementById("textContent").value) {
          myModal.hide();
          settext();
        }
      });

    document.getElementById("btn_addArrow").addEventListener("click", () => {
      setControlState("addFirstArrow");
    });

    $("#basicModal").on("hidden.bs.modal", function () {
      setControlState(old_control_state);
    });

    function openSetTextModal() {
      old_control_state = control_state;
      myModal.show();

      if (control_state == "init") {
        setControlState("addText");
        document.getElementById("txt_setTextModalTitle").innerHTML = "Add Text";
      } else if (control_state == "set") {
        setControlState("setText");
        document.getElementById("textContent").value =
          current_object.textProps.text;
        document.getElementById("textSize").value =
          current_object.textProps.size;
        document.getElementById("textFont").value =
          current_object.textProps.font;
        document.getElementById("textColor").value =
          current_object.textProps.color;
        document.getElementById("textBold").checked =
          current_object.textProps.bold;
        document.getElementById("txt_setTextModalTitle").innerHTML = "Set Text";
      }
    }

    async function settext() {
      if (control_state == "addText") {
        model_object = await loadTextModel(
          document.getElementById("textContent").value,
          document.getElementById("textSize").value,
          document.getElementById("textColor").value,
          document.getElementById("textFont").value,
          document.getElementById("textBold").checked
        );
        changeModel_object_state(model_object, false);
        model_object.position.set(0, 10000, 0);
        scene.add(model_object);
        setControlState("add");
      } else if (control_state == "setText") {
        let new_current = await loadTextModel(
          document.getElementById("textContent").value,
          document.getElementById("textSize").value,
          document.getElementById("textColor").value,
          document.getElementById("textFont").value,
          document.getElementById("textBold").checked
        );
        new_current.position.copy(current_object.position);
        new_current.rotation.copy(current_object.rotation);
        new_current.scale.copy(current_object.scale);
        scene.add(new_current);
        delete_current_object();
        current_object = new_current;
        transcontrols.attach(current_object);
        current_object.traverse(function (object) {
          if (object.type == "Mesh") {
            objects.push(object);
          }
        });
        model_objects.add(current_object);
        setControlState("set");
      }
      old_control_state = control_state;
    }

    function setControlState(state) {
      control_state = state;
      if (state == "init") {
        document.getElementById("tool-button").style.opacity = 0;
        document.getElementById("tool-button").style.visibility = "hidden";
        for (
          var i = 0;
          i < document.getElementsByClassName("model-item").length;
          i++
        ) {
          document
            .getElementsByClassName("model-item")
            [i].getElementsByTagName("img")[0].style.borderColor = "#ffffff";
        }
      } else if (state == "set") {
        document.getElementById("tool-button").style.opacity = 1;
        document.getElementById("tool-button").style.visibility = "visible";
      }
    }

    function changeModel_object_state(model_object, state) {
      if (!state) {
        model_object.traverse(function (object) {
          if (object.type == "Mesh") {
            object.material.transparent = true;
            object.material.opacity = 0.8;
          }
        });
      } else {
        model_object.traverse(function (object) {
          if (object.type == "Mesh") {
            object.material.transparent = false;
            object.material.opacity = 1;
          }
        });
      }
    }

    objects = [];
    objects.push(model.children[0]);

    //add line
    let start = new THREE.Vector3(-1, 0, -1);
    let end = new THREE.Vector3(1, 0, 1);
    let line = new THREE.Object3D();
    line.name = "lineObject";
    line.add(createLine(start, end));

    renderer.domElement.addEventListener("pointermove", onPointerMove);
    renderer.domElement.addEventListener("pointerdown", onPointerDown);
    function onPointerMove(event) {
      let intersects = createRaycuster(event, objects, renderer, camera);
      renderer.render(scene, camera);
      {
        if (control_state == "init") {
          if (intersects.length > 1 && intersects[0].object.name != "plane") {
            document.body.style.cursor = "pointer";
          } else {
            document.body.style.cursor = "inherit";
          }
        }
        if (control_state == "add") {
          if (intersects.length > 0) {
            const intersect = intersects[intersects.length - 1];
            model_object.position.set(intersect.point.x, 0, intersect.point.z);
          }
        }
        if (control_state == "addFirstArrow") {
          if (intersects.length > 0) {
            document.body.style.cursor = "pointer";
          } else {
            document.body.style.cursor = "inherit";
          }
        }
        if (control_state == "addSecondArrow") {
          if (intersects.length > 0) {
            const intersect = intersects[intersects.length - 1];
            end.set(intersect.point.x, 0, intersect.point.z);
            let lineTemp = createLine(start, end);
            line.add(lineTemp);
            line.remove(line.children[0]);
            scene.add(line);
            document.body.style.cursor = "pointer";
          } else {
            document.body.style.cursor = "inherit";
          }
        }
      }
    }

    // test

    document.getElementById("btn_editText").addEventListener("click", () => {
      openSetTextModal();
    });

    function onPointerDown(event) {
      document.body.style.cursor = "inherit";
      let intersects = createRaycuster(event, objects, renderer, camera);
      if (control_state == "add") {
        if (intersects.length > 0) {
          setObject(model_object);
        }
      }
      if (control_state == "init") {
        if (intersects.length > 1) {
          const intersect = intersects[0];

          //get object from casted mesh
          let currentNode = intersect.object;
          if (currentNode.name != "plane") {
            setControlState("set");

            while (
              !(
                currentNode.type == "Scene" ||
                currentNode.name.includes("modelObject_") ||
                currentNode.name.includes("textObject") ||
                currentNode.name.includes("lineObject")
              )
            ) {
              currentNode = currentNode.parent;
              console.log(currentNode);
            }
            if (currentNode.type == "Scene") {
              console.error("Invaild object.");
            }

            current_object = currentNode;
            if (current_object.name.includes("textObject")) {
              document.getElementById("btn_editText").style.display =
                "inline-block";
            } else {
              document.getElementById("btn_editText").style.display = "none";
            }

            // current_object = intersect.object.parent.parent;
            changeModel_object_state(current_object, false);

            // intersect;
            transcontrols.attach(current_object);
          }
        }
      }
      if (control_state == "addSecondArrow") {
        if (intersects.length > 0) {
          const intersect = intersects[0];
          let line_current = createLine(start, end);
          scene.remove(line);
          scene.add(line_current);
          setObject(line_current);
          setControlState("set");
        }
      }

      if (control_state == "addFirstArrow") {
        if (intersects.length > 0) {
          const intersect = intersects[0];
          start.copy(intersect.point);
          setControlState("addSecondArrow");
        }
      }
    }
    function setObject(selected_object) {
      if (control_state == "add" || control_state == "addSecondArrow") {
        if (selected_object.name.includes("textObject")) {
          document.getElementById("btn_editText").style.display =
            "inline-block";
        } else {
          document.getElementById("btn_editText").style.display = "none";
        }
        model_objects.add(selected_object);
        selected_object.traverse(function (object) {
          if (object.type == "Mesh") {
            objects.push(object);
          }
        });
        current_object = selected_object;
        scene.remove(selected_object);
        scene.add(model_objects);
        transcontrols.attach(
          model_objects.children[model_objects.children.length - 1]
        );
        transcontrols.addEventListener("dragging-changed", function (event) {
          controls.enabled = !event.value;
        });
        scene.add(transcontrols);
      }
      setControlState("set");
    }
    document.getElementById("btn_ok").addEventListener("click", () => {
      check_current_object();
    });

    document.addEventListener("keydown", (event) => {
      if (control_state == "set") {
        switch (event.which || event.keyCode || event.charCode) {
          case 46:
            delete_current_object();
            break;
          case 13:
            check_current_object();
            break;
        }
      }
    });

    document.getElementById("btn_del").addEventListener("click", () => {
      delete_current_object();
    });

    function delete_current_object() {
      transcontrols.detach();
      current_object.traverse(function (object) {
        if (object.type == "Mesh") {
          const isLargeNumber = (element) => element == object;
          objects.splice(objects.findIndex(isLargeNumber), 1);
        }
      });
      model_objects.remove(current_object);
      setControlState("init");
    }

    function check_current_object() {
      transcontrols.detach();
      changeModel_object_state(current_object, true);
      setControlState("init");
    }

    // function save_
  }

  render() {
    renderer.render(scene, camera);
  }

  start() {
    loop.start();
  }

  stop() {
    loop.stop();
  }
}