Web3D智慧厂房 HTML5+Threejs(webgl)开发

     智慧工厂是现代工厂信息化发展的新阶段，也是工业互联网时代的必然产物。智慧工厂是利用大数据、物联网、三维可视化等技术，实现工厂办公、管理自动化，对整个生产过程进行仿真、评估和优化，实现工厂作业规范化、智能化、可视化，以更加精细和动态的方式管理生产，达到“智慧”状态，从而提高工厂的管理效率和生产效率，保障安全生产。

模型加载

引擎场景、相机、天地光、环境光、太阳光加载

import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { GPUComputationRenderer } from './jsm/misc/GPUComputationRenderer.js';

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 350;

scene = new THREE.Scene();
scene.background = new THREE.Color( colors[ selectModel ] );
scene.fog = new THREE.Fog( colors[ selectModel ], 100, 1000 );

// LIGHTS

const hemiLight = new THREE.HemisphereLight( colors[ selectModel ], 0xffffff, 1.6 );
hemiLight.color.setHSL( 0.6, 1, 0.6 );
hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
hemiLight.position.set( 0, 50, 0 );
scene.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0x00CED1, 0.6 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( - 1, 1.75, 1 );
dirLight.position.multiplyScalar( 30 );
scene.add( dirLight );

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

三维可视化

     

 模型着色器

<script id="fragmentShaderPosition" type="x-shader/x-fragment">

   uniform float time;
   uniform float delta;

   void main()    {

      vec2 uv = gl_FragCoord.xy / resolution.xy;
      vec4 tmpPos = texture2D( texturePosition, uv );
      vec3 position = tmpPos.xyz;
      vec3 velocity = texture2D( textureVelocity, uv ).xyz;

      float phase = tmpPos.w;

      phase = mod( ( phase + delta +
         length( velocity.xz ) * delta * 3. +
         max( velocity.y, 0.0 ) * delta * 6. ), 62.83 );

      gl_FragColor = vec4( position + velocity * delta * 15. , phase );

   }

</script>

shader.vertexShader = shader.vertexShader.replace( token2, token2 + insert );

token2 = '#include <begin_vertex>';

insert = /* glsl */`
   vec4 tmpPos = texture2D( texturePosition, reference.xy );

   vec3 pos = tmpPos.xyz;
   vec3 velocity = normalize(texture2D( textureVelocity, reference.xy ).xyz);
   vec3 aniPos = texture2D( textureAnimation, vec2( reference.z, mod( time + ( seeds.x ) * ( ( 0.0004 + seeds.y / 10000.0) + normalize( velocity ) / 20000.0 ), reference.w ) ) ).xyz;
   vec3 newPosition = position;

   newPosition = mat3( modelMatrix ) * ( newPosition + aniPos );
   newPosition *= size + seeds.y * size * 0.2;

   velocity.z *= -1.;
   float xz = length( velocity.xz );
   float xyz = 1.;
   float x = sqrt( 1. - velocity.y * velocity.y );

   float cosry = velocity.x / xz;
   float sinry = velocity.z / xz;

   float cosrz = x / xyz;
   float sinrz = velocity.y / xyz;

   mat3 maty =  mat3( cosry, 0, -sinry, 0    , 1, 0     , sinry, 0, cosry );
   mat3 matz =  mat3( cosrz , sinrz, 0, -sinrz, cosrz, 0, 0     , 0    , 1 );

   newPosition =  maty * matz * newPosition;
   newPosition += pos;

   vec3 transformed = vec3( newPosition );
`;

shader.vertexShader = shader.vertexShader.replace( token, insert );

综合安防

对厂区重点部位、人员、车辆、告警事情等要素进行实时监测，支持安防报警事情疾速显示、定位，实时调取事情周边监控视频，辅佐管理者有效提升厂区平安管控效能。

便捷通行

厂区人员、车辆通行、车位运用、人员密度等进行实时监测，支持对人脸、车牌辨认后进行剖析研判，并对人员车辆异常滞留状况进行可视化告警，协助管理者实时掌握厂区通行态势。

人员管理

对车辆、人员、设备、值班信息、日常事物等数据进行多维度可视化监测与关联显示，直观展示执勤区域信息和执勤人员状况，为勤务指挥调度提供信息支撑。

设备运维

经过精细化三维建模，对各类设备进行真实复现，并对各类设备具体位置、类型、运转环境、运转形态等信息进行实时监控，支持设备运转异常实时告警、详细信息查询，辅佐管理者直观掌握设备运转形态。

智能管网

对地下管网及综合管廊的地位、散布、运转形态进行智能化可视监测和片面感知，提升管理者对厂区管网全方位感知、综合性预判、一体化管控的能力和效率。

仓储空间

经过三维建模，对仓储空间的内外部环境以及修建外部空间结构进行三维展现，对厂区仓储空间和环境形态进行实时监测，提升管理者对厂区各类仓储库房监管效能。