《Cesium 进阶知识点》- 监听相机变化事件:获取视高、级别和角度等场景信息

效果  

关键代码

使用对象 Camera 监听鼠标 changed事件。 

viewer.camera.changed.addEventListener(()=>{
    // 视高 km
    let alt = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
    // 方位角
    let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
    // 俯仰角
    let pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2);
    // 翻滚角
    let roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2);
    // 级别
    let level = 0;
    let tileRender = viewer.scene._globe._surface._tilesToRender;
    if (tileRender && tileRender.length > 0) {
        level = viewer.scene._globe._surface._tilesToRender[0]._level;
    }
    let str = `级数:${level} 视高:${alt}km  方位角:${heading}° 俯仰角:${pitch}° 翻滚角:${roll}°`;
    console.log(str);
});

延伸知识

通过视高对球做渐变透明效果,使用接口 Cesium.NearFarScalar​​​​​​​

// 视高在 400 - 200 km之间,球有一个渐变的透明效果
viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
    400 * 1000,// 最小距离,单位是 m
    0.0,     // 透明度 为 0
    200 * 1000,// 最大距离
    1.0,     // 透明度 为 1
);

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是使用Three.js监听相机位置是否改变的代码: ```javascript // 创建场景相机和渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); // 设置渲染器的大小并添加到DOM中 renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建一个立方体并将其添加到场景中 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 相机初始位置 camera.position.z = 5; // 监听相机位置的变化 camera.addEventListener('change', () => { console.log('相机位置改变了'); }); // 渲染循环 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); ``` 以上代码中,我们通过给相机添加`change`事件监听器,来检测相机位置的变化并输出一条消息。 以下是使用Cesium监听相机位置是否改变的代码: ```javascript // 创建地球场景 const viewer = new Cesium.Viewer('cesiumContainer'); // 监听相机位置的变化 viewer.camera.changed.addEventListener(() => { console.log('相机位置改变了'); }); // 创建一个模型并将其添加到场景中 const position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883); const heading = Cesium.Math.toRadians(135); const pitch = 0; const roll = 0; const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr); const entity = viewer.entities.add({ name: 'model', position: position, orientation: orientation, model: { uri: 'path/to/model.gltf', }, }); // 相机初始位置 viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 5000), }); ``` 以上代码中,我们通过给`viewer.camera.changed`事件添加监听器,来检测相机位置的变化并输出一条消息。同时,我们还创建了一个地球场景,并在其中添加了一个模型。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值