个人项目介绍3：火车站篇

项目需求：

一比一精确显示火车站主建筑和站台模型。实时响应车辆信息（上水，吸污，换乘）并同步显示，实时响应车辆进出站信息，并以动画形式模拟。实时响应报警信息，并能在三位中显示，可拉进处理。显示监控设备内容。

要求：快速迭代，一周内可完成一个火车站的全部功能开发和部署。数据实时显示。保证监控基本无延时。

最终实现：实现平台可配置，可动态调整，数据动态适配。完成公共模型可服用，实现建模，数据对接，视频对接3天完成。基于webrtc实现监控视频基本无延时。

成就：新闻联播有几秒的显示

列车宣传视频有一闪而过的画面

个人网站demo显示效果如下：

个人网站如下：

http://47.96.130.245:8080/train/index.html

商务合作：

技术实现介绍：

1.获取div

design = document.getElementById('design');

2.初始化 design,renderer,scene,camera,control,gridHelper

//renderer		        	
		renderer = new THREE.WebGLRenderer({ antialias: true });
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( design.clientWidth, design.clientHeight );
		renderer.shadowMap.type=THREE.PCFSoftShadowMap;
        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.shadowMap.enabled = true;
		design.appendChild( renderer.domElement );
        //renderer
        
		//scene
        scene = new THREE.Scene();           
        //scene
        
        //camera
		camera = new THREE.PerspectiveCamera( 70,design.clientWidth / design.clientHeight, 1, 10000 );
		camera.position.set( 0, 100, 100);
		camera.lookAt( new THREE.Vector3( 0, 0 ,0) );
		scene.add(camera);
		//camera	
		
        //gridHelper
        gridHelper = new THREE.GridHelper( 100, 10);
        scene.add( gridHelper );
        //gridHelper
        
        // add hemi lights
        var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.05 );
        hemiLight.color.setHSL( 0.6, 1, 0.6 );
        hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
        hemiLight.position.set( 10000, 10000, 10000 );
        scene.add( hemiLight );    
        
		//controls
		controls = new THREE.TrackballControls( camera,design );
		controls.rotateSpeed = 2.0;
		controls.zoomSpeed = 1.2;
		controls.panSpeed = 0.8;
		controls.noZoom = false;
		controls.noPan = false;
		controls.staticMoving = true;
		controls.dynamicDampingFactor = 0.3;
        //controls

3.导入模型

 var stlmaterial = new THREE.MeshLambertMaterial( { color: 0x012028 ,transparent: true,opacity: 0.5 } );
	    var stlmaterialgl = new THREE.MeshLambertMaterial( { color: 0xff0000  } );
	    var tmparray=new Array(
			"../models/1C.stl",
			"../models/2C.stl",
			"../models/dimian.stl",
			"../models/ding.stl",
            "../models/shoupiaoting.stl",
            "../models/weiqiang.stl",
            "../models/zhantaiguidao.stl",
		);
		var i = 0;
		for(i=0;i<tmparray.length;i++){
			var loader = new THREE.STLLoader();
			(function(datatmp,tmpi){
				loader.load( datatmp, function ( geometry ) {		
                    var mesh = new THREE.Mesh( geometry, stlmaterial );
					mesh.rotation.x = -Math.PI/2;					
					scene.add( mesh );				
				} );
			})(tmparray[i],i);       
		}

4.显示效果