項目需求:
一比一精確顯示火車站主建筑和站臺模型。實時響應車輛信息(上水,吸污,換乘)并同步顯示,實時響應車輛進出站信息,并以動畫形式模擬。實時響應報警信息,并能在三位中顯示,可拉進處理。顯示監控設備內容。
要求:快速迭代,一周內可完成一個火車站的全部功能開發和部署。數據實時顯示。保證監控基本無延時。
最終實現:實現平臺可配置,可動態調整,數據動態適配。完成公共模型可服用,實現建模,數據對接,視頻對接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.顯示效果
以上效果源碼:
https://download.csdn.net/download/zzjzmdx/88908813