cesium 和 Three.js有啥区别，以及二者与WebGL 的关系

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了cesium 和 Three.js有啥区别，以及二者与WebGL 的关系相关的知识，希望对你有一定的参考价值。

三维重建技术

二者都是基于WebGL技术开发的js库
Threejs受众面比较广，是封装了webgl的一些底层用法，让初学者更容易上手；例如绘制一个立方体，使用webgl原生api可能要写50行代码，包括构建坐标点，顶点组织、着色器等信息；在threejs里面可能只要一句代码就可以构建(实际上也是调用webgl原生api)，只是做了更大粒度的封装
Cesium受众面相对较小，是Gis相关的，也是基于WebGL开发的，它主要是三维地球相关的js库，可以展示二维地图服务(百度高德)、倾斜摄影模型；还可以在上面做一些三维分析，可以参考http://cesium.xin 参考技术A 我也想做3D。暂时还在门外，以下仅供参考。
Cesium是国外一个基于javascript编写的使用WebGL的地图引擎。看到这个问题，第一次知道它。专做地图的看样子，类似于jquery之类的，jquery方便快速出网站，cesium方便快速出地图网站。
Three.js知道一点，是做3D的基础库啊，可以做任意的3D的东西。做动画，做游戏的吧。
WebGL 是一个底层标准吧，它不是一个具体的工程应用。它本身不是javascript的东西，印象中他是专门做图像图像的，更关注底层硬件的渲染和性能之类。
我觉得是javascript 在这个WebGL 的绘图标准上，定义了canvas，熟悉不，canvas的各种绘图标准应该是参考的这个标准。Canvas 提供了最基本的点线面的绘制，是基本api。然后Three是对canvas的一层封装，方便更加快速地绘制一个球，一个立方体，然后动起来。参考技术B 共同点：都是三维技术优秀js库，所以你一开始困惑也正常

不同点：Cesium国内主打GIS，像超图、lab、着色器地球都是这样子的，就是路子不同而已，Three的话主打效果，那个游戏就比较热衷
最后总结一下，其实three也可做GIS，好比拖拉机也可以载人

10-THREE.JS perspective透视摄像机和orthographic正交摄像机区别

<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src="https://cdn.bootcss.com/three.js/r67/three.js"></script>
    <script src="https://cdn.bootcss.com/stats.js/r10/Stats.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/dat-gui/0.7.3/dat.gui.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div id="Stats-output">
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript">
    // 初始化
    function init() {

        var stats = initStats();

        // 创建一个场景
        var scene = new THREE.Scene();

        // 创建一个相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.x = 120;
        camera.position.y = 60;
        camera.position.z = 180;

        // 创建渲染器
        var renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 创建地面
        var planeGeometry = new THREE.PlaneGeometry(180, 180);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);


        // 地面保持水平
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        // 地面添加到场景中去
        scene.add(plane);

        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);

        for (var j = 0; j < (planeGeometry.parameters.height / 5); j++) {
            for (var i = 0; i < planeGeometry.parameters.width / 5; i++) {
                var rnd = Math.random() * 0.75 + 0.25;
                var cubeMaterial = new THREE.MeshLambertMaterial();
                cubeMaterial.color = new THREE.Color(rnd, 0, 0);
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

                cube.position.z = -((planeGeometry.parameters.height) / 2) + 2 + (j * 5);
                cube.position.x = -((planeGeometry.parameters.width) / 2) + 2 + (i * 5);
                cube.position.y = 2;

                scene.add(cube);
            }
        }


        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
        directionalLight.position.set(-20, 40, 60);
        scene.add(directionalLight);


        // 添加自然光
        var ambientLight = new THREE.AmbientLight(0x292929);
        scene.add(ambientLight);

        // 添加场景到DOM元素中去
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        
        var step = 0;


        //perspective透视摄像机 和   orthographic正交摄像机 替换函数
        var controls = new function () {
            this.perspective = "Perspective";
            this.switchCamera = function () {
                if (camera instanceof THREE.PerspectiveCamera) {
                    camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);
                    camera.position.x = 120;
                    camera.position.y = 60;
                    camera.position.z = 180;
                    camera.lookAt(scene.position);
                    this.perspective = "Orthographic";
                } else {
                    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
                    camera.position.x = 120;
                    camera.position.y = 60;
                    camera.position.z = 180;

                    camera.lookAt(scene.position);
                    this.perspective = "Perspective";
                }
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, ‘switchCamera‘);
        gui.add(controls, ‘perspective‘).listen();

       
           //相机看向场景
        camera.lookAt(scene.position);
        render();

        function render() {

            stats.update();
            
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

        function initStats() {

            var stats = new Stats();

            stats.setMode(0); // 0: fps, 1: ms

            stats.domElement.style.position = ‘absolute‘;
            stats.domElement.style.left = ‘0px‘;
            stats.domElement.style.top = ‘0px‘;

            document.getElementById("Stats-output").appendChild(stats.domElement);

            return stats;
        }
    }
    window.onload = init


</script>
</body>
</html>

对于这两个相机官方有一个示例更容易让人理解

https://threejs.org/examples/#webgl_camera

按O和P两个按钮切换相机

以上是关于cesium 和 Three.js有啥区别，以及二者与WebGL 的关系的主要内容，如果未能解决你的问题，请参考以下文章

Cesium开发工具篇 | 05与第三方库的集成

threejs color 和 emissive 有啥区别

用three.js开发三维地图实例

如何在Web上直接浏览大规模OSGB格式倾斜模型（二）：转换OSGB

关于DEJA_VU3D - Cesium功能集专栏说明

有啥方法可以从 three.js Object3D 中获取边界框？