首页 > 其他分享 >threejs画布叠加在cesium画布上不显示

threejs画布叠加在cesium画布上不显示

时间:2024-07-12 14:19:17浏览次数:12  
标签:threejs 渲染 viewer Three js 画布 Cesium cesium

这个问题可能是由于Three.js和Cesium在渲染顺序或者渲染上下文方面存在冲突导致的。Three.js和Cesium都是用于创建3D或2D地图的库,它们各自管理自己的渲染画布(WebGL上下文)。

解决方法:

  1.  确保Cesium初始化先于Three.js。Cesium需要完全初始化并且渲染其画布之后,Three.js才能在同一个DOM元素上进行渲染。 

  2.  使用Cesium的WebGL的 overlays功能,将Three.js的画布叠加在Cesium的画布上。这样做可以让Cesium管理其自身的渲染,而Three.js则在一个WebGL的overlay上绘制。 

示例代码:

// 初始化Cesium
var cesiumWidget = new Cesium.CesiumWidget('cesiumContainer');
var scene = cesiumWidget.scene;
 
// 初始化Three.js,并将其画布作为overlay叠加在Cesium上
var threeCanvas = document.createElement('canvas');
var threeRenderer = new THREE.WebGLRenderer({ canvas: threeCanvas });
threeRenderer.autoClear = false; // 关闭自动清除背景
 
// 在Cesium中添加Three.js的画布作为overlay
var viewer = cesiumWidget.viewer;
viewer.scene.postRender.addEventListener(function () {
    if (threeCanvas.width !== viewer.canvas.width) {
        threeCanvas.width = viewer.canvas.width;
        threeCanvas.height = viewer.canvas.height;
    }
    threeRenderer.clear();
    threeRenderer.render(threeScene, threeCamera);
});

确保在Cesium的渲染循环中调用Three.js的渲染函数,这样可以在Cesium的WebGL上下文创建好之后,再进行Three.js的渲染。

注意:在实际使用时,还需要初始化Three.js的场景(threeScene)和相机(threeCamera),并且设置合适的尺寸和位置。

标签:threejs,渲染,viewer,Three,js,画布,Cesium,cesium
From: https://www.cnblogs.com/2008nmj/p/18298286

相关文章

  • Cesium 点击查询
    代码letclickHandler=null;//functioninitClickHandler(){//初始化clickHandler=newCesium.ScreenSpaceEventHandler(viewer.scene.canvas);//绑定左点击事件clickHandler.setInputAction((click)=>{//获取球面坐标可用于定位或者渲染点位数据......
  • 从山川湖海到城市建筑,Cesium带你遍览!
    Cesium与山海鲸CesiumCesium是一个能够让我们以全新的视角探索地球、分析数据的强大平台,无论是山川湖海、城市建筑,还是气候变化、自然灾害,Cesium都能以三维模型的形式生动呈现在我们的面前。 山海鲸Cesium——山海鲸可视化软件与CesiumJS的结合体,适用于各种需要三维GIS渲染和......
  • 起底:Three.js和Cesium.js,二者异同点,好比全科和专科.
    Three.js和Cesium.js是两个常用的webGL引擎,很多小伙伴容易把它们搞混淆了,今天威斯数据来详细介绍一下,他们的起源、不同点和共同点,阅读后你就发现二者就像全科医院和专科医院的关系,很好识别。一、二者的起源Three.js的起源:Three.js是由RicardoCabello(也被称为mrdoob)创建的开......
  • Cesium案例效果图
    ......
  • CesiumJS【Basic】- #073 日月矢量
    文章目录日月矢量1目标2代码日月矢量1目标绘制对日矢量和对月矢量2代码/**@Author:alan.lau*@Date:2024-06-1611:15:48*@LastEditTime:2024-06-1611:43:02*@LastEditors:alan.lau*@Description:*@FilePath:\my-cesium......
  • CesiumJS【Basic】- #072 太阳和月亮的位置
    文章目录太阳和月亮的位置1目标2代码太阳和月亮的位置1目标获得当前时刻太阳和月亮的位置信息2代码import*asCesiumfrom"cesium";constviewer=newCesium.Viewer("cesiumContainer",{terrain:Cesium.......
  • threejs入门2:Creating a scene
    参考:https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-sceneThegoalofthissectionistogiveabriefintroductiontothree.js.Wewillstartbysettingupascene,withaspinningcube.Aworkingexampleisprovidedatthebottomof......
  • Cesium常见设置视角所用到函数
     1.左键拾取经纬度坐标consthandler=newCesium.ScreenSpaceEventHandler(viewer.canvas)//监听鼠标点击事件handler.setInputAction(function(click){//使用pick函数获取点击位置的实际位置varcartesian=viewer.scene.pickPositi......
  • CesiumJS【Basic】- #053 绘制渐变填充多边形(Entity方式)-使用canvas
    文章目录绘制渐变填充多边形(Entity方式)-使用canvas1目标2代码2.1main.ts绘制渐变填充多边形(Entity方式)-使用canvas1目标使用Entity方式绘制绘制渐变填充多边形-使用canvas2代码2.1main.tsimport*asCesiumfrom'cesium';constviewer......
  • CesiumJS【Basic】- #054 绘制渐变填充多边形(Entity方式)-使用shader
    文章目录绘制渐变填充多边形(Entity方式)-使用shader1目标2代码2.1main.ts绘制渐变填充多边形(Entity方式)-使用shader1目标使用Entity方式绘制绘制渐变填充多边形-使用shader2代码2.1main.tsimport*asCesiumfrom'cesium';constviewer......