个人项目介绍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//scenescene = new THREE.Scene();           //scene//cameracamera = 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	//gridHelpergridHelper = new THREE.GridHelper( 100, 10);scene.add( gridHelper );//gridHelper// add hemi lightsvar 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 );    //controlscontrols = 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.显示效果