代码没有报错，但是没有显示Cesium地图，平面黑色的，不知道什么原因?

[zenghaiy]

<script setup> import * as Cesium from 'cesium'; import * as THREE from 'three'; import { initCesium } from 'cesium_dev_kit' import { onMounted } from "vue"

let viewer;
let threeJs;
let passEffect;
let graphics;
let mixer;
let dirLight;
let plane;
let clock = new THREE.Clock();
let center = [104.081701757991, 30.627042558105988];

onMounted(() => {
let instance = new initCesium({
cesiumGlobal: Cesium,
threeGlobal: THREE,
containerId: 'cesiumContainer',
threeContainerId: 'threeContainer',
viewerConfig: {
useDefaultRenderLoop: false,
selectionIndicator: false,
sceneModePicker: false
},
extreaConfig: {
depthTest: true
},
imageryProvider: {
type: "WebMapTileServiceImageryProvider",
option: {
url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=65a5f62a964c1d5b23fa81bc34147973",
layer: "img",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 18,
},
},
MapImageryList: [{
type: "WebMapTileServiceImageryProvider",
option: {
url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=65a5f62a964c1d5b23fa81bc34147973",
layer: "cia",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 18,
},
}]
});
viewer = instance.viewer;
threeJs = instance.threeJs;
passEffect = instance.passEffect;
graphics = instance.graphics;
initThree(threeJs);
})

function initThree (ThreeJs) {
const { scene, renderer } = ThreeJs.initThree({ center, threeHabit: false });
initLight(scene)
enableShadow(renderer)
flyto(scene);
}
function initLight (scene) {
const hemiLight = new THREE.HemisphereLight(0xffffffff, 0x44444444);
scene.add(hemiLight);
dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(-3, 10, -10);
scene.add(dirLight);
}

function enableShadow (renderer) {
renderer.shadowMap.enabled = true;
dirLight.castShadow = true;
}

function flyto () {
passEffect.flyTo({
position: {
x: -1336530.9847799568,
y: 5328100.491679563,
z: 3230393.568189583
},
orientation: {
heading: Cesium.Math.toRadians(257.9375062282311),
pitch: Cesium.Math.toRadians(-17.89912102479697),
roll: Cesium.Math.toRadians(359.99998263864757),
},
duration: 1.5
})
}

</script> <style lang="scss" scoped> .home { width: 100%; height: 100%; position: relative; .cesiumContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; margin: 0; overflow: hidden; } .threeContainer { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; margin: 0; pointer-events: none; } } </style>

[dengxiaoning]

是否没有高度？ height 修改为 height: 100vh; 试试

[zenghaiy]

我看了three和cesium两个容器的高度都是充满了平面，我还把three的容器设置了透明还是不显示Cesium的地球。

[zenghaiy]

`

<script setup> import * as Cesium from 'cesium'; import * as THREE from 'three'; import { initCesium } from 'cesium_dev_kit' import { onMounted } from "vue"; import { defaultStatic } from '../config/index.js';

let viewer;
let threeJs;
let passEffect;
let graphics;
let mixer;
let dirLight;
let plane;
let clock = new THREE.Clock();
let center = [104.081701757991, 30.627042558105988];

onMounted(() => {
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZmUxYjgzNi0xMTQ2LTQwZDItYWNhYy0xOTg0NjA1MmNjZDMiLCJpZCI6MjA0MTY5LCJpYXQiOjE3MTEzMjk0NzB9.wLp735-MQs4p_Gm63tk54ZoUs6f5Zg9y1rjOVwsW0So"
let instance = new initCesium({
cesiumGlobal: Cesium,
threeGlobal: THREE,
containerId: 'cesiumContainer',
threeContainerId: 'threeContainer',
viewerConfig: {
useDefaultRenderLoop: false,
selectionIndicator: false,
sceneModePicker: false
},
extreaConfig: {
depthTest: true
},
imageryProvider: {
type: "WebMapTileServiceImageryProvider",
option: {
url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=65a5f62a964c1d5b23fa81bc34147973",
layer: "img",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 18,
},
},
MapImageryList: [{
type: "WebMapTileServiceImageryProvider",
option: {
url: "http://t0.tianditu.gov.cn/cia_w/wmts?tk=65a5f62a964c1d5b23fa81bc34147973",
layer: "cia",
style: "default",
tileMatrixSetID: "w",
format: "tiles",
maximumLevel: 18,
},
}],
defaultStatic
});
viewer = instance.viewer;
threeJs = instance.threeJs;
passEffect = instance.passEffect;
graphics = instance.graphics;
initThree(threeJs);
})

function initThree (ThreeJs) {
const { scene, renderer } = ThreeJs.initThree({ center, threeHabit: false });
initLight(scene)
enableShadow(renderer)
flyto(scene);
}
function initLight (scene) {
const hemiLight = new THREE.HemisphereLight(0xffffffff, 0x44444444);
scene.add(hemiLight);
dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(-3, 10, -10);
scene.add(dirLight);
}

function enableShadow (renderer) {
renderer.shadowMap.enabled = true;
dirLight.castShadow = true;
}

function flyto () {
passEffect.flyTo({
position: {
x: -1336530.9847799568,
y: 5328100.491679563,
z: 3230393.568189583
},
orientation: {
heading: Cesium.Math.toRadians(257.9375062282311),
pitch: Cesium.Math.toRadians(-17.89912102479697),
roll: Cesium.Math.toRadians(359.99998263864757),
},
duration: 1.5
})
}

</script> <style lang="scss" scoped> .home { width: 100%; height: 100%; position: relative; .cesiumContainer { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; margin: 0; } .threeContainer { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; margin: 0; pointer-events: none; } } </style>

`
上面式所有的初始化代码

[zenghaiy]

找到原因了，没有手动调用requestAnimationFrame()，我看例子中也没有调用，以为initCesium中自己做了这些事情呢.

[dengxiaoning]

嗯厉害 👍 ，找到就好

案例中有写这个的

[zenghaiy]

融合好了之后，three.js中添加的模型，能否把模型添加到Cesium中的指定经纬度位置呢？我在文档未找到坐标转换相关的API。

[dengxiaoning]

let center = [104.081701757991, 30.627042558105988]; 就是模型加载的中心位置

[zenghaiy]

这上面是Three.js添加实体的代码，但是界面上没有看到这个实体，我把实体的宽高设置很大很小都没有看到这个实体，请大佬看看代码是否有问题？

[dengxiaoning]

mesh位置是否设置有问题，你可以先拷贝我的案例，看能否正确加载

[zenghaiy]

感谢解疑，现在我的模型能够加载进来了，我想修改three.js模型的朝向Z轴朝上，我通过THREE.Object3D.DEFAULT_UP.set(0,0,1)不起作用，方向一点没变。

[dengxiaoning]

试试 mesh.position.set(0, 0, 1);

[dengxiaoning]

也可以 mesh.rotation.x = -Math.PI / 2;