Threejs - Move Object in 3D

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<!--
  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_DECK_FLOOR = new DeckDefaults(15);

  /**
   * corrects gl transparency rendering issues when no decking and framing is selected
   * the lower the number, the higher the priority to be rendered first
   */
  public static readonly RENDER_ORDER_FRAMING = new DeckDefaults(10);
  
  -->

CSS

body {
  margin:0;
}

JavaScript

class Line {
        constructor(start, end){
            if(start && end){
                this.start = start;
                this.end = end;
                this.mesh = THREE.Line(start, end);
            }
        }

        update(){
            this.line.needsUpdate();
        }
    }

    var mouse = {};

    var objects = [];
    var scene = new THREE.Scene();

    var width = window.innerWidth;
    var height = window.innerHeight;

    var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
    var renderer = new THREE.WebGLRenderer();

    renderer.setSize( width, height );
    renderer.setClearColor( 0xcccccc, 1 );
    document.body.appendChild( renderer.domElement );
    scene.add(camera);

    var light = new THREE.DirectionalLight(0xffffff, 1);
    light.position.set(1,2,3);
    light.lookAt(scene.position);
    scene.add(light);

    var raycaster = new THREE.Raycaster();

    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.screenSpacePanning = true;

    setToFullOrbit(controls)
    camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
    // fix first frame render issue going invisible
    camera.lookAt(new THREE.Vector3(0,0,0));

    var axes = new THREE.AxesHelper();
    scene.add(axes);

    var grid = new THREE.GridHelper(fti(12), 12);
    scene.add(grid);

    var selectedObj = null;
    var selecteObjHeightOffset = 0; // to prevent jumping on move
    var isMouseDown = false;
    var intersection = new THREE.Vector3();


    // ---- playground here

    var plane = new THREE.Plane(new THREE.Vector3(1,0,1), 0);
    var planeHelper = new THREE.PlaneHelper(plane, 12, 0xff0000);
    planeHelper.updateMatrixWorld(true);
    scene.add(planeHelper);

    var cube = createCube(24, 2, 24);

    document.body.addEventListener('mousedown', (e) => {
        //register
        isMouseDown = true;
        updateMouse(e);
        raycaster.setFromCamera(mouse, camera);
        var intersects =...