AI 助理
备案控制台
开发者社区 物联网 文章 正文

Threejs物联网，工厂3D可视化

2022-10-17 793
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Threejs物联网，工厂3D可视化

1，介绍

该示例使用的是 r95版本Three.js库。主要实现功能：引用模型进行工厂布局展示并贴图，使用粒子实现天气和火焰效果。效果图如下：

2，主要说明

下雨下雪火焰说明可以查看上一篇文章。

工厂布局主要使用OBJLoader加载模型，使用TextureLoader加载纹理，使用MeshBasicMaterial材质进行渲染，并设置展示的位置。


创建厂房和大小圆仓方式差不多，创建厂房代码如下：


// 创建房屋
function createBoxGeometryBasicMaterial() {
  var objLoader = new THREE.OBJLoader();
  objLoader.load('assets/textures/particles/003.obj', function(obj) {
    var mesh = obj.children[0];
    mesh.material = new THREE.MeshBasicMaterial({
      map: new THREE.TextureLoader().load('assets/textures/particles/003.png'),
    });
    mesh.scale.set(1.3, 1.4, 1.5);
    mesh.position.set(11, 0, -85);
    for (let i = 0; i < 2; i++) {
      for (let j = 0; j < 3; j++) {
        var mc = mesh.clone();
        mc.translateX(i * 52);
        mc.translateZ(j * 83);
        scene.add(mc);
      }
    }
  });
}


3，源码

<!DOCTYPE html>
<html>
  <head>
    <title>物联网，工厂3D可视化系统</title>
    <script type="text/javascript" src="libs/three.js"></script>
    <script type="text/javascript" src="libs/OrbitControls.js"></script>
    <script type="text/javascript" src="libs/OBJLoader.js"></script>
    <script type="text/javascript" src="libs/other/Tween.min.js"></script>
    <script type="text/javascript" src="libs/dat.gui.js"></script>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="dom"></div>
    <script type="text/javascript">
      var camera;
      var renderer;
      var cloud;
      var rainy_sw = 3; // 1雨2雪3晴4阴
      var flame_sw = true;
      //初始化一个空容器，装载粒子
      var krq = new THREE.Object3D();
      var textureLoader = new THREE.TextureLoader();
      var group3 = new THREE.Group();
      function init() {
        // 创建一个场景，它将包含我们所有的元素，如物体，相机和灯光。
        var scene = new THREE.Scene();
        var urls = [
          'assets/textures/cubemap/flowers/posx.jpg',
          'assets/textures/cubemap/flowers/negx.jpg',
          'assets/textures/cubemap/flowers/posy.jpg',
          'assets/textures/cubemap/flowers/negy.jpg',
          'assets/textures/cubemap/flowers/posz.jpg',
          'assets/textures/cubemap/flowers/negz.jpg'
        ];
        var urls1 = [
          'assets/textures/cubemap/flowers/posx1.jpg',
          'assets/textures/cubemap/flowers/negx1.jpg',
          'assets/textures/cubemap/flowers/posy1.jpg',
          'assets/textures/cubemap/flowers/negy1.jpg',
          'assets/textures/cubemap/flowers/posz1.jpg',
          'assets/textures/cubemap/flowers/negz1.jpg'
        ];
        var cubeLoader = new THREE.CubeTextureLoader();
        scene.background = cubeLoader.load(urls);
        // 创建一个摄像机，它定义了我们正在看的地方
        camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 20000);
        // 将摄像机对准场景的中心
        camera.position.x = 180;
        camera.position.y = 80;
        camera.position.z = 90;
        camera.lookAt(scene.position);
        var orbit = new THREE.OrbitControls(camera);
        // 创建一个渲染器并设置大小，WebGLRenderer将会使用电脑显卡来渲染场景
        renderer = new THREE.WebGLRenderer({
          antialias: true,
          logarithmicDepthBuffer: true,
        });
        renderer.setClearColor(new THREE.Color(0x121A39));
        renderer.setSize(window.innerWidth, window.innerHeight);
        var alight = new THREE.AmbientLight("#ffffff", 1);
        alight.name = "aLight";
        scene.add(alight);
        // 在屏幕上显示坐标轴
        var axes = new THREE.AxesHelper(100);
        // scene.add(axes);
        // 将平面添加到场景中
        createPlaneGeometryBasicMaterial();
        // 立方体
        createBoxGeometryBasicMaterial();
        creatRoadSurface();
        createRoundGeometryBasicMaterialMax();
        createRoundGeometryBasicMaterialMin();
        crateWall();
        // 将呈现器的输出添加到HTML元素
        document.getElementById("dom").appendChild(renderer.domElement);
        // 使用GUI调试库
        var controls = new function() {
          this.rainy = function() {
            scene.remove(scene.getObjectByName("particles_snowy"));
            if (rainy_sw != 1) {
              rainy_sw = 1;
              scene.background = cubeLoader.load(urls1);
              scene.getObjectByName("aLight").intensity = 0.6;
              createPointRainy();
            }
          }
          this.snowy = function() {
            scene.remove(scene.getObjectByName("particles_rainy"));
            if (rainy_sw != 2) {
              rainy_sw = 2;
              scene.background = cubeLoader.load(urls1);
              scene.getObjectByName("aLight").intensity = 2;
              createPointRainy();
            }
          }
          this.sunny = function() {
            if (rainy_sw != 3) {
              scene.remove(scene.getObjectByName("particles_rainy"));
              scene.remove(scene.getObjectByName("particles_snowy"));
              scene.background = cubeLoader.load(urls);
              scene.getObjectByName("aLight").intensity = 1.2;
              rainy_sw = 3;
            }
          }
          this.cloudy = function() {
            if (rainy_sw != 4) {
              scene.remove(scene.getObjectByName("particles_rainy"));
              scene.remove(scene.getObjectByName("particles_snowy"));
              scene.background = cubeLoader.load(urls1);
              scene.getObjectByName("aLight").intensity = 1;
              rainy_sw = 4;
            }
          }
          this.flame = function() {
            if (flame_sw) {
              initFlame();
              flame_sw = !flame_sw;
            }
          }
        }
        var gui = new dat.GUI();
        gui.add(controls, 'rainy'); // 雨
        gui.add(controls, 'snowy'); // 雪
        gui.add(controls, 'sunny'); // 晴
        gui.add(controls, 'cloudy'); // 阴
        gui.add(controls, 'flame'); // 火焰
        // 启动动画
        renderScene();
        function createPointRainy() {
          var img = rainy_sw == 1 ? "raindrop-4.png" : rainy_sw == 2 ? "snowflake3.png" : "";
          var name = rainy_sw == 1 ? "particles_rainy" : rainy_sw == 2 ? "particles_snowy" : "";
          var texture = new THREE.TextureLoader().load("assets/textures/particles/" + img);
          var geom = new THREE.Geometry();
          var material = new THREE.PointsMaterial({
            size: 1.5,
            transparent: true, // 是否设置透明度
            opacity: 1, // 透明
            map: texture, // 粒子材质
            blending: THREE.AdditiveBlending,
            sizeAttenuation: true, // 是否相同尺寸
            color: 0xffffff
          });
          var range = 350;
          for (var i = 0; i < 3500; i++) {
            var particle = new THREE.Vector3(
              Math.random() * range - range / 2,
              Math.random() * range * 1.5,
              1 + (i / 10 - 180)
            )
            if (rainy_sw == 2) {
              // 定义雨滴以多快的速度落下,纵向运动速度的范围是0.1～0.3
              particle.velocityY = (0.1 + Math.random() / 5) - 0.1;
              // 定义粒子（雨滴）如何水平移动,横向运动速度的范围是-0.16～+0.16
              particle.velocityX = ((Math.random() - 0.5) / 3) - 0.05;
            } else {
              particle.velocityY = 0.15 + Math.random() / 5;
              particle.velocityX = (Math.random() - 0.5) / 3;
            }
            geom.vertices.push(particle);
          }
          cloud = new THREE.Points(geom, material);
          cloud.sortParticles = true;
          cloud.name = name;
          scene.add(cloud);
        }
        // 添加火焰
        function initFlame() {
          var texture = new THREE.TextureLoader().load("assets/textures/particles/flamex.png");
          //sprite材质
          var material = new THREE.SpriteMaterial({
            //以canvas作为纹理
            map: texture,
            //混合度 加法混合
            blending: THREE.AdditiveBlending
          });
          //循环1000  添加粒子
          for (var i = 0; i < 2000; i++) {
            var particle = new THREE.Sprite(material);
            initParticle(particle, i);
            krq.add(particle);
            krq.name = "particles_flame";
          }
          scene.add(krq);
        }
        /**
         * 粒子 延迟发散
         * @param particle
         * @param delay
         */
        function initParticle(particle, delay) {
          particle.position.set(0, Math.random() + 12, 0);
          particle.scale.x = particle.scale.y = Math.random() * 13;
          //下面是一系列的动画
          var xx = Math.random() * 40 - 20;
          var yy = Math.cos((Math.PI / 100) * xx) * 80;
          //位移
          new TWEEN.Tween(particle.position)
            .delay(delay)
            .to({
              x: xx,
              y: yy,
              z: Math.random() * 40 - 20
            }, 2000)
            .onComplete(function() {
              initParticle(particle, delay);
            })
            .start();
          // 大小
          new TWEEN.Tween(particle.scale)
            .delay(delay)
            .to({
              x: 0.01,
              y: 0.01
            }, 1000)
            .start();
        }
        // 创建圆仓大
        function createRoundGeometryBasicMaterialMax() {
          var objLoader = new THREE.OBJLoader();
          objLoader.load('assets/textures/particles/gong001.obj', function(obj) {
            var mesh = obj.children[0];
            // mesh.rotateZ(Math.PI);
            mesh.material = new THREE.MeshBasicMaterial({
              map: new THREE.TextureLoader().load('assets/textures/particles/d001.png'),
              transparent: true,
              side: THREE.DoubleSide,
              clipIntersection: true,
            });
            mesh.rotateZ(Math.PI);
            mesh.position.set(-40, 36, -105);
            for (let i = 0; i < 2; i++) {
              for (let j = 0; j < 3; j++) {
                var mc = mesh.clone();
                mc.translateX(i * 28);
                mc.translateZ(j * 20);
                scene.add(mc);
              }
            }
          });
        }
        // 创建圆仓小
        function createRoundGeometryBasicMaterialMin() {
          var objLoader = new THREE.OBJLoader();
          objLoader.load('assets/textures/particles/002.obj', function(obj) {
            var mesh = obj.children[0];
            mesh.material = new THREE.MeshBasicMaterial({
              map: new THREE.TextureLoader().load('assets/textures/particles/002.png'),
              transparent: true,
              side: THREE.DoubleSide,
              clipIntersection: true,
            });
            mesh.rotateZ(Math.PI);
            mesh.position.set(-40, 20, -19);
            for (let i = 0; i < 2; i++) {
              for (let j = 0; j < 6; j++) {
                var mc = mesh.clone();
                mc.translateX(i * 28);
                mc.translateZ(j * 24);
                scene.add(mc);
              }
            }
          });
        }
        // 创建围栏
        function crateWall() {
          var objLoader = new THREE.OBJLoader();
          objLoader.load('assets/textures/particles/wall.obj', function(obj) {
            obj.scale.set(0.98, 0.6, 1);
            var texLan = new THREE.TextureLoader().load('assets/textures/particles/lan2.png');
            // 纹理重复
            texLan.wrapS = THREE.RepeatWrapping;
            texLan.wrapT = THREE.RepeatWrapping;
            texLan.repeat.set(40, 1);
            obj.children[0].material = new THREE.MeshBasicMaterial({
              side: THREE.DoubleSide,
              map: texLan,
              transparent: true,
            });
            obj.children[1].material = new THREE.MeshBasicMaterial({
              map: new THREE.TextureLoader().load('assets/textures/particles/door.png'),
              side: THREE.DoubleSide,
              transparent: true,
            });
            scene.add(obj)
          });
        }
        // 创建房屋
        function createBoxGeometryBasicMaterial() {
          var objLoader = new THREE.OBJLoader();
          objLoader.load('assets/textures/particles/003.obj', function(obj) {
            var mesh = obj.children[0];
            mesh.material = new THREE.MeshBasicMaterial({
              map: new THREE.TextureLoader().load('assets/textures/particles/003.png'),
            });
            mesh.scale.set(1.3, 1.4, 1.5);
            mesh.position.set(11, 0, -85);
            for (let i = 0; i < 2; i++) {
              for (let j = 0; j < 3; j++) {
                var mc = mesh.clone();
                mc.translateX(i * 52);
                mc.translateZ(j * 83);
                scene.add(mc);
              }
            }
          });
        }
        /**
         * 创建地面并添加材质
         * wrapS属性定义的是纹理沿x轴方向的行为，而warpT属性定义的是纹理沿y轴方向的行为。
         * Three.js为这些属性提供了如下两个选项：
         * ·THREE.RepeatWrapping允许纹理重复自己。
         * ·THREE.ClampToEdgeWrapping是属性的默认值。
         * 属性值为THREE.ClampToEdgeWrapping时，那么纹理的整体不会重复，只会重复纹理边缘的像素来填满剩下的空间。
         */
        function createPlaneGeometryBasicMaterial() {
          var cubeMaterial = new THREE.MeshStandardMaterial({
            map: textureLoader.load("assets/textures/particles/floor3.png"),
            transparent: true,
            side: THREE.DoubleSide,
          });
          // 创建地平面并设置大小
          var planeGeometry = new THREE.PlaneGeometry(270, 260);
          var plane = new THREE.Mesh(planeGeometry, cubeMaterial);
          // 设置平面位置并旋转
          plane.rotation.x = -0.5 * Math.PI;
          plane.position.y = -0.1;
          scene.add(plane);
        }
        function creatRoadSurface() {
          var textureLoader = new THREE.TextureLoader();
          var geometry = new THREE.PlaneGeometry(24, 280);
          var texture = textureLoader.load('assets/textures/particles/road2.png');
          texture.wrapS = THREE.RepeatWrapping;
          texture.wrapT = THREE.RepeatWrapping;
          texture.repeat.set(1, 10);
          var material = new THREE.MeshBasicMaterial({
            map: texture,
            side: THREE.DoubleSide,
          });
          var mesh = new THREE.Mesh(geometry, material);
          scene.add(mesh);
          mesh.rotateX(-Math.PI / 2);
          mesh.position.x = 105.5
        }
        function renderScene() {
          orbit.update(); // 拖动
          TWEEN.update();
          if (cloud) {
            var vertices = cloud.geometry.vertices;
            vertices.forEach(function(v) {
              v.y = v.y - (v.velocityY);
              v.x = v.x - (v.velocityX);
              if (v.y <= 0) v.y = 60;
              if (v.x <= -20 || v.x >= 20) v.velocityX = v.velocityX * -0.8;
            });
            cloud.geometry.verticesNeedUpdate = true;
          }
          // 使用requestAnimationFrame函数进行渲染
          requestAnimationFrame(renderScene);
          renderer.render(scene, camera);
        }
        // 渲染的场景
        renderer.render(scene, camera);
      }
      window.onload = init;
      // 随着窗体的变化修改场景
      function onResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }
      // 监听窗体调整大小事件
      window.addEventListener('resize', onResize, false);
    </script>
  </body>
</html>


4，源码和模型

需要完整代码、模型或者其他源码，请进入博客首页查看其他文章或者留言

文章标签：
物联网平台
数据可视化
物联网
关键词：
物联网平台可视化
threejs物联网平台
threejs物联网平台工厂3d可视化
物联网平台3d
物联网平台工厂
相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台，通过云产品流转到函数计算FC，调用钉钉群机器人API，实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品，7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前，请先开通下方两个云产品，让学习更流畅： IoT物联网平台：https://iot.console.aliyun.com/ LinkWAN物联网络管理平台：https://linkwan.console.aliyun.com/service-open
zuoben
目录
相关文章
源码星辰
|
6月前
|
人工智能 监控 数据可视化
AI、物联网、可视化智慧工地云平台源码
智慧工地是聚焦工程施工现场，紧紧围绕人、机、料、法、环等关键要素，综合运用物联网、云计算、大数据、移动计算和智能设备等软硬件信息技术，与施工生产过程相融合。
源码星辰
82 2
zuoben
|
数据可视化 物联网
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
zuoben
949 15
Threejs物联网，养殖场3D可视化（三）模型展示，轨道控制器设置，模型沿着路线运动，模型添加边框，自定义样式显示标签，点击模型获取信息
源码星辰
|
6月前
|
人工智能 监控 数据可视化
Springcloud可视化物联网智慧工地云SaaS平台源码 支持二开和私有化部署
Springcloud可视化物联网智慧工地云SaaS平台源码 支持二开和私有化部署
源码星辰
194 1
源码星辰
|
6月前
|
人工智能 数据可视化 安全
Java带可视化数据大屏的物联网智慧工地系统源码
通过现场AI智能视频监控、临时设施动态管理，实时检测场地空间、资源、设施的运行状况，及时发现场地安全隐患，确保为工人营造一个安全、文明的场地作业环境。
源码星辰
89 0
源码星辰
|
监控 数据可视化 物联网
Java可视化物联网智慧工地SaaS平台源码：人脸识别考勤
基于微服务+Java+Spring Cloud Vue +UniApp +MySql实现的智慧工地云平台源码
源码星辰
132 1
漏刻有时
|
数据采集 JSON 监控
Zabbix物联网可视化开发文档
Zabbix物联网可视化开发文档
漏刻有时
141 1
AIoT科技物语
|
传感器 监控 数据可视化
IoT Studio 物联网可视化应用搭建开发实践
阿里云 IoT Studio 物联网可视化应用搭建开发实践
AIoT科技物语
23588 4
IoT Studio 物联网可视化应用搭建开发实践
zuoben
|
数据可视化 物联网
Threejs物联网，工厂3D可视化，加载模型，水流监测，标签动态数据展示
Threejs物联网，工厂3D可视化，加载模型，水流监测，标签动态数据展示
zuoben
936 15
Threejs物联网，工厂3D可视化，加载模型，水流监测，标签动态数据展示
zuoben
|
数据可视化 物联网
Threejs物联网，养殖场3D可视化（二）
Threejs物联网，养殖场3D可视化（二）
zuoben
406 15
Threejs物联网，养殖场3D可视化（二）
zuoben
|
数据可视化 物联网
Threejs物联网，养殖场3D可视化（一）
Threejs物联网，养殖场3D可视化（一）
zuoben
478 15
Threejs物联网，养殖场3D可视化（一）

物联网

热门文章

最新文章

  • 1
    物联网+智慧城建，智慧城市建设的新动能
  • 2
    PostgreSQL "物联网"应用 - 1 实时流式数据处理案例(万亿每天)
  • 3
    吃『派』那些事儿——阿里云物联网平台树莓派实战集锦
  • 4
    AliOS Things 3.0应用笔记：http client简单应用
  • 5
    NB-IOT物联网平台是如何工作的
  • 6
    【云栖大会】AliOS Things宣布开源，支持物联网设备快速上云
  • 7
    用51单片机做一个物联网温度计+远程开关
  • 8
    全新版本MongoDB数据存储席卷物联网
  • 9
    【阿里云IoT+YF3300】2.阿里云IoT云端通信Alink协议介绍
  • 10
    在ESP32上使用umqtt接入阿里云物联网平台
  • 1
    「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
    27
  • 2
    java小工具util系列2：字符串工具
    123
  • 3
    java小工具util系列1：日期和字符串转换工具
    37
  • 4
    java小工具util系列4：基础工具代码(Msg、PageResult、Response、常量、枚举)
    33
  • 5
    使用java在未知表字段情况下通过sql查询信息
    18
  • 6
    「Mac畅玩鸿蒙与硬件31」UI互动应用篇8 - 自定义评分星级组件
    34
  • 7
    怎么区分5G卡片开启的网络类型是NSA（非独立组网）还是SA（独立组网）
    16
  • 8
    字节流和字符流有哪些区别
    11
  • 9
    SpringCloudGateway网关服务实现文件上传功能
    23
  • 10
    后端MultipartFile接收文件转Base64
    17

    • 相关产品

  • 物联网平台
    文档详情 产品详情

    • 相关课程

    更多
  • 大咖带你聊物联网
  • 基于STM32的端到端物联网全栈开发
  • 走进阿里云物联网
  • 阿里云物联网平台专题介绍
  • 物联网平台开发全栈教程
  • 物联网平台云上开发

    • 相关电子书

    更多
  • 美的物联平台的云上实践与应用--- 人机新世代战略下的智能化探索
  • 使用Link Develop 进行物联网一站式开发
  • 阿里云Link物联网平台全链路的一站式开发

    • 相关实验场景

    更多
  • 【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
  • 奥运时刻！零代码生成奥运风格AI写真。
  • 基于函数计算一键部署掌上游戏机
  • 温控器设备接入IoT物联网平台与数据管理实践
  • 使用物联网平台远程管理运维设备
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    无影云桌面