Line Points

update

by navinleon

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer, controls;
var sourceObj, destinationObj, line;

init();
animate();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(5, 10, 10);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

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

  var planeGeom = new THREE.PlaneGeometry(10, 10, 10, 10);
  planeGeom.rotateX(THREE.Math.degToRad(-90));
  planeGeom.translate(0, -5, 0);

  var planeMat = new THREE.MeshBasicMaterial({
    color: 0x777777,
    wireframe: true
  });
  var plane = new THREE.Mesh(planeGeom, planeMat);
  scene.add(plane);

  sphereObj = function( color ) {
    var sphGeom = new THREE.SphereGeometry(0.5, 8, 4);
    var sphMat = new THREE.MeshBasicMaterial({
      color: color,
      wireframe: false
    });
    return new THREE.Mesh(sphGeom, sphMat);
  }

  sourceObj = new sphereObj("blue");
  destinationObj = new sphereObj("red");

  var lineGeom = new THREE.LineGeometry();
  lineGeom.vertices.push(sourceObj.position);
  lineGeom.vertices.push(destinationObj.position);
  var lineMat = new THREE.LineBasicMaterial({
    color: "yellow",
    linewidth: 30,
    scale:20
  });
  line = new THREE.Line(lineGeom, lineMat);

  scene.add(sourceObj);
  scene.add(destinationObj);
  scene.add(line);
}

function animate() {
  var timestamp = new Date() * 0.0005;
  //requestAnimationFrame(animate);

  sourceObj.position.x = Math.cos(timestamp) * 7;
  sourceObj.position.z = Math.sin(timestamp) * 7;

  destinationObj.position.x = Math.cos(timestamp * 2) * 5;
  destinationObj.position.y = Math.sin(timestamp * 2) * 5;

  line.geometry.verticesNeedUpdate = true;

  render();
}

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