Dynamic Line

Dynamic Line

by liyuanqiu

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="//139.196.28.110/OrbitControls.js"></script>

JavaScript

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

// 2. instantiate a Camera
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 500);
scene.add(camera);

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

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

// 5. add some lights
var light1 = new THREE.PointLight( 0xffffff, 1, 0 );
light1.position.set( 500, 500, 500 );
scene.add( light1 );
var lightHelper1 = new THREE.PointLightHelper( light1 );
scene.add( lightHelper1 );

var light2 = new THREE.PointLight( 0xffffff, 1, 0 );
light2.position.set( -500, -500, -500 );
scene.add( light2 );
var lightHelper2 = new THREE.PointLightHelper( light2 );
scene.add( lightHelper2 );

// 6. add a shpere
var geometry = new THREE.SphereGeometry( 200, 4, 4 );
var material = new THREE.MeshPhongMaterial( {
	color: 0xffff00
} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

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