threejs自动生产钻孔模型并使用cesium加载以及压力测试

  1. 提取钻孔数据(方向角和深度, 以及层高)
  2. 根据方位角计算空间点位,获取到空间线数据
  3. 将线数据根据层高等分,获取到单层的曲线数据
  4. 将单层曲线拟合成柱体

  1. 根据层信息绘制贴图

5: 下载模型列表,cesium加载200条钻孔做压力测试(50帧以上)

  const center = [112.57767308731874, 37.76049469723349, 758.5102194365319]
  let lon = 112.57767308731874
  let lat = 37.76049469723349
  entityCollection.add(
      Cesium.Model.fromGltf({
          id:'adsfasd'+ i* i,
          url:'http://172.168.88.32:8886/models/glblist/'+ i*j + '.gltf',
          modelMatrix:materix,
          show: true,
          scale: 1.0
        })
    )

6: 按照现在的测试结果,200个模型应该是丝滑的,300个不会卡,400 就加载吃力,如果模型再多,就可能会卡

  • 18
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用CesiumThree.js加载3D模型的示例代码: ```javascript // 创建Cesium Viewer var viewer = new Cesium.Viewer("cesiumContainer"); // 创建Three.js场景 var scene = new THREE.Scene(); // 创建Three.js渲染器 var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, }); renderer.setSize(viewer.canvas.clientWidth, viewer.canvas.clientHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.gammaInput = true; renderer.gammaOutput = true; renderer.gammaFactor = 2.2; renderer.shadowMap.enabled = true; // 将Three.js渲染器添加到Cesium场景中 var csRenderer = new THREE.CSS3DRenderer(); csRenderer.setSize(viewer.canvas.clientWidth, viewer.canvas.clientHeight); csRenderer.domElement.style.position = "absolute"; csRenderer.domElement.style.top = 0; document.getElementById("cesiumContainer").appendChild(csRenderer.domElement); // 创建Three.js相机并将其添加到Cesium场景中 var camera = new THREE.PerspectiveCamera( 45, viewer.canvas.clientWidth / viewer.canvas.clientHeight, 0.1, 1000 ); var csCamera = new THREE.PerspectiveCamera( 45, viewer.canvas.clientWidth / viewer.canvas.clientHeight, 0.1, 1000 ); viewer.scene.primitives.add(new Cesium.Primitive({})); // 创建Three.js灯光并将其添加到Cesium场景中 var light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(0, 1, 1); scene.add(light); // 加载模型 var loader = new THREE.GLTFLoader(); loader.load( "models/model.gltf", function (gltf) { // 获取模型并将其添加到Three.js场景中 var model = gltf.scene; model.scale.set(0.5, 0.5, 0.5); scene.add(model); // 将模型添加到Cesium场景中 var csModel = new THREE.CSS3DObject(model); csModel.position.set(0, 0, 0); csRenderer.render(scene, camera); viewer.scene.primitives.add(csModel); // 监听Cesium相机变化并更新Three.js相机 viewer.camera.changed.addEventListener(function () { camera.position.copy(viewer.camera.position); camera.position.y += 15; camera.lookAt(scene.position); renderer.render(scene, camera); csCamera.position.copy(viewer.camera.position); csCamera.position.y += 15; csCamera.lookAt(scene.position); csRenderer.render(scene, csCamera); }); }, undefined, function (error) { console.error(error); } ); ``` 这段代码首先创建了一个Cesium Viewer,然后创建了一个Three.js场景和一个Three.js渲染器。接着将Three.js渲染器添加到Cesium场景中,并创建了一个Three.js相机并将其添加到Cesium场景中。然后创建了一个Three.js灯光并将其添加到Cesium场景中。最后加载了一个模型,并将其添加到Three.js场景中和Cesium场景中。监听了Cesium相机的变化,并更新了Three.js相机的位置和方向。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值