zoukankan      html  css  js  c++  java
  • Cesium与Threejs结合

    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实测)

  • 相关阅读:
    接口继承与归一化设计
    继承part1
    组合
    静态方法,小结
    类方法
    Java 集合各个接口特性
    PV操作示例详解
    什么是Java序列化,如何实现java序列化
    String简单知识点
    intValue()、parseInt()和valueOf
  • 原文地址:https://www.cnblogs.com/2008nmj/p/14377865.html
Copyright © 2011-2022 走看看