Toturial

A ThreeJS toturial

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>
<input id='select-map' type="file" style="position: absolute; top: 10px; left: 10px;" />

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, 16, 16 );
var material = new THREE.MeshPhongMaterial( {
	color: 0xffff00
} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

var selectMap = document.getElementById('select-map');
selectMap.addEventListener("change", function () {
	var reader = new FileReader();
  reader.readAsText(this.files[0], "UTF-8");
  reader.onload = function (evt) {
    var fileContent = evt.target.result;
    
    var lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 });
    var lineGeometry = new THREE.Geometry();
    fileContent.split('\n').forEach(function (item) {
    	var coord = item.split(',');
    	lineGeometry.vertices.push(new THREE.Vector3(coord[0], coord[1], coord[2]));
    });
    var line = new THREE.LineSegments(lineGeometry, lineMaterial);
    scene.add(line);
  }
  reader.onerror = function (evt) {
    console.log("error reading file");
  }
}, false);

// 7. set animate
animate(renderer);
function animate() {
  requestAnimationFrame(animate);
 ...