水库大坝三维模型的开发和使用3Dmax篇

已于 2024-12-26 11:17:40 修改
阅读量348 收藏 1
点赞数 2
文章标签： 3dmax three.js vue3.0
于 2024-12-25 23:18:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/github_37847992/article/details/144730432
版权

成果图
在这里插入图片描述
开发过程

  • 工具插件three.js
  • 先加载模型
  • 做水体衔接
  • 水位测量标尺
  • 水位标记
  • 断面标记
  • 大坝监测点打点

上代码，技术交流+V: bloxed

<template>
  <div class="box w100 h100">
    <el-row :gutter="20"  v-loading="loading"
      element-loading-background="rgba(122, 122, 122, 0.8)"
        element-loading-text="模型加载中...">
      <el-col :span="24" class="h100" ref="boxRef">
        <div id="container" ref="container"></div>
      </el-col>
    </el-row>
        
  </div>
</template>
<script setup lang="ts">
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {OrbitControls} from "three/addons/controls/OrbitControls";
import { Water } from 'three/examples/jsm/objects/Water.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
import  TWEEN  from '@tweenjs/tween.js';
import {  CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer.js';
import { instrumentList,waterData,getTooltipData} from "../index.api"
const props = defineProps({
    damId:{
        type:Number,
        default:1
    },
    epcId:{
        type:String,
        default:""
    }
})
const boxRef = ref<any>(null);
const loading = ref(false);
let scene:any;
let textMesh:any;
let textMeshs:any =[];
let rectMeshs:any =[];
const camera = ref<any>(null);
let water:any;
const renderer = ref<any>(null);
const  container = ref<any>(null);
const  controls  = ref<any>(null);
const loaderT = new FontLoader();
import { useAppStore} from "@/store";
import { set } from '@vueuse/core';
const appStore = useAppStore();
//label ref
const dam_top_heightRef = ref<any>(null);
const tooltipData = ref<any>([])
//刻度尺
const acalesText = [
  {id:0,value:"校核洪水位：80.6m",x:-175,y:0,z:-130,color:0xFF0000},
  {id:0,value:"设计洪水位：80.6m",x:-175,y:-10,z:-130,color:0xFFFF00},
  {id:0,value:"正常水位：80.6m",x:-175,y:-20,z:-130,color:0x00FF00},
  {id:0,value:"当前水位：80.6m",x:-175,y:-49,z:-130,color:0xfffffff},
  {id:0,value:"死水位：80.6m",x:-175,y:-39,z:-130,color:0xfffffff},

  {id:1,value:"50",x:-224,y:-100,z:-130,color:0xfffffff},
  {id:2,value:"60",x:-224,y:-80,z:-130,color:0xfffffff},
  {id:3,value:"70",x:-224,y:-60,z:-130,color:0xfffffff},
  {id:4,value:"80",x:-224,y:-40,z:-130,color:0xfffffff},
  {id:5,value:"90",x:-224,y:-20,z:-130,color:0xfffffff},
  {id:6,value:"100m",x:-224,y:-0,z:-130,color:0xfffffff},
];
const  rectangles = [
  //坝顶高程
{id:0,width:48,height:16,x:-20,y:40,z:175,color:0x367DF9 },
//B09
{id:0,width:30,height:10,x:-30,y:0,z:80,color:0x367DF9 },
{id:0,width:30,height:10,x:-30,y:0,z:-30,color:0x367DF9 },
{id:0,width:30,height:10,x:-30,y:0,z:-100,color:0x367DF9 },

//B10
{id:0,width:30,height:10,x:20,y:-20,z:80,color:0x367DF9 },
{id:0,width:30,height:10,x:20,y:-20,z:-30,color:0x367DF9 },
{id:0,width:30,height:10,x:20,y:-20,z:-100,color:0x367DF9 },

//B11
{id:0,width:30,height:10,x:80,y:-30,z:80,color:0x367DF9 },
{id:0,width:30,height:10,x:80,y:-30,z:-30,color:0x367DF9 },
{id:0,width:30,height:10,x:80,y:-30,z:-100,color:0x367DF9 },
];
//label标签
const labels = [
  {id:"damTop",value:"坝顶高程：98.6m",x:-20,y:40,z:175,color:0xfffffff},

  {id:"B09",value:"B09：0mm",x:-30,y:0,z:80,color:0xfffffff},
  {id:"B05",value:"B05：0mm",x:-30,y:0,z:-30,color:0xfffffff},
  {id:"B01",value:"B01：0mm",x:-30,y:0,z:-100,color:0xfffffff},

  {id:"B10",value:"B10：0mm",x:20,y:-20,z:80,color:0xfffffff},
  {id:"B06",value:"B06：0mm",x:20,y:-20,z:-30,color:0xfffffff},
  {id:"B02",value:"B02：0mm",x:20,y:-20,z:-100,color:0xfffffff},

  {id:"B11",value:"B11：0mm",x:80,y:-30,z:80,color:0xfffffff},
  {id:"B07",value:"B7：0mm",x:80,y:-30,z:-30,color:0xfffffff},
  {id:"B03",value:"B3：0mm",x:80,y:-30,z:-100,color:0xfffffff},
  //断面
  {id:3,value:"断面:B0+027",x:-80,y:-30,z:-100,color:0xfffffff},
  {id:3,value:"断面:B0+050",x:-80,y:-30,z:-30,color:0xfffffff},
  {id:3,value:"断面:B0+073",x:-80,y:-30,z:80,color:0xfffffff},
]
//label标签线
const labelsLine = [
  {id:0,x:-10,y:35,z:175, x1:-10,y1:-50,z1:175,  color:0x00FFff},
  // B09
  {id:1,x:-30,y:0,z:80, x1:-30,y1:-50,z1:80,  color:0x00FFff},
  {id:2,x:-30,y:0,z:-30, x1:-30,y1:-50,z1:-30,  color:0x00FFff},
  {id:3,x:-22,y:0,z:-100, x1:-22,y1:-50,z1:-100,  color:0x00FFff},
  //B10
  {id:1,x:20,y:-20,z:80, x1:20,y1:-50,z1:80,  color:0x00FFff},
  {id:2,x:20,y:-20,z:-30, x1:20,y1:-50,z1:-30,  color:0x00FFff},
  {id:3,x:20,y:-20,z:-100, x1:20,y1:-50,z1:-100,  color:0x00FFff},
  //B11
  {id:4,x:80,y:-30,z:80, x1:80,y1:-80,z1:80,  color:0x00FFff},
  {id:5,x:80,y:-30,z:-30, x1:80,y1:-80,z1:-30,  color:0x00FFff},
  {id:6,x:80,y:-30,z:-100, x1:80,y1:-80,z1:-100,  color:0x00FFff},

  //断面
  {id:7,x:-100,y:-34,z:-100, x1:-22,y1:-34,z1:-100,  color:0x00FFff},
  {id:7,x:-100,y:-34,z:-30, x1:-32,y1:-34,z1:-30,  color:0x00FFff},
  {id:7,x:-100,y:-34,z:80, x1:-32,y1:-34,z1:80,  color:0x00FFff},

]
const labelTwoLines =[
{ id:0,
  x:-153,y:-3,z:-130,
  x1:-200,y1:-5,z1:-130,
  x2:-215,y2:-9,z2:-130,
  color:0xFF0000
},
{ id:0,
  x:-153,y:-13,z:-130,
  x1:-200,y1:-14,z1:-130,
  x2:-215,y2:-11,z2:-130,
  color:0xFFFF00
},
]
onMounted(() => {
  
})

  const initPage = async ()=>{
    loading.value = true;
    initScene();
    initCamera();
    initRenderer();
    initControl();
    initWater();
    await initModel();
    await initLine();
    await addText();
    await addLabelLine();
    await addLabelTwoLine();
    initRectangle();
    flyToCamera();
    initAnimate();
    initAddClick();
  }
  // Create the scene
  const initScene = ()=>{
      scene = new THREE.Scene();
    };
// Create the camera
    const initCamera= ()=>{
    camera.value = new THREE.PerspectiveCamera(45,1153 / 819, 0.1, 1000);
    camera.value.position.set(-163,143,-508);
  };
 // Create the renderer
  const initRenderer =()=>{
      renderer.value = new THREE.WebGLRenderer({ antialias: true });
      renderer.value.setSize(container.value.clientWidth, container.value.clientHeight);
      renderer.value.setClearColor('#03243f', 0.1);
      renderer.value.domElement.style.position = "absolute";
      renderer.value.domElement.style.top = "-160px";
      renderer.value.domElement.style.left = "-60px";
      container.value.appendChild(renderer.value.domElement);
    };
    const initControl = ()=>{
      controls.value = new OrbitControls(camera.value, renderer.value.domElement);
      controls.value.enableDamping = true;
      // // 最大角度
      controls.value.maxPolarAngle = Math.PI / 2.2;
    };
    // 创建Raycaster实例
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();
    const initAnimate = ()=> {
      
      water.material.uniforms["time"].value += 1.0 / 60.0;
      requestAnimationFrame(initAnimate);
      renderer.value.render(scene, camera.value);
      controls.value.update();
      textMeshs.forEach((mesh:any)=>{
        mesh.lookAt(camera.value.position)
      })
      rectMeshs.forEach((mesh:any)=>{
        mesh.lookAt(camera.value.position)
      })
      TWEEN.update();
      // console.log('Camera Position:', camera.value.position);
      
    };
    const initWater = ()=>{
      const waterGeometry = new THREE.BoxGeometry(200, 280,35);
      water = new Water(
          waterGeometry,
          {
            textureWidth: 512,
            textureHeight: 512,
            waterNormals: new THREE.TextureLoader().load('/3D/water.jpeg', function (texture:any) {
              texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            }),
            sunDirection: new THREE.Vector3(),
            sunColor: 0x007FFF,
            waterColor: 0x007FFF,
            distortionScale: 3.7,
          }
      );
      water.rotation.x = - Math.PI / 2;
      water.position.x = -114;
      water.position.y = -81.5;
      water.position.z = 10;
      scene.add(water)
    };
 
 
    const initLine = ()=>{
      const axisMaterial = new THREE.LineBasicMaterial({ color: 0xffffff }); // Blue for X
      const yAxisMaterial = new THREE.LineBasicMaterial({ color: 0xff0000  }); // Red for Y
      const zAxisMaterial = new THREE.LineBasicMaterial({ color: 0xffff }); // Green for Z
      // Create the geometry for the axes
    const axisGeometry = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-110, -140, -182.2),
        new THREE.Vector3(-11, -140, -182.2)
    ]);
    
 
    const yAxisGeometry = new THREE.BufferGeometry().setFromPoints([
    new THREE.Vector3(-215, 0, -130),
    new THREE.Vector3(-215, -100, -130)
    ]);
 
    const zAxisGeometry = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(19, 0, -22.2),
        new THREE.Vector3(19, 0, 5)
    ]);
    //begin 这里用作刻度线
    //水位使用
    const zAxisGeometry0 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-160, -60, -130),
        new THREE.Vector3(-214, -60, -130)
    ]);


    const zAxisGeometry1 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-210, -100, -130),
        new THREE.Vector3(-215, -100, -130)
    ]);
    const zAxisGeometry11 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-210, -90, -130),
        new THREE.Vector3(-215, -90, -130)
    ]);
    const zAxisGeometry2 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-205, -80, -130),
        new THREE.Vector3(-215, -80, -130)
    ]);
    const zAxisGeometry22 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-210, -70, -130),
        new THREE.Vector3(-215, -70, -130)
    ]);
    const zAxisGeometry3 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-205, -50, -130),
        new THREE.Vector3(-215, -50, -130)
    ]);
    const zAxisGeometry33 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-210, -40, -130),
        new THREE.Vector3(-215, -40, -130)
    ]);
    const zAxisGeometry4 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-205, -30, -130),
        new THREE.Vector3(-215, -30, -130)
    ]);
    const zAxisGeometry44 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-210, -20, -130),
        new THREE.Vector3(-215, -20, -130)
    ]);
    const zAxisGeometry5 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-205, -10, -130),
        new THREE.Vector3(-215, -10, -130)
    ]);
    const zAxisGeometry55 = new THREE.BufferGeometry().setFromPoints([
        new THREE.Vector3(-210, 0, -130),
        new THREE.Vector3(-215, 0, -130)
    ]);
    
    //end 
     // Create the line segments for the axes
     const axis = new THREE.Line(axisGeometry, axisMaterial);

     
    const yAxis = new THREE.Line(yAxisGeometry, yAxisMaterial);
    const zAxis = new THREE.Line(zAxisGeometry, zAxisMaterial);
    //begin 这里用作刻度线
    const zAxis0 = new THREE.Line(zAxisGeometry0, axisMaterial);
    const zAxis1 = new THREE.Line(zAxisGeometry1, axisMaterial);
    const zAxis2 = new THREE.Line(zAxisGeometry2, axisMaterial);
    const zAxis3 = new THREE.Line(zAxisGeometry3, axisMaterial);
    const zAxis4 = new THREE.Line(zAxisGeometry4, axisMaterial);
    const zAxis11 = new THREE.Line(zAxisGeometry11, axisMaterial);
    const zAxis22 = new THREE.Line(zAxisGeometry22, axisMaterial);
    const zAxis33 = new THREE.Line(zAxisGeometry33, axisMaterial);
    const zAxis44 = new THREE.Line(zAxisGeometry44, axisMaterial);
    const zAxis5 = new THREE.Line(zAxisGeometry5, axisMaterial);
    const zAxis55 = new THREE.Line(zAxisGeometry55, axisMaterial);
     //end
      // scene.add(axis);
      
      scene.add(yAxis);
      // scene.add(zAxis);
      //begin 这里用作刻度线
      scene.add(zAxis0);

      scene.add(zAxis1);
      scene.add(zAxis2);
      scene.add(zAxis3);
      scene.add(zAxis4);
      scene.add(zAxis5);
      scene.add(zAxis11);
      scene.add(zAxis22);
      scene.add(zAxis33);
      scene.add(zAxis44);
      scene.add(zAxis55);
      //end
    }
  const addText =()=> {
	loaderT.load(
		// font资源URL
		'/3D/HONOR_Sans_CN_Regular.json',
		// onLoad回调
		function (font:any) {
      acalesText.forEach(item=>{
        const textGeometry = new TextGeometry(item.value, {
          font: font,
          size: 3.5, // 字体大小
          height: 10, // 挤出文本的厚度
        })
        textGeometry.center() // 居中文本
        const materials = new THREE.MeshBasicMaterial({
          color: item.color || 0xfffffff,
          transparent: true,
          opacity: 0.9,
        })
        textMesh = new THREE.Mesh(textGeometry, materials)
        textMesh.position.set(item.x,item.y, item.z)
        textMeshs.push(textMesh)
        scene.add(textMesh)
      })

      labels.forEach(item=>{
        const textGeometry = new TextGeometry(item.value, {
          font: font,
          size: 4, // 字体大小
          height: 10, // 挤出文本的厚度
        })
        textGeometry.center() // 居中文本
        const materials = new THREE.MeshBasicMaterial({
          color: item.color || 0xfffffff,
          transparent: true,
          opacity: 0.9,
        })
        textMesh = new THREE.Mesh(textGeometry, materials)
        textMesh.position.set(item.x,item.y, item.z)
        textMeshs.push(textMesh)
        scene.add(textMesh)
      })
			
		}
	)
}
const addLabelLine = ()=>{
  labelsLine.forEach(item=>{
    const lineGeometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(item.x,item.y, item.z),
      new THREE.Vector3(item.x1,item.y1, item.z1)
    ]);
    const lineMaterial = new THREE.LineBasicMaterial({ color: item.color || 0xfffffff });
    const line = new THREE.Line(lineGeometry, lineMaterial);
    scene.add(line)
  })
}
//添加拐角线
const addLabelTwoLine = ()=>{
  labelTwoLines.forEach(item=>{
    const lineGeometry = new THREE.BufferGeometry().setFromPoints([
      new THREE.Vector3(item.x,item.y, item.z),
      new THREE.Vector3(item.x1,item.y1, item.z1),
      new THREE.Vector3(item.x2,item.y2, item.z2)
    ]);
    const lineMaterial = new THREE.LineBasicMaterial({ color: item.color || 0xfffffff });
    const line = new THREE.Line(lineGeometry, lineMaterial);
    scene.add(line)
  })
}

const initModel = ()=>{
      // 加载.glb模型
    const loader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('/draco/'); // 指定Decoder的路径
    loader.setDRACOLoader(dracoLoader);
    loader.load('/3D/zhuba.glb', (gltf:any) => {
      //解决加载进来为黑色的情况
      const ambientLight = new THREE.AmbientLight(0xffffff, 1); // 白光，强度为1
        scene.add(ambientLight);
        const dirLight = new THREE.DirectionalLight('rgb(253,253,253)', 5);
        dirLight.position.set(10, 10, 5); // 根据需要自行调整位置
        scene.add(dirLight);
        gltf.scene.name = 'dam_model'
      scene.add(gltf.scene);
      setTimeout(()=>{
      loading.value = false;
    },1100)
    }, undefined, (error:any) => {
      console.error(error);
    });
}
const initRectangle =() =>{
  rectangles.forEach(item=>{
    const geometry = new THREE.PlaneGeometry( item.width, item.height );
    const material = new THREE.MeshBasicMaterial( {color: item.color, transparent: true, opacity: 1} );
    const plane = new THREE.Mesh( geometry, material );
    plane.position.set(item.x, item.y, item.z)
    rectMeshs.push(plane)
    scene.add( plane );
  })
} 
const flyToCamera = ()=>{
   
}
const initAddClick = ()=>{
  //点击事件
  renderer.value.domElement.addEventListener('click', function (e:any) {
    //获取点击位置
    const mouse = new THREE.Vector2();
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    //创建射线
    const raycaster = new THREE.Raycaster();
    // 更新Raycaster的射线方向
    raycaster.setFromCamera(mouse, camera.value);
     // 假设你想要获取与场景中所有对象的交点
  // 注意：intersectObjects会返回一个包含所有交点的数组
    const intersects = raycaster.intersectObjects(scene.children, true); // 第二个参数为true表示递归检查所有子对象
 
    if (intersects.length > 0) {
      // 获取最近的交点（通常是数组中的第一个元素）
      const intersect = intersects[0];

      // intersect.point就是你在3D空间中点击的位置
      console.log('Clicked point in 3D space:', intersect.point);

      // 如果你想要获取被点击对象的详细信息，可以使用intersect.object
      console.log('Clicked object:', intersect.object);
    } else {
      console.log('No objects intersected by the ray.');
    }
  })
}
const  getwaterInfo = async()=>{
  const res = await waterData({
    epcId:appStore.epc.epcId
  })
  labels[0].value = "坝顶高程：" + res.damTop + 'm';
  acalesText[0].value = "校核洪水位：" + res.checkZ + 'm';
  acalesText[1].value = "设计洪水位：" + res.designZ + 'm';
  acalesText[2].value = "正常水位：" + res.normalZ + 'm';
  acalesText[3].value = "当前水位：" + (res.z ?? 0) + 'm';
  acalesText[4].value = "死水位：" + res.deadZ + 'm';
}
const getItemData = async()=>{
    const res = await getTooltipData({
        damId:props.damId,
        epcId:props.epcId
    })
    tooltipData.value = res;

}
onMounted(async() => {
  
  await getwaterInfo();
  initPage();
})


</script>
<style lang="scss" scoped>
  #container{
    width: 100%;
    height: calc(100vh - 100px);
    background-image: url("./bg.png");
    background-size: cover;
  }
  .box{
    overflow: hidden;
    height: calc(100vh - 100px);
  }
</style>
bloxed
关注
水库大坝浸润线 canvas绘制 静态
qq_46531791的博客
05-28 578
下图为用到的大坝底图。
three.js模拟波动水面Water.js
u014291990的博客
01-29 1706
有些数字孪生场景周围的环境，需要模拟一个波动水面效果，自己写shader相对比较麻烦，采用threejs的扩展库更简单方便。(货轮物流)
数维图智慧大坝3D可视化 一屏掌控大坝安全
码为人生的博客
02-01 685
基于数维图 的 Sovit3D编辑器 构建的水库大坝3D可视化场景案例。以数据连接物理世界和虚拟世界的两个维度的大坝，实现数字孪生大坝达到数字化、仿真、预测、诊断、实时优化控制、寻优决策和精准决策的目标。
水库大坝三维模型开发bim篇
最新发布
Bloxed_shangyc的博客
12-25 351
水库大坝三维模型开发
特色国风数字孪生智慧大坝 3D 可视化
HT for Web 3D
06-14 1909
前言 水利兴，五谷丰。水利作为国民经济稳定和谐的重要部分，不仅有防洪减灾、农业灌溉、城市供水调水、渔业外贸、旅游航运、生态环境等综合应用，水电资源也是至关重要的可持续能源之一。大坝与水库、水电站等水利枢纽相辅相成稳定着城市发展。而随着信息化的发展，结合物联网、 5G 、大数据等新兴技术形式的智慧水电站、智慧大坝也给传统水利行业提供更大的价值体现，提升产业全面感知、共享整合、智慧管理。 今天将利用 Hightopo 的 HT 产品搭建出一个水墨风的山水大坝 3D 可视化场景。通过三维建模，多种角度直观展示
探索神奇的三维水模拟：ThreeJS-water
gitblog_00003的博客
06-22 1210
探索神奇的三维水模拟：ThreeJS-water 项目地址:https://gitcode.com/gh_mirrors/th/threejs-water 项目介绍 ThreeJS-water 是一个基于流行JavaScript库Three.js实现的三维水波模拟项目。它借鉴了Evan Wallace的webgl-water演示，并进行了优化和改进，为开发者提供了一个实时交互的3D水面效果。你可以...
Threejs实现模拟河流，水面水流，水管水流，海面
热门推荐
左本Web3D
06-28 1万+
Threejs实现模拟河流，水面水流，水管水流，海面
【PFC3D流体与固体耦合模拟】：流体动力学和结构相互作用模拟的专家指南
![【PFC3D流体与固体耦合模拟】：流体动力学和结构相互作用模拟的专家指南]...在实践技巧章节中，作者提供了模型构建、网格划分、边
Flac3D流体计算实战演练：如何高效模拟水坝泄洪
Flac3D作为一款专业的三维岩土体与结构分析软件，广泛应用于地质工程和流体计算领域。本文首先介绍了Flac3D软件的基本功能和流体计算的理论基础，然后详细探讨了建立流体模型、设置边界条件以及进行模拟实践的具体...
FLAC3D 边界条件设置艺术
![FLAC3D 边界条件设置艺术]...在数值模拟的世界中，FLAC3D 是一款强大的三维计算工具，被广泛应用于地质工程、土木建筑、环境评估等多个领域。通过其先进的算法与数值模拟
【FLAC3D新手必看】：从0到1掌握核心操作（附真实案例分析）
首先，本文对FLAC3D的基本概念和理论基础进行了介绍，包括土壤和岩石力学的理论，数值模拟方法以及FLAC3D的核心算法。接着，本文详细阐述了FLAC3D的基本操作和建模技巧，涵盖了界面布局、网格划分、材料属性定义、...
【水动力学在EFDC建模中的应用】：深入理解其关键作用
!... # 摘要 水动力学模型EFDC在环境工程中具有广泛的应用，涵盖了从基础理论...此外，本文还深入研究了EFDC模型在环境工程中的高级应用，例如污染物输运模拟、复杂水域模拟技术以及模型优化和并行计算。最后，通过案例研
threejs实现动态绘线测距 （引入即用）three实现扩撒波纹材质方法
LBY_XK的博客
04-20 1098
【代码】threejs实现动态绘线测距 （引入即用）
vue-3d:基于vue+threejs的3d展示
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
12-19 1284
在Vue项目中结合Three.js来实现3D展示是一个非常有趣且富有挑战性的任务。Three.js是一个跨浏览器的JavaScript库和API，它使得在网页上创建和显示3D图形变得简单而直观。Vue则是一个用于构建用户界面的渐进式JavaScript框架。将这两者结合，你可以创建出交互性强、视觉效果出色的3D应用。以下是...
vue3项目使用canvas绘制闸门前后水位，输入水位自动调整
qq_46531791的博客
04-20 267
【代码】vue3项目使用canvas绘制闸门前后水位，输入水位自动调整。
【threejs教程11】threejs添加水面效果
c_wengy的博客
04-25 4018
本文将指导你如何使用Three.js添加一个逼真的水面效果到你的场景中。
Three.JS初探
12-29 1353
WebAR/WebVR的优势 跨平台毫无压力 传统AR/VR应用的开发需要考虑不同平台的发布，例如：AR在移动端的应用需要考虑到Android、iOS两个完全不同的开发及应用平台，而VR也需要考虑到不同硬件设备、平台间的兼容性问题。而WebAR/WebVR通过WebGL渲染在各类系统（Android、iOS、Windows、Mac、Linux等）Web端直接进行运行，一方面对于开发人员而言，无
水波图实现原理
weixin_34148508的博客
07-19 1210
在项目中自己使用 Canvas 实现了一下水波图，在这里给大家分享一下它的实现原理。 一开始看到波浪，可能不知道从何入手，我们来看看波浪的特征就会有灵感了。 没错，有人肯定会想到，就是 正余弦曲线！对于波陡很小的波动，一般选择正弦或余弦的曲线来表示波形，这是最简单而又最接近实际波形的表述。这里我选择了正弦曲线来实现。 在讲实现思路之前，我们来回忆一下正弦曲线的基础。 正弦曲线 正...
小型水库标准化数字管理系统方案搭建
TSllzdh_2022的博客
08-16 717
唐山柳林提出小型水库标准化数字管理系统解决方案，系统主要由降雨量监测站、水库水位监测站、大坝安全监测中的渗流量、渗流压力和变形监测站及视频和图像监测站等站点组成，同时建立规范、统一的监测平台，集数据传输、信息共享、数据储存于一体，规范项目管理，消除安全隐患，提升信息化水平，保障水库安全运行。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值