我的github
posts - 3243,  comments - 42,  views - 158万

The basic rendering principles guiding Cesium are not so different from Three.js. Three.js is a powerful 3D library for rendering 3D objects. By duplicating Cesium’s spherical coordinate system and matching digital globes within both scenes, it is easy to integrate both separate rendering engine layers into one main scene. I will give a simple illustration about its integration method, as follows:

Cesium的基本渲染原理与Three.js并没有很大不同。Three.js是一个渲染3D物体的强大的3D类库。通过复制Cesium椭球坐标系以及匹配两个Scene场景的数字球体,很容易融合两个不同的渲染引擎到一个场景中。我将对该融合方法给予简单说明,如下:

  • 初始化铯渲染器,
  • 初始化three.js渲染器,
  • 初始化两个库的3D对象,以及
  • 循环渲染器。

A small experiment using Three JS on Cesium to emulate a combined scene.

在Cesium上使用Three JS的小实验。

https://github.com/CesiumGS/cesium-threejs-experiment

https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/

>>Cesium安装:https://www.cnblogs.com/2008nmj/p/11226838.html

Main Function主要函数

The html needs containers for Three and for Cesium:html需要Three和Cesium的两个容器:

<body>
<div id="cesiumContainer"></div>
<div id="ThreeContainer"></div>
</body>
<script> main(); </script>

This is the main function:以下是main函数:

复制代码
function main(){
  // boundaries in WGS84 to help with syncing the renderers
  var minWGS84 = [115.23,39.55];
  var maxWGS84 = [116.23,41.55];
  var cesiumContainer = document.getElementById("cesiumContainer");
  var ThreeContainer = document.getElementById("ThreeContainer");

  var _3Dobjects = []; //Could be any Three.js object mesh
  var three = {
    renderer: null,
    camera: null,
    scene: null
  };

  var cesium = {
    viewer: null
  };

  initCesium(); // Initialize Cesium renderer
  initThree(); // Initialize Three.js renderer
  init3DObject(); // Initialize Three.js object mesh with Cesium Cartesian coordinate system
  loop(); // Looping renderer
}
复制代码

更多参考:https://blog.csdn.net/qq_36266612/article/details/88943501(CesiumJs+ThreeJs实测)

https://blog.csdn.net/ztz87/article/details/117257095

参考6:https://download.csdn.net/blog/column/11250060/123452660Cesium和Three.js结合的5个方案

posted on   XiaoNiuFeiTian  阅读(5995)  评论(1编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示