Dynamic Line

Dynamic Line

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

// instantiate a Scene
var scene = new THREE.Scene();

// instantiate a Camera
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(-40.684704204852935, -2.908368066386382, 82.47836169846059);
scene.add(camera);
window.camera = camera;

// instantiate a Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// (optional) instantiate a Controls
var orbit = new THREE.OrbitControls(camera, renderer.domElement);

// add a shpere
(function () {
  THREE.ImageUtils.crossOrigin = '';
  var map = THREE.ImageUtils.loadTexture(
          "http://i.imgur.com/1NAPyv9.jpg");
  var geometry = new THREE.SphereGeometry( 200, 16, 16 );
  var material = new THREE.MeshBasicMaterial( {
    map: map,
    side: THREE.BackSide
  } );
  var sphere = new THREE.Mesh( geometry, material );
  scene.add( sphere );
})();

// add a cube
(function () {
  var geometry = new THREE.BoxGeometry( 20, 20, 20 );
  var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
})();

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