目录
前言：cesium-threejs-experiment为Cesium官方出的在Cesium中使用ThreeJS模拟组合场景的示例，目前拉代码下来运行，发现是一堆报错😭，踩了好长时间坑，总结了这一篇文章。案例报错核心原因是：案例是18年5月份的，把Cesium及Three版本更新至想用的版本就可以了。
cesium-threejs-experiment官网GitHub地址
https://github.com/CesiumGS/cesium-threejs-experiment
案例示例图如下：
一、运行环境的问题
由于我平常不用C++，也就没有C++的运行环境，对该案例运行 npm install 时会导致报错
方式一
该报错可以通过安装Visio Studio 2017解决 报错原因参考
安装Visio Studio 2017的包可以通过该博客获取 Visio Studio 2017 安装包 或 通过一下链接获取；除此之外 还可通过2解决该问题。
链接：百度云链接
提取码：d31f
方式二
通过命令行 npm install gulp -g 全局安装gulp（一个自动化打包构建工具）。安装后，通过gulp -v 查看版本号验证是否安装成功。
再次进行 npm install 时，若报以下错误，则因为node版本和glup版本不匹配所导致
2.1 若gulp的版本为3.9.1，则需将node降至12.0.0以下；
2.2 若不想降低node版本，则将gulp提升至版本4 npm install -save-dev gulp@4。
二、更新Three及Cesium版本
根据上述一完成后，可以成功安装完成各依赖。但是不要着急，还需要切换Threej及Cesium版本。通过 package.json 中的依赖可以看到 Cesium 的版本是 1.45.0，Three 的版本为 0.87.1。修改版本为当前想用的版本，版本可从Three及Cesium的仓库中找到，链接如下（该篇提及的cesium版本为≤1.95，1.95版本之后cesium更换了构建方式）：
1、更新cesium版本
注： 起初我带着^写^1.95.1的时候，npm下载下来的是最新的1.107版本，应该是不识别该版本，若出现安装的依旧是最新版本，可删掉 '^' 尝试再次 npm install 。由于只是跑案例，Three只是添加几何体，无其它操作，暂未对three版本进行修改。
采用这两个依赖时，将项目通过 npm run start 运行起来后，通过 127.0.0.1:8000 进入页面，发现页面一直保持为转圈的情况，控制台报错如下：
由于我逛了半天度娘，愣是没找到/Cesium/Core这个包到底哪里来的，就选择了更换Cesium包，从‘public/CesiumThree.js’文件中通过define去申明一个模块，根据 gulpfile.js 中所配置的构建路径，其中的依赖的模块数组并不能从当前的ThridParty中找到，所以报错。我将define中声明的依赖路径进行修改，并将define中申明的变量依次修改为当前版本适配变量，如下：
注：复制下述代码，会报错token不对，即在47行添加自己的token。若没有，需在Cesium官网进行token的申请。
window.CESIUM_BASE_URL = '/ThirdParty/Cesium/';
define(
[
'Cesium/Cesium',
'Three/three.min',
], function (
Cesium,
THREE,
) {
// 'use strict';
var loadingIndicator = document.getElementById('loadingIndicator');
loadingIndicator.style.display = 'none';
// boundaries in WGS84 around the object
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
};
function _3DObject() {
//THREEJS 3DObject.mesh
this.threeMesh = null;
//location bounding box
this.minWGS84 = null;
this.maxWGS84 = null;
}
function initCesium() {
Cesium.Ion.defaultAccessToken =
'';
cesium.viewer = new Cesium.Viewer(cesiumContainer, {
useDefaultRenderLoop: false,
selectionIndicator: false,
homeButton: false,
sceneModePicker: false,
navigationHelpButton: false,
infoBox: false,
navigationHelpButton: false,
navigationInstructionsInitiallyVisible: false,
animation: false,
timeline: false,
fullscreenButton: false,
allowTextureFilterAnisotropic: false,
contextOptions: {
webgl: {
alpha: false,
antialias: true,
preserveDrawingBuffer: true,
failIfMajorPerformanceCaveat: false,
depth: true,
stencil: false,
anialias: false
},
},
targetFrameRate: 60,
resolutionScale: 0.1,
orderIndependentTranslucency: true,
imageryProvider: undefined,
baseLayerPicker: false,
geocoder: false,
automaticallyTrackDataSourceClocks: false,
dataSources: null,
clock: null,
terrainShadows: Cesium.ShadowMode.DISABLED
});
var center = Cesium.Cartesian3.fromDegrees(
(minWGS84[0] + maxWGS84[0]) / 2,
((minWGS84[1] + maxWGS84[1]) / 2) - 1,
200000
);
cesium.viewer.camera.flyTo({
destination: center,
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-60),
roll: Cesium.Math.toRadians(0)
},
duration: 3
});
}
function initThree() {
var fov = 45;
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width / height;
var near = 1;
var far = 10 * 1000 * 1000;
three.scene = new THREE.Scene();
three.camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
three.renderer = new THREE.WebGLRenderer({ alpha: true });
ThreeContainer.appendChild(three.renderer.domElement);
}
function init3DObject() {
//Cesium entity
var entity = {
name: 'Polygon',
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
minWGS84[0], minWGS84[1],
maxWGS84[0], minWGS84[1],
maxWGS84[0], maxWGS84[1],
minWGS84[0], maxWGS84[1],
]),
material: Cesium.Color.RED.withAlpha(0.2)
}
};
var Polygon = cesium.viewer.entities.add(entity);
//Three.js Objects
// Lathe geometry
var doubleSideMaterial = new THREE.MeshNormalMaterial({
side: THREE.DoubleSide
});
var segments = 10;
var points = [];
for (var i = 0; i < segments; i++) {
points.push(new THREE.Vector2(Math.sin(i * 0.2) * segments + 5, (i - 5) * 2));
}
var geometry = new THREE.LatheGeometry(points);
var latheMesh = new THREE.Mesh(geometry, doubleSideMaterial);
latheMesh.scale.set(1500, 1500, 1500); //scale object to be visible at planet scale
latheMesh.position.z += 15000.0; // translate "up" in Three.js space so the "bottom" of the mesh is the handle
latheMesh.rotation.x = Math.PI / 2; // rotate mesh for Cesium's Y-up system
var latheMeshYup = new THREE.Group();
latheMeshYup.add(latheMesh)
three.scene.add(latheMeshYup); // don’t forget to add it to the Three.js scene manually
//Assign Three.js object mesh to our object array
var _3DOB = new _3DObject();
_3DOB.threeMesh = latheMeshYup;
_3DOB.minWGS84 = minWGS84;
_3DOB.maxWGS84 = maxWGS84;
_3Dobjects.push(_3DOB);
// dodecahedron
geometry = new THREE.DodecahedronGeometry();
var dodecahedronMesh = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
dodecahedronMesh.scale.set(5000, 5000, 5000); //scale object to be visible at planet scale
dodecahedronMesh.position.z += 15000.0; // translate "up" in Three.js space so the "bottom" of the mesh is the handle
dodecahedronMesh.rotation.x = Math.PI / 2; // rotate mesh for Cesium's Y-up system
var dodecahedronMeshYup = new THREE.Group();
dodecahedronMeshYup.add(dodecahedronMesh)
three.scene.add(dodecahedronMeshYup); // don’t forget to add it to the Three.js scene manually
//Assign Three.js object mesh to our object array
_3DOB = new _3DObject();
_3DOB.threeMesh = dodecahedronMeshYup;
_3DOB.minWGS84 = minWGS84;
_3DOB.maxWGS84 = maxWGS84;
_3Dobjects.push(_3DOB);
console.log(_3Dobjects);
}
// Looping Renderer
function renderCesium() {
cesium.viewer.render();
}
function renderThreeObj() {
// register Three.js scene with Cesium
three.camera.fov = Cesium.Math.toDegrees(cesium.viewer.camera.frustum.fovy) // ThreeJS FOV is vertical
three.camera.updateProjectionMatrix();
var cartToVec = function (cart) {
return new THREE.Vector3(cart.x, cart.y, cart.z);
};
// Configure Three.js meshes to stand against globe center position up direction
for (var id in _3Dobjects) {
minWGS84 = _3Dobjects[id].minWGS84;
maxWGS84 = _3Dobjects[id].maxWGS84;
// convert lat/long center position to Cartesian3
var center = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2);
// get forward direction for orienting model
var centerHigh = Cesium.Cartesian3.fromDegrees((minWGS84[0] + maxWGS84[0]) / 2, (minWGS84[1] + maxWGS84[1]) / 2, 1);
// use direction from bottom left to top left as up-vector
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();
// configure entity position and orientation
_3Dobjects[id].threeMesh.position.copy(center);
_3Dobjects[id].threeMesh.lookAt(centerHigh);
_3Dobjects[id].threeMesh.up.copy(latDir);
}
// Clone Cesium Camera projection position so the
// Three.js Object will appear to be at the same place as above the Cesium Globe
three.camera.matrixAutoUpdate = false;
var cvm = cesium.viewer.camera.viewMatrix;
var civm = cesium.viewer.camera.inverseViewMatrix;
three.camera.lookAt(new THREE.Vector3(0, 0, 0));
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]
);
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));
var width = ThreeContainer.clientWidth;
var height = ThreeContainer.clientHeight;
var aspect = width / height;
three.camera.aspect = aspect;
three.camera.updateProjectionMatrix();
three.renderer.setSize(width, height);
three.renderer.render(three.scene, three.camera);
}
function loop() {
requestAnimationFrame(loop);
renderCesium();
renderThreeObj();
}
initCesium(); // Initialize Cesium renderer
initThree(); // Initialize Three.js renderer
init3DObject(); // Initialize Three.js object mesh with Cesium Cartesian coordinate system
loop(); // Looping renderer
});
修改后，发现页面依旧报错：Uncaught SyntaxError: Unexpected token 'export'。
通过对比 Cesium.js 与 three.min.js 发现该Cesium为未构建版本，需更换 gulpfile.js 中的Cesium所对应的文件目录（如下图所示），更换完成后，将 node_modules 、 /public/ThirdParty 及 package-lock.json 均删除，再次进行 npm install 命令。
安装完成后，项目目录结构如下所示（若不是，则需检查cesium依赖的版本是否为≤1.95；或是否有其它构建工具的映射配置文件：yarn等，也需删除）：
2、更新three版本
高版本出不来模型的问题 从另一位老哥那看到了解决方法，链接如下：
自此，通过 npm run start 运行项目，就出来地球和十二面体的模型啦！
踩坑不易，既然都看到这了，可以留个大拇哥再走不😊
7386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
