vue中集成cesium和threejs
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>