1.cesium和threejs结合
Three.js是一个轻量级的跨浏览器JavaScript库，用于在浏览器中创建和显示动画3D计算机图形。Cesium是一个3D库，旨在创建数字地球，其渲染与真实地球非常精确。
cesium的基本渲染原理与Three.js没有太大区别。通过在两个场景中复制cesium的球面坐标系和匹配的数字地球，很容易将两个单独的渲染引擎层整合到一个主场景中。
初始化Cesium渲染器
初始化Three.js渲染器
初始化这两个库的3D对象
循环渲染器
参考依据是威尔逊等将Three.js与Cesium集成的文章，链接地址：https://www.cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/
2.vue中集成cesium和threejs
2.1 vue中集成cesium
使用vue-cli创建项目，这里使用的是vue-cli4。
1.安装cesium依赖
npm install cesium
2.配置vue.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin') const webpack = require('webpack') const path = require('path') let cesiumSource = './node_modules/cesium/Source' let cesiumWorkers = '../Build/Cesium/Workers' module.exports = { publicPath: "./", outputDir: "dist", lintOnSave: false, devServer: { open: process.platform === "darwin", host: "0.0.0.0", port: 5000, https: false, hotOnly: false }, configureWebpack: { output: { sourcePrefix: ' ' }, amd: { toUrlUndefined: true }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', '@': path.resolve('src'), 'cesium': path.resolve(__dirname, cesiumSource) } }, plugins: [ new CopyWebpackPlugin([{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' }]), new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' }]), new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }]), new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers' }]), new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('./') }) ], module: { unknownContextCritical: /^.\/.*$/, unknownContextCritical: false } } };
3.配置main.js全局引入cesium相关文件
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false //引入cesium相关文件 var Cesium = require('cesium/Cesium'); var widgets = require('cesium/Widgets/widgets.css'); Vue.prototype.Cesium = Cesium Vue.prototype.widgets = widgets new Vue({ render: h => h(App) }).$mount('#app')
4.测试cesium
<template> <div id="container" class="box"> <div id="cesiumContainer"></div> </div> </template> <script> export default { name: 'Home', mounted(){ this.init() }, methods: { init() { let Cesium = this.cesium //这里的token使用自己注册的 Cesium.Ion.defaultAccessToken = 'xxxxx' let viewer = new Cesium.Viewer('cesiumContainer'); } } }; </script> <style lang='scss' scoped> html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .box { height: 100%; } </style>
2.2 引入threejs
安装threejs
npm install threejs
注意，threejs和ceiusm结合会有版本问题，具体可以参考https://blog.csdn.net/u011540323/article/details/103522075
2.3 实现效果
2.4 完整代码
vue+cesium+threejs
<template> <div> <div id="cesiumContainer"></div> <div id="ThreeContainer"></div> </div> </template> <script> import * as THREE from 'three' export default { data () { return { minWGS84: [115.23, 39.55], maxWGS84: [116.23, 41.55], objects3D: [], three: { renderer: null, camera: null, scene: null }, cesium: { viewer: null }, ce: null, } }, methods: { initCesium() { let Cesium = this.Cesium; // let cesiumContainer = document.getElementById("cesiumContainer"); Cesium.Ion.defaultAccessToken = 'xxxxxxx'; //注：这里需使用自己的token this.cesium.viewer = new Cesium.Viewer("cesiumContainer", { useDefaultRenderLoop: false, //关闭自动渲染循环，这意味着需要手动调用render()方法来渲染场景 selectionIndicator: false, //关闭选中指示器 homeButton: false, //关闭回到初始位置按钮 sceneModePicker: false, //关闭场景模式选择器 navigationHelpButton: false, //表示关闭导航帮助按钮 animate: false, //关闭动画 timeline: false, //关闭时间线 fullscreenButton: false, //关闭全屏按钮 navigationInstructionsInitiallyVisible: false, allowTextureFilterAnisotropic: false, contextOptions: { //配置WebGL上下文选项 webgl: { alpha: false, antialias: true, preserveDrawingBuffer: true, failIfMajorPerformanceCaveat: false, depth: true, stencil: false, anialias: false } }, targetFrameRate: 60, //目标帧率 resolutionScale: 0.1, //场景分辨率的缩放比例 orderIndependentTranslucency: true, baseLayerPicker: true, //启用底图选择器 geocoder: false, //关闭地名查找功能 automaticallyTrackDataSourceClocks: false, //关闭自动跟踪数据源时钟 dataSources: null, clock: null, terrainShadows: Cesium.ShadowMode.DISABLED, //关闭地形阴影 infoBox: false //关闭信息框 }); //设置场景中心点的经纬度和高度,将相机飞到该点 let center = Cesium.Cartesian3.fromDegrees( (this.minWGS84[0] + this.maxWGS84[0]) / 2, ((this.minWGS84[1] + this.maxWGS84[1]) / 2) - 1, 200000 ); this.ce = center; //将相机飞到指定位置 this.cesium.viewer.camera.flyTo({ destination: center, //相机位置 orientation: { //相机朝向 heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-60), roll: Cesium.Math.toRadians(0) }, duration: 3 //飞行动画的时长 }); }, initThree() { let ThreeContainer = document.getElementById("ThreeContainer"); let fov = 45; let width = window.innerWidth; let height = window.innerHeight; let aspect = width / height; let near = 1; let far = 10 * 1000 * 1000; // needs to be far to support Cesium's world-scale rendering this.three.scene = new THREE.Scene(); //场景 this.three.camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //透视相机 this.three.renderer = new THREE.WebGLRenderer({ //渲染器 alpha: true //true，代表透明度为0，完全透明（渲染器设置背景为透明，达成叠加效果） }); ThreeContainer.appendChild(this.three.renderer.domElement); }, Object3D(mesh, minWGS84, maxWGS84) { this.threeMesh = mesh; //three网格对象 this.minWGS84 = minWGS84; //位置边界框最小坐标 this.maxWGS84 = maxWGS84; //位置边界框最大坐标 }, init3DObject() { //创建three球体 let geometry1 = new THREE.SphereGeometry(1, 32, 32); let sphere = new THREE.Mesh(geometry1, new THREE.MeshPhongMaterial({ color: 0xffffff, side: THREE.DoubleSide })); sphere.scale.set(5000, 5000, 5000); //网格模型xyz方向都缩放5000倍 sphere.uuid = "sphere"; //创建组对象group var group = new THREE.Group(); group.add(sphere); //把球体添加到组 this.three.scene.add(group); //把组添加到场景中 group.position.set(this.ce.x, this.ce.y, this.ce.z); //设置组的位置 let ob3D = new this.Object3D(group, this.minWGS84, this.maxWGS84); this.objects3D.push(ob3D); //创建three十二面体 let geometry2 = new THREE.DodecahedronGeometry(); let dodecahedronMesh = new THREE.Mesh(geometry2, new THREE.MeshNormalMaterial()); dodecahedronMesh.scale.set(5000, 5000, 5000); dodecahedronMesh.position.z += 15000; dodecahedronMesh.rotation.x = Math.PI / 2; // Three.js 渲染 z-up 而 Cesium 渲染 y-up，使three也变成y朝上 dodecahedronMesh.uuid = "12面体"; var group2 = new THREE.Group(); group2.add(dodecahedronMesh) this.three.scene.add(group2); group2.position.set(this.ce.x, this.ce.y, this.ce.z); //添加到对象数组 let ob3D2 = new this.Object3D(group2, this.minWGS84, this.maxWGS84); this.objects3D.push(ob3D2); console.log(this.objects3D); /*******************************************添加灯光**********************************/ //添加点光源 var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(0, 0, 50000); spotLight.castShadow = true; //设置光源投射阴影 spotLight.intensity = 1; group.add(spotLight) //添加环境光 var hemiLight = new THREE.HemisphereLight(0xff0000, 0xff0000, 1); group.add(hemiLight); }, loop() { requestAnimationFrame(this.loop); this.renderCesium(); //渲染cesium this.renderThreeObj(); //渲染three }, renderCesium() { this.cesium.viewer.render(); }, renderThreeObj() { let Cesium = this.Cesium; let ThreeContainer = document.getElementById("ThreeContainer"); // 设置相机跟cesium保持一致,使用的cesium的相机为主相机，使three的相机与cesium保持一致即可 this.three.camera.fov = Cesium.Math.toDegrees(this.cesium.viewer.camera.frustum.fovy) this.three.camera.updateProjectionMatrix(); // 笛卡尔坐标转换为三维向量 var cartToVec = function(cart) { return new THREE.Vector3(cart.x, cart.y, cart.z); }; // 配置three对象的位置，进行坐标变换才能使对象在地球上正确显示 for (let id in this.objects3D) { let minWGS84 = this.objects3D[id].minWGS84; let maxWGS84 = this.objects3D[id].maxWGS84; // 物体中心位置计算为对象的最小和最大WGS84纬度和经度值的平均值，并且把经纬度坐标（WGS84）转笛卡尔坐标 var center = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2); // 向前方向计算为高度为1的Cartesian3位置，以便对象指向远离地球中心的方向 var centerHigh = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2, 1); // 使用 WGS84 区域从左下角到左上角的方向作为向上矢量 var bottomLeft = cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], minWGS84[1])); var topLeft = cartToVec(Cesium.Cartesian3.fromDegrees(minWGS84[0], maxWGS84[1])); var latDir = new THREE.Vector3().subVectors(bottomLeft, topLeft).normalize(); // 物体位置调整 this.objects3D[id].threeMesh.position.copy(center); //位置设置为中心位置 //_3Dobjects[id].threeMesh.lookAt(centerHigh); // threejs-r87版本 //threejs-r87以上版本，需改写成如下 this.objects3D[id].threeMesh.lookAt(centerHigh.x, centerHigh.y, centerHigh.z); this.objects3D[id].threeMesh.up.copy(latDir); //网格的向上矢量设置为计算出的向上矢量方向 } //关闭相机自动更新 this.three.camera.matrixAutoUpdate = false; // cesium相机位置 var cvm = this.cesium.viewer.camera.viewMatrix; var civm = this.cesium.viewer.camera.inverseViewMatrix; //NOTE:r87后版本，threejs源码中相机的lookat重新调整了矩阵，需要将原来放在相机设置参数前的这行代码上移到此处 three.camera.lookAt(new THREE.Vector3(0, 0, 0)); // 同步Three相机位置设置 this.three.camera.matrixWorld.set( civm[0], civm[4], civm[8], civm[12], civm[1], civm[5], civm[9], civm[13], civm[2], civm[6], civm[10], civm[14], civm[3], civm[7], civm[11], civm[15] ); this.three.camera.matrixWorldInverse.set( cvm[0], cvm[4], cvm[8], cvm[12], cvm[1], cvm[5], cvm[9], cvm[13], cvm[2], cvm[6], cvm[10], cvm[14], cvm[3], cvm[7], cvm[11], cvm[15] ); // three.camera.lookAt(new THREE.Vector3(0, 0, 0));// threejs-r87版本 ,r87以后版本需要上移 // 相机设置参数 var width = ThreeContainer.clientWidth; var height = ThreeContainer.clientHeight; var aspect = width / height; this.three.camera.aspect = aspect; this.three.camera.updateProjectionMatrix(); // 相机参数更新 this.three.renderer.setSize(width, height); this.three.renderer.render(this.three.scene, this.three.camera); } }, mounted () { this.initCesium(); this.initThree(); this.init3DObject(); this.loop(); } } </script> <style scoped> #cesiumContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; overflow: hidden; padding: 0; font-family: sans-serif; } #ThreeContainer { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; overflow: hidden; padding: 0; font-family: sans-serif; /* 关闭three鼠标控制器 */ pointer-events: none; } </style>
