devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

three.js+vue智慧城市web3d污水厂数字孪生_vue2+threejs的数组孪生3d

作者：小舞很执着 | 2024-07-29 01:13:27

赞

踩

vue2+threejs的数组孪生3d

three.js+vue智慧城市blender建模web3d污水厂数字孪生源码

下面是三维场景主页面逻辑代码：

  1. <template>
  2.   <div class="whole">
  3.     <!-- threejs画布 -->
  4.     <div id="threejs" ref="threejs"></div>
  5.     <!-- 污水厂模型加载进度条 -->
  6.     <a-progress
  7.       :stroke-color="{
  8.         from: '#00F5FF',
  9.         to: '#4169E1',
  10.       }"
  11.       :percent="0.0"
  12.       trailColor="#E8E8E8"
  13.       status="active"
  14.       class="progress"
  15.     />
  16.     <!-- 标签组件 -->
  17.     <Label></Label>
  18.     <!-- 巡检数据展示面板-->
  19.     <div class="inspectPanel a-fadein" v-show="inspectPanelShow">
  20.       <div class="panelTitle" id="panelTitle">曝气池</div>
  21.       <div class="panelData">
  22.         <div class="left">
  23.           <div class="leftTitle">介绍</div>
  24.           <div class="segment"></div>
  25.           <div class="describe" id="describe"></div>
  26.         </div>
  27.         <div class="right">
  28.           <div class="rightTitle">数据记录</div>
  29.           <div class="segment"></div>
  30.           <div class="record">
  31.             <div class="main" id="panelData"></div>
  32.           </div>
  33.         </div>
  34.       </div>
  35.     </div>
  36.     <!-- 巡检中 返回和状态按钮 -->
  37.     <div class="inspect" v-show="props['selectedMenu'] === 'inspect'">
  38.       <div class="common" @click="endInspect">
  39.         <div class="return_icon" style=""></div>
  40.         返回
  41.       </div>
  42.       <div class="common" @click="inspectStateChange">
  43.         <div :class="inspectState ? 'stop_icon' : 'continue_icon'"></div>
  44.         {{ inspectState ? '暂停' : '继续' }}
  45.       </div>
  46.     </div>
  47.     <!-- 巡检进度条 -->
  48.     <progressBar v-show="props['selectedMenu'] === 'inspect'" :schedule="schedule" :inspectState="inspectState" @progressBarChange="progressBarChange"></progressBar>
  49.  
  50.     <!-- 巡检速度控制条 -->
  51.     <speedControlBar v-show="props['selectedMenu'] === 'inspect'" :speed="speed" :inspectState="inspectState" @controlBarChange="controlBarChange"></speedControlBar>
  52.   </div>
  53. </template>
  54.  
  55. <script setup>
  56. import { ref, onMounted, watch } from 'vue';
  57. // 引入threejs
  58. import * as THREE from 'three';
  59. // 基础配置文件——场景、灯光、相机等
  60. import { scene, renderer, css2DRender, camera, controls } from './base/index.js';
  61. // 添加污水厂模型函数
  62. import { addSewageModel } from './addSewageModel/index.js';
  63. // 添加人物模型函数
  64. import { addPeopleModel, WalkAction } from './addPeopleModel/index.js';
  65. // 引入tween.js,用来创建动画
  66. import TWEEN from '@tweenjs/tween.js';
  67. // 引入标签组件
  68. import Label from './label/index.vue';
  69. // 引入人物2D标签、CSS2D渲染器、标签初始化函数和建筑标签组对象
  70. import { css2DPeopleLabel, initLabel, buildLabelGroup } from './label/index.js';
  71. // 引入创建水面函数
  72. import { createWaterPlane, waterPlaneGroup } from './waterPlane/index.js';
  73. import { inspectPathArr, inspectIndex, inspectPathIndex, inspectState, inspectPanelShow, inspectLinePointGroup, openInspection, inspectionParams } from './inspection/index.js';
  74. import progressBar from './progressBar/index.vue';
  75. import speedControlBar from './speedControlBar/index.vue';
  76. // 引入RGB加载器
  77. import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
  78. import { setPoolMaterial } from './poolMaterial/index';
  79. import Stats from 'three/examples/jsm/libs/stats.module.js';
  80. // 首页传值
  81. const props = defineProps([
  82.   'craftAnimationStatus', // 工艺动画状态，为true时开启播放相应的工艺动画
  83.   'craftAnimationType', // 工艺动画类型，根据此值决定动画的类型
  84.   'selectedMenu', // 首页底部菜单按钮选中项
  85. ]);
  86. // 传递事件
  87. const emit = defineEmits(['closeInspect', 'craftAnimationEnd']);
  88.  
  89. // threejs容器
  90. const threejs = ref();
  91. // 污水厂模型
  92. let sewageModel = null;
  93. // 人物模型
  94. let people = null;
  95. // 人物动画播放器
  96. let animationMixer = null;
  97. // 当前巡检进度百分比值
  98. let schedule = ref(0);
  99. // 巡检的速度
  100. let speed = ref(0);
  101.  
  102. let stats;
  103. onMounted(async () => {
  104.   //创建stats对象
  105.   stats = new Stats();
  106.   threejs.value.appendChild(stats.domElement);
  107.  
  108.   threejs.value.appendChild(renderer.domElement);
  109.   threejs.value.appendChild(css2DRender.domElement);
  110.   const rgbeLoader = new RGBELoader();
  111.   // 环境贴图
  112.   let envMap = await rgbeLoader.loadAsync('./envMap.hdr');
  113.   createEnvironment(envMap);
  114.   // 异步加载污水厂模型
  115.   sewageModel = await addSewageModel(envMap);
  116.   // 添加人物模型、人物动画播放器
  117.   const { peopleGroup, mixer } = await addPeopleModel();
  118.   people = peopleGroup;
  119.   // 相机添加到人物模型中
  120.   people.add(camera);
  121.   animationMixer = mixer;
  122.   // 允许人物模型产生阴影
  123.   people.castShadow = true;
  124.   scene.add(sewageModel, people, inspectLinePointGroup);
  125.   // 创建水面
  126.   createWaterPlane(sewageModel, envMap);
  127.   // 设置水池材质
  128.   setPoolMaterial(sewageModel);
  129.   // 开始循环渲染
  130.   render();
  131.   // 播放首次进入动画
  132.   eventAnimation();
  133. });
  134.  
  135. watch(
  136.   () => props['craftAnimationStatus'],
  137.   (e) => {
  138.     if (e) {
  139.       // 重置水面透明度
  140.       waterPlaneGroup.children.map((obj) => {
  141.         obj.material.uniforms.alpha.value = 1.0;
  142.       });
  143.       craftAnimation(props['craftAnimationType']);
  144.     }
  145.   }
  146. );
  147. watch(
  148.   () => props['selectedMenu'],
  149.   (e) => {
  150.     // 巡检开启
  151.     if (e === 'inspect') {
  152.       // 相机角度重置
  153.       camera.rotation.x = -0.9662198328141542;
  154.       camera.rotation.y = 0.0004725006116027576;
  155.       camera.rotation.z = 0.0006839146449353786;
  156.       // 相机位置重置
  157.       camera.position.set(0.103, 179.349, 123.908);
  158.       // 相机观察点重置
  159.       camera.lookAt(0, 1.7, 0);
  160.       // 设置相机位置在人物模型后方
  161.       camera.position.set(0, -5, -1);
  162.       // camera.position.set(0, 1.4, -1);
  163.       // 禁止相机控件旋转平移和缩放
  164.       controls.enableRotate = false;
  165.       controls.enablePan = false;
  166.       controls.enableZoom = false;
  167.       controls.target.set(0, 1.7, 0);
  168.       controls.update();
  169.       // 每次开启巡检时，将巡检项目索引和项目索引都重置，从第一个项目开始巡检
  170.       inspectIndex.value = 0;
  171.       inspectPathIndex.value = 0;
  172.       // 人物步行动画开始播放
  173.       WalkAction.play();
  174.       // 人物标签开启显示
  175.       css2DPeopleLabel.visible = true;
  176.       // 巡检标线开启显示
  177.       inspectLinePointGroup.children[inspectIndex.value].visible = true;
  178.       // 建筑物标签关闭显示
  179.       buildLabelGroup.children.map((item) => {
  180.         item.visible = false;
  181.       });
  182.     } else if (e !== 'craft') {
  183.       // 相机角度重置
  184.       camera.rotation.x = -0.9662198328141542;
  185.       camera.rotation.y = 0.0004725006116027576;
  186.       camera.rotation.z = 0.0006839146449353786;
  187.       // 相机位置重置
  188.       camera.position.set(0.103, 179.349, 123.908);
  189.       // 相机观察点重置
  190.       camera.lookAt(0, 0, 0);
  191.       controls.target.set(0, 0, 0);
  192.       controls.update();
  193.       // 重置水面透明度水面颜色
  194.       waterPlaneGroup.children.map((obj) => {
  195.         obj.material.uniforms.alpha.value = 1.0;
  196.         obj.material.uniforms.waterColor.value = obj.color;
  197.       });
  198.     }
  199.   }
  200. );
  201.  
  202. const clock = new THREE.Clock();
  203. // 设置渲染帧率30FPS,默认情况下requestAnimationFrame在60帧左右，控制帧率优化性能
  204. const FPS = 30;
  205. // 间隔多长时间渲染一次
  206. const renderT = 1 / FPS;
  207. // 执行一次renderer.render，timeS重新置0
  208. let timeS = 0;
  209. // 渲染循环
  210. function render() {
  211.   stats.update();
  212.   // 循环渲染
  213.   renderer.render(scene, camera);
  214.   // 获取两帧渲染间隔时间
  215.   const T = clock.getDelta();
  216.   timeS = timeS + T;
  217.   animationMixer.update(T);
  218.   if (timeS > renderT) {
  219.     TWEEN.update();
  220.     // renderer.render每执行一次，timeS置0
  221.     timeS = 0;
  222.     // css2D标签渲染
  223.     css2DRender.render(scene, camera);
  224.     // 水面波纹动画渲染
  225.     waterPlaneGroup.children.map((item) => {
  226.       item.material.uniforms['time'].value += T / 6;
  227.     });
  228.  
  229.     // 巡检时标线和拐点动画
  230.     if (inspectLinePointGroup.children[inspectIndex.value] && props['selectedMenu'] === 'inspect') {
  231.       inspectLinePointGroup.children[inspectIndex.value].children.map((item) => {
  232.         if (item.name === '标线') {
  233.           item.material.map.offset.x -= 0.03;
  234.         } else if (item.name === '拐点') {
  235.           item.rotation.y += 0.02;
  236.         }
  237.       });
  238.     }
  239.     // 巡检动画
  240.     if (props['selectedMenu'] === 'inspect' && inspectState.value) {
  241.       openInspection(people, controls);
  242.       schedule.value = inspectPathIndex.value;
  243.       // 巡检速度不断更新
  244.       if (inspectPathArr[inspectIndex.value]) {
  245.         speed.value = inspectPathArr[inspectIndex.value].speed;
  246.       }
  247.       console.log('巡检动画');
  248.     }
  249.   }
  250.   requestAnimationFrame(render);
  251. }
  252. // 巡检状态变化事件
  253. function inspectStateChange() {
  254.   // 巡检的状态切换
  255.   inspectState.value = !inspectState.value;
  256.   // 关闭巡检数据面板的显示
  257.   inspectPanelShow.value = false;
  258.   if (inspectState.value) {
  259.     // 人物动画开始播放
  260.     WalkAction.play();
  261.     if (inspectPathIndex.value >= 100) {
  262.       // 巡检项目索引加1
  263.       inspectIndex.value += 1;
  264.       // 巡检标记线组对象开启显示
  265.       inspectLinePointGroup.children.map((item, index) => {
  266.         if (index === inspectIndex.value) {
  267.           item.visible = true;
  268.         } else {
  269.           item.visible = false;
  270.         }
  271.       });
  272.     }
  273.   } else {
  274.     // 人物动画停止播放
  275.     WalkAction.stop();
  276.   }
  277.   if (inspectPathIndex.value >= 100) {
  278.     // 巡检项目路径索引重新置零
  279.     inspectPathIndex.value = 0;
  280.   }
  281.   // 巡检项目索引值超过巡检路径数组时，表示已经巡检完最后一项，调用endInspect()结束巡检
  282.   if (inspectIndex.value > inspectPathArr.length - 1) {
  283.     endInspect();
  284.   }
  285. }
  286. // 结束巡检
  287. function endInspect() {
  288.   // 人物位置重置
  289.   people.position.set(0, 0, 0);
  290.   // 人物角度重置
  291.   people.rotation.y = 0;
  292.   people.rotation.x = 0;
  293.   people.rotation.z = 0;
  294.   // 相机位置重置
  295.   camera.position.set(0.103, 179.349, 123.908);
  296.   // 开启相机控件旋转平移和缩放
  297.   controls.enableRotate = true;
  298.   controls.enablePan = true;
  299.   controls.enableZoom = true;
  300.   // 相机控件观察点重置
  301.   controls.target.set(0, 1.7, 0);
  302.   // 相机控件更新
  303.   controls.update();
  304.   // 巡检状态重置为true
  305.   inspectState.value = true;
  306.   // 关闭巡检数据面板显示
  307.   inspectPanelShow.value = false;
  308.   // 人物标签隐藏显示
  309.   css2DPeopleLabel.visible = false;
  310.   // 巡检标记线组对象隐藏显示
  311.   inspectLinePointGroup.children.map((item) => {
  312.     item.visible = false;
  313.   });
  314.   // 建筑物标签开启显示
  315.   buildLabelGroup.children.map((item) => {
  316.     item.visible = true;
  317.   });
  318.   // 巡检速度重置
  319.   inspectPathArr.map((item) => {
  320.     item.speed = inspectionParams[item.name].speed;
  321.   });
  322.  
  323.   // 关闭巡检
  324.   emit('closeInspect');
  325. }
  326. // 巡检进度条变化事件
  327. function progressBarChange(e) {
  328.   inspectPathIndex.value = e;
  329. }
  330. // 巡检速度条变化事件
  331. function controlBarChange(speed) {
  332.   inspectPathArr[inspectIndex.value].speed = 0.4 * (speed * 0.01);
  333. }
  334. // 工艺动画
  335. function craftAnimation(type) {
  336.   // 重置水面透明度水面颜色
  337.   waterPlaneGroup.children.map((obj) => {
  338.     obj.material.uniforms.alpha.value = 1.0;
  339.     obj.material.uniforms.waterColor.value = obj.color;
  340.   });
  341.   // 禁止相机控件旋转平移和缩放
  342.   // controls.enableRotate = false;
  343.   // controls.enablePan = false;
  344.   // controls.enableZoom = false;
  345.   // 精确曝气动画
  346.   if (type === 'aeration') {
  347.     const name = '南北生物池水面';
  348.     // 水面世界坐标位置
  349.     const position = sewageModel.getObjectByName(name).getWorldPosition(new THREE.Vector3());
  350.     // 开启动画，视角切换到水面处
  351.     new TWEEN.Tween(camera.position)
  352.       .to({ x: -113.85, y: 7.67, z: 43.59 }, 1500)
  353.       .easing(TWEEN.Easing.Sinusoidal.InOut)
  354.       .onUpdate(() => {
  355.         controls.target.copy(new THREE.Vector3(-113, 2, 30));
  356.         controls.update();
  357.       })
  358.       // 动画执行完成后
  359.       .onComplete(() => {
  360.         // 获取水面模型
  361.         const waterPlane = waterPlaneGroup.getObjectByName(name);
  362.         // 加载气泡纹理
  363.         const texture = new THREE.TextureLoader().load('./bubbles.png');
  364.         // 球体(气泡)材质，map气泡贴图模仿气泡效果
  365.         const material = new THREE.MeshPhysicalMaterial({
  366.           map: texture,
  367.           color: '#fff',
  368.           transparent: true,
  369.           opacity: 0.6,
  370.         });
  371.         // 球体(气泡)组对象
  372.         const sphereGroup = new THREE.Group();
  373.         // 创建box3包围盒计算水面模型尺寸
  374.         const box3 = new THREE.Box3();
  375.         box3.expandByObject(waterPlane);
  376.         // 根据水面尺寸计算出球体(气泡)出现的范围
  377.         const x = ((box3.max.x - box3.min.x) / 2).toFixed(3) - '';
  378.         const z = ((box3.max.z - box3.min.z) / 2).toFixed(3) - '' - 0.1;
  379.         // 循环创建多个球体(气泡)
  380.         for (let i = 0; i <= 2000; i++) {
  381.           // 指定随机大小创建球形几何体
  382.           const sphere = new THREE.SphereGeometry(Math.random() * 0.03 + 0.05);
  383.           const mesh = new THREE.Mesh(sphere, material);
  384.           // 随机旋转一定角度
  385.           mesh.rotateX(Math.random() * Math.PI);
  386.           // 设置位置
  387.           mesh.position.copy(position);
  388.           // y值置空
  389.           mesh.position.y = 0;
  390.           // 随机在增加一定值，使气泡在不同的位置出现
  391.           mesh.position.x += Math.random() * (x - -x) + -x;
  392.           mesh.position.y += Math.random() * 2;
  393.           mesh.position.z += Math.random() * (z - -z) + -z;
  394.           // 随机气泡上升的速度值
  395.           mesh.speed = Math.random() * 0.04 + 0.04;
  396.           sphereGroup.add(mesh);
  397.         }
  398.         scene.add(sphereGroup);
  399.         // 此变量用作循环动画和销毁动画
  400.         let bubbleRiseAnimationId;
  401.         // 气泡上升动画
  402.         function bubbleRise() {
  403.           bubbleRiseAnimationId = requestAnimationFrame(bubbleRise);
  404.           sphereGroup.children.map((item) => {
  405.             item.position.y += item.speed;
  406.             if (item.position.y >= position.y) item.position.y = 0;
  407.           });
  408.         }
  409.         bubbleRise();
  410.         // 水面默认的透明度
  411.         let alpha = waterPlane.material.uniforms.alpha.value;
  412.         const color1 = new THREE.Color('#87CEFA');
  413.         const color2 = waterPlane.material.uniforms.waterColor.value;
  414.         // 此变量用作循环动画和销毁动画
  415.         let waterPlaneAnimationId;
  416.         // 水面逐渐透明动画
  417.         function waterPlaneTransparent() {
  418.           waterPlaneAnimationId = requestAnimationFrame(waterPlaneTransparent);
  419.           // 透明度大于0.3则不断降低透明度
  420.           if (alpha >= 0.3) {
  421.             alpha -= 0.01;
  422.             waterPlane.material.uniforms.alpha.value = alpha;
  423.             const newColor = color1.clone().lerp(color2.clone(), alpha);
  424.             waterPlane.material.uniforms.waterColor.value = newColor;
  425.           }
  426.           // 透明度小于0.3
  427.           else {
  428.             // 延迟一定秒数后移除气泡组对象
  429.             setTimeout(() => {
  430.               // scene.remove(sphereGroup);
  431.             }, 3000);
  432.             // 传递事件告知动画执行完毕
  433.             emit('craftAnimationEnd');
  434.             // 销毁水面透明动画和气泡上升动画
  435.             cancelAnimationFrame(waterPlaneAnimationId);
  436.             // cancelAnimationFrame(bubbleRiseAnimationId);
  437.           }
  438.         }
  439.         waterPlaneTransparent();
  440.       })
  441.       .start();
  442.   }
  443.   // 精确加药
  444.   if (type === 'dosing') {
  445.     const name = '东加药管2-2';
  446.     // 加药管位置
  447.     const position = sewageModel.getObjectByName(name).getWorldPosition(new THREE.Vector3());
  448.     // 将位置偏移一下到出水口
  449.     position.y -= 0.138;
  450.     position.z += 0.22;
  451.     // 开启Tweenjs动画，将视角切换到加药管处
  452.     new TWEEN.Tween(camera.position)
  453.       .to({ x: 57.16, y: 2.09, z: 6.53 }, 1500)
  454.       .easing(TWEEN.Easing.Sinusoidal.InOut)
  455.       .onUpdate(() => {
  456.         controls.target.copy(position);
  457.         controls.update();
  458.       })
  459.       // 视角切换完成后
  460.       .onComplete(() => {
  461.         // 创建一个位置数组，因为这个加药管有多个出水口，每个位置对应一个出水口
  462.         const posArr = [];
  463.         // 当前出水口位置先push到数组里去
  464.         posArr.push(position);
  465.         // 获取左侧出水口位置
  466.         for (let i = 1; i <= 4; i++) {
  467.           const pos = position.clone();
  468.           pos.x += i * 0.765;
  469.           posArr.push(pos);
  470.         }
  471.         // 获取右侧出水口位置
  472.         for (let i = 1; i <= 4; i++) {
  473.           const pos = position.clone();
  474.           pos.x -= i * 0.765;
  475.           posArr.push(pos);
  476.         }
  477.         // 创建球形几何体，模仿水滴
  478.         const sphereGeometry = new THREE.SphereGeometry(0.005, 16, 16);
  479.         const sphereMaterial = new THREE.MeshPhongMaterial({
  480.           color: '#afeeee',
  481.         });
  482.         // 创建球体数组，存储所有的球体
  483.         const sphereArr = [];
  484.         // 每个出水管球体数量
  485.         const numSpheres = 300;
  486.         // 遍历posArr位置数组，给每个出水管创建球体
  487.         posArr.map((pos) => {
  488.           for (let i = 0; i < numSpheres; i++) {
  489.             const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  490.             // 默认将其隐藏起来，因为随机高度球体会高于出水管
  491.             sphere.visible = false;
  492.             // 赋值出水管位置
  493.             sphere.position.copy(pos);
  494.             // 球体高度在加上一个随机值
  495.             sphere.position.y += Math.random() * 2; // 不同的初始高度
  496.             // 设置球体下落速度
  497.             sphere.velocity = Math.random() * 0.02 + 0.01; // 随机下落速度
  498.             sphereArr.push(sphere);
  499.             scene.add(sphere);
  500.           }
  501.         });
  502.         // 此变量用作循环动画和销毁动画
  503.         let animationFrameId1;
  504.         function animation1() {
  505.           animationFrameId1 = requestAnimationFrame(animation1);
  506.           // 遍历球体数组
  507.           sphereArr.forEach((sphere) => {
  508.             if (sphere.position.y <= position.y) {
  509.               sphere.visible = true;
  510.             }
  511.             sphere.position.y -= sphere.velocity;
  512.             if (sphere.position.y <= 0.3) {
  513.               // 当球体下落到一定位置时
  514.               sphere.position.y = position.y; // 重新置于顶端
  515.             }
  516.           });
  517.         }
  518.         animation1();
  519.  
  520.         const waterPlane = waterPlaneGroup.getObjectByName('东西生物池-东水面1');
  521.         let alpha = waterPlane.material.uniforms.alpha.value;
  522.  
  523.         const color1 = new THREE.Color('#87CEFA');
  524.         const color2 = waterPlane.material.uniforms.waterColor.value;
  525.         // 此变量用作循环动画和销毁动画
  526.         let animationFrameId2;
  527.         function animation2() {
  528.           animationFrameId2 = requestAnimationFrame(animation2);
  529.           if (alpha >= 0.5) {
  530.             alpha -= 0.006;
  531.             waterPlane.material.uniforms.alpha.value = alpha;
  532.             const newColor = color1.clone().lerp(color2.clone(), alpha);
  533.             waterPlane.material.uniforms.waterColor.value = newColor;
  534.           } else {
  535.             emit('craftAnimationEnd');
  536.             cancelAnimationFrame(animationFrameId2);
  537.           }
  538.         }
  539.         animation2();
  540.       })
  541.       .start();
  542.   }
  543.   // 污泥回流
  544.   if (type === 'sludge') {
  545.     // 二沉池模型名称数组
  546.     const sinkPoolNameArr = [
  547.       '二沉池3水面',
  548.       '二沉池3水面001',
  549.       '二沉池4水面',
  550.       '二沉池4水面001',
  551.       // "初沉池水面1",
  552.       // "初沉池水面1001",
  553.     ];
  554.     // 生物池模型名称数组
  555.     const organismPoolNameArr = ['南北生物池水面', '东西生物池-东水面1', '东西生物池-东水面2', '东西生物池-西水面1', '东西生物池-西水面2'];
  556.  
  557.     // 获取二沉池模型
  558.     const sinkPoolArr = [];
  559.     sinkPoolNameArr.map((name) => {
  560.       sinkPoolArr.push(waterPlaneGroup.getObjectByName(name));
  561.     });
  562.  
  563.     // 获取生物池模型
  564.     const organismPoolArr = [];
  565.     organismPoolNameArr.map((name) => {
  566.       const organismPool = waterPlaneGroup.getObjectByName(name);
  567.       organismPool.material.uniforms.alpha.value = 0.3;
  568.       organismPool.visible = false;
  569.       organismPool.userData.y = organismPool.clone().position.y;
  570.       organismPool.position.y = 0;
  571.       organismPoolArr.push(organismPool);
  572.     });
  573.  
  574.     //  x: -10.84, y: 289.89, z: 276.17
  575.     // 开启动画，视角切换到整个污水厂
  576.     new TWEEN.Tween(camera.position)
  577.       .to({ x: 100, y: 100, z: 180 }, 1500)
  578.       .easing(TWEEN.Easing.Sinusoidal.InOut)
  579.       .onUpdate(() => {
  580.         controls.target.set(100, 0, -30);
  581.         controls.update();
  582.       })
  583.       .onComplete(() => {
  584.         // 此变量用作循环动画和销毁动画
  585.         let waterPlaneAnimationId;
  586.         // 水面逐渐透明动画
  587.         function waterPlaneTransparent() {
  588.           waterPlaneAnimationId = requestAnimationFrame(waterPlaneTransparent);
  589.           sinkPoolArr.map((item) => {
  590.             let alpha = item.material.uniforms.alpha.value;
  591.             // 透明度大于0.3则不断降低透明度
  592.             if (alpha >= 0.3) {
  593.               alpha -= 0.01;
  594.               item.material.uniforms.alpha.value = alpha;
  595.             }
  596.           });
  597.  
  598.           if (sinkPoolArr[sinkPoolArr.length - 1].material.uniforms.alpha.value < 0.3) {
  599.             // 传递事件告知动画执行完毕
  600.             // emit("craftAnimationEnd");
  601.             cancelAnimationFrame(waterPlaneAnimationId);
  602.             waterLevelRise();
  603.           }
  604.         }
  605.         waterPlaneTransparent();
  606.  
  607.         // 此变量用作循环动画和销毁动画
  608.         let waterLevelRiseAnimationId;
  609.         function waterLevelRise() {
  610.           waterLevelRiseAnimationId = requestAnimationFrame(waterLevelRise);
  611.           organismPoolArr.map((item) => {
  612.             item.visible = true;
  613.             const yPos = item.userData.y;
  614.             let alpha = item.material.uniforms.alpha.value;
  615.             if (item.position.y < yPos) {
  616.               item.position.y += 0.01;
  617.             }
  618.  
  619.             if (alpha < 1) {
  620.               alpha += 0.02;
  621.               item.material.uniforms.alpha.value = alpha;
  622.             }
  623.  
  624.             if (item.position.y >= yPos && alpha >= 1) {
  625.               // 传递事件告知动画执行完毕
  626.               emit('craftAnimationEnd');
  627.               cancelAnimationFrame(waterLevelRiseAnimationId);
  628.             }
  629.           });
  630.         }
  631.       })
  632.       .start();
  633.   }
  634. }
  635. // 首次进入动画
  636. function eventAnimation() {
  637.   new TWEEN.Tween(camera.position)
  638.     .to({ x: 0.103, y: 179.349, z: 123.908 }, 2000)
  639.     .easing(TWEEN.Easing.Sinusoidal.InOut)
  640.     .onUpdate(() => {
  641.       controls.target.set(0, 0, 0);
  642.       controls.update();
  643.     })
  644.     .onComplete(() => {
  645.       // 初始化标签
  646.       initLabel(sewageModel);
  647.       // 将人物标签添加到人物模型中
  648.       people.children[0].add(css2DPeopleLabel);
  649.       // 设置位置在人物模型头顶
  650.       css2DPeopleLabel.position.set(0, 2.2, 0);
  651.       // 设置合适大小
  652.       css2DPeopleLabel.scale.set(0.1, 0.1, 0.1);
  653.       // 人物标签默认隐藏显示
  654.       css2DPeopleLabel.visible = false;
  655.     })
  656.     .start();
  657. }
  658. function createEnvironment(texture) {
  659.   // scene.environment = texture;
  660.   // hdr作为环境贴图生效，设置.mapping为EquirectangularReflectionMapping
  661.   texture.mapping = THREE.EquirectangularReflectionMapping;
  662.   // 创建一个巨大球体作为整个天空环境
  663.   const sphere = new THREE.SphereGeometry(1000, 512, 512);
  664.   const material = new THREE.MeshBasicMaterial({
  665.     map: texture,
  666.     side: THREE.DoubleSide,
  667.   });
  668.   const mesh = new THREE.Mesh(sphere, material);
  669.   mesh.position.y -= 100;
  670.   scene.add(mesh);
  671. }
  672. </script>
  673. <style lang='less'>
  674. @import './index.less';
  675. </style>

需要全部完整案例源码，访问百度网盘：

链接：https://pan.baidu.com/s/1Ib5nq3MueA-6-OfnVvmqJg 
提取码：pgml

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/896536
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号