Проблема с перемещением объекта на сцене three js

у меня появились траблы с перемещением объекта, есть ползунок (два инпута), один выводит значение, другой его меняет и наоборот, НО, когда я начинаю их двигать, объект магически пропадает.

import * as THREE from '/node_modules/three/build/three.module.js';
import { OrbitControls } from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/GLTFLoader.js";
import { OBJLoader } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/OBJLoader.js';
import { OBJLoader2 } from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/OBJLoader2.js';
import { MTLLoader } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/loaders/MTLLoader.js';
import { MtlObjBridge } from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/loaders/obj2/bridge/MtlObjBridge.js';
import { LoadingManager } from '/node_modules/three/build/LoadingManager.js';
// Global variables

let scene,
  camera,
  renderer,
  controls,
  clickMouse,
  moveMouse,
  raycaster,
  draggableModel;

// Create Scene and lights
function init() {
  // SCENE
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xbfd1e5);
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({
    canvas,
    alpha: true,
    antialias: true,
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  const width_of_canvas = canvas.clientWidth;
  const height_of_canvas = canvas.clientHeight;

  // you must pass false here or three.js sadly fights the browser
  renderer.setSize(width_of_canvas, height_of_canvas, false);
  renderer.shadowMap.enabled = true;
  document.getElementById("main_class").appendChild(canvas);
  
  



// CAMERA
  const camera = new THREE.PerspectiveCamera(50,
    window.innerWidth / window.innerHeight,
    0.1,
    5000);

  camera.position.set(10, 5, 35);




  const cameraHelper = new THREE.CameraHelper(camera);





  controls = new OrbitControls(camera, renderer.domElement);
  controls.target.set(0, 5, 0);
  controls.update();
  



/*
  function getCursorPosition(canvas, event) {
      const rect = canvas.getBoundingClientRect()
      const posx = event.clientX - rect.left
      const posy = event.clientY - rect.top
      console.log("x: " + posx + " y: " + posy)


      const model_pos_x = posx;
      const model_pos_y = posy;
      addModel1(model_pos_x, model_pos_x);

  }

  view1Elem.addEventListener('mousedown', function(e) {
      getCursorPosition(view1Elem, e)
  })

*/
  //console.log("x: " + posx + " y: " + posy)

    /*
  const model_pos_x = posx;
  const model_pos_y = posy;
  addModel1(model_pos_x, model_pos_x);
*/

const mouse = new THREE.Vector2();

function onMouseMove(canvas, event) {
 
  // calculate mouse position in normalized device coordinates
  // (-1 to +1) for both components

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  console.log("x: " + mouse.x + " y: " + mouse.y)


  //const model_pos_x = 10;
  //const model_pos_y = 10;
  //model_pos_x, model_pos_y
  

}







  // LIGHTS
  let ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
  let directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.position.set(-30, 50, 150);
  scene.add(ambientLight);
  scene.add(directionalLight);

  // RAYCASTING (mouse functionality)
  raycaster = new THREE.Raycaster();
  clickMouse = new THREE.Vector2();
  moveMouse = new THREE.Vector2();

  // FLOOR
  {
    const planeSize = 40;

    const loader = new THREE.TextureLoader();
    const texture = loader.load('https://r105.threejsfundamentals.org/threejs/resources/images/checker.png');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    const repeats = planeSize / 2;
    texture.repeat.set(repeats, repeats);

    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }

function addModel1() {


  
  var geometry = new THREE.BoxGeometry(2, 1, 1);
  var material = new THREE.MeshBasicMaterial({
      color: 0xfff
  });
  var cube = new THREE.Mesh(geometry, material);

  cube.position.x = 2;
  cube.position.y = 10;
  cube.position.z = 20;

  let elem1 = document.getElementById("x_pos_id_1");
  let elem2 = document.getElementById("x_pos_id_2");
  elem1.addEventListener('input', function(event) {
      elem2.value = elem1.value;
  });
  elem2.addEventListener('input', function(event) {
      elem1.value = elem2.value;
  });

  elem2.oninput = function() {
    cube.position.x = $("x_pos_id_2").value;
  }

  elem1.oninput = function() {
    cube.position.x = $("x_pos_id_1").value;
  }

  scene.add(cube);
  
  

}

addModel1();











// Recursive function to render the scene
function animate() {


  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

// Re-renders the scene upon window resize
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(width_of_canvas, height_of_canvas, false);
}

// Start the program
(function () {
  window.addEventListener("resize", onWindowResize, false);
  
  //addModel({ x: 0, y: 1, z: 0 });
  
  //addModel2({ x: 0, y: 1, z: 0 });
  animate();
})();
}
init();



<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Template" />
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Template</title>
  <style>
      body {
          margin: 0;
      }

      canvas {
          width: 100%;
          height: 100%;
      }
  </style>
</head>

<body>

  <div id="main_class" class="flex flex-wrap w-full py-24 px-8">
  <canvas id="c" class="w-1/2 h-96"></canvas>
  <div class="w-1/2 h-96 bg-green-200">
    <p class="puba">
      <input type="range" min="-50" max="50" value="0" class="slider" id="x_pos_id_1" step="0.01">
      <input type="number" min="-50" max="50" value="0" class="slider1" id="x_pos_id_2" step="0.01">.xPos
    </p>
  </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script type="module" src="app.js"></script>
</body>

</html>