Threejs - Line Test2

If moving a mesh/line by position, its vertices stays the same for performance reasons in webGL. Vertices are calculated relative to the position. To get the vertices of the line, you need to convert the start and end points to world space.

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>
<div id="con">
<p id="local">Local -- <span id="print"> </span></p>
<p id="world">World -- <span id="print2"></span></p>
</div>

JavaScript

class Main {
	constructor(){
    this.objects = []; 
    this.scene = new THREE.Scene();
    
    var width = window.innerWidth;
    var height = window.innerHeight / 2;
    this.camera = new THREE.PerspectiveCamera( 
    	35, width/height, 0.1, 1000 
    );
    
    this.renderer = new THREE.WebGLRenderer();
    
    
    this.renderer.setSize( width, height );
    this.renderer.setClearColor( 0xcccccc, 1 ); 
    document.body.appendChild( this.renderer.domElement );
    this.scene.add(this.camera);
    
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);

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

    var axisHelper = new THREE.AxisHelper();
    this.scene.add(axisHelper);

    
    // playground starts here
    var geo = new THREE.Geometry();
    geo.vertices = [
    	new THREE.Vector3(),
      new THREE.Vector3(5,0,0)
    ];
    var line = new THREE.Line(geo, new THREE.LineBasicMaterial({color: 0xff00ff}));
    this.scene.add(line);
    
    // playground ends here
    
    
    var incBtn = document.createElement('button');
    incBtn.innerHTML = "Click To move +Y up one";
    incBtn.addEventListener('click', () => {
    	this.moveLine(line, 1);
    });
    var con = document.getElementById('con');
    var local = document.getElementById('local');
    con.insertBefore(incBtn, local);
    
    var resetBtn = document.createElement('button');
    resetBtn.innerHTML = "Reset Line Pos";
    resetBtn.addEventListener('click', () => {
    	line.position.set(0,0,0);
      this.moveLine(line, 0);
    });
    con.insertBefore(resetBtn, local);
    
    
    this.moveLine(line, 0);

  }
  
  moveLine(line, moveValue){
  	line.position.y += parseInt(moveValue);
    line.updateMatrixWorld();	// only when you need the verts to update the verts ASAP before next frame
 ...