move cube from gui

by fiddleuser01

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/libs/dat.gui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

<canvas id='canvasId'></canvas>

CSS

canvas{
      height: 100%;
      width: 100%;
    }

JavaScript

const RED = 0xff0000;
    const GREEN = 0x00ff00;
    const BLUE = 0x0000ff;
    const CUBE_COLOUR = 0xFF2255;
    const LIMIT = 100;
    const SIDE = 10;

    let canvas, scene, camera, renderer, cube;

    function initAxes(){
      function makeAxis(start, finish, material, name){
        const points = [start, finish];
        const axisGeometry = new THREE.BufferGeometry().setFromPoints(points);
        const newAxis = new THREE.Line(axisGeometry, material);
        newAxis.name = name;
        scene.add(newAxis);
      }
      const xAxisMaterial = new THREE.LineBasicMaterial({ color: RED });
	    const yAxisMaterial = new THREE.LineBasicMaterial({ color: GREEN });
	    const zAxisMaterial = new THREE.LineBasicMaterial({ color: BLUE });
      makeAxis(new THREE.Vector3(-LIMIT, 0, 0), new THREE.Vector3(LIMIT, 0, 0), xAxisMaterial, 'xAxis');
      makeAxis(new THREE.Vector3(0, -LIMIT, 0), new THREE.Vector3(0, LIMIT, 0), yAxisMaterial, 'yAxis');
      makeAxis(new THREE.Vector3(0, 0, -LIMIT), new THREE.Vector3(0, 0, LIMIT), zAxisMaterial, 'zAxis');
    }

    function initGui(){
      const controls = {
        get positionX(){return cube.position.x;},
        set positionX(value){
         cube.position.x = value;
        },
        get positionY(){return cube.position.y;},
        set positionY(value){
         cube.position.y = value;
        },
        get positionZ(){return cube.position.z;},
        set positionZ(value){
         cube.position.z = value;
        }
      };
      const gui = new dat.GUI();
      const cubeFolder  = gui.addFolder('cube');
      cubeFolder.add(controls, 'positionX', -LIMIT, LIMIT);
      cubeFolder.add(controls, 'positionY', -LIMIT, LIMIT);
      cubeFolder.add(controls, 'positionZ', -LIMIT, LIMIT);
    }

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

    function initCamera() {
      camera = new THREE.PerspectiveCamera(75, canvas.clientWidth /...