Cesium--旋转3dtiles

以下代码来自Cesium 论坛:3DTileset rotation - CesiumJS - Cesium Community

在1.118中测试可行,可直接在Sandcastle中运行:

复制代码
const viewer = new Cesium.Viewer("cesiumContainer", {
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

// Disable the ("globe") rotation for left mouse drags
viewer.scene.screenSpaceCameraController.enableRotate = false;

let tileset = viewer.scene.primitives.add(
  await Cesium.Cesium3DTileset.fromIonAssetId(40866)
);

// Store the transform of the root node of the
// tileset as the "root transform", assign this
// as the initial model matrix, and set the
// transform of the root node to be the identity
const rootTransform = Cesium.Matrix4.clone(tileset.root.transform);
tileset.modelMatrix = Cesium.Matrix4.clone(rootTransform);
tileset.root.transform = Cesium.Matrix4.clone(Cesium.Matrix4.IDENTITY);
const fullRotationMatrix = Cesium.Matrix4.clone(Cesium.Matrix4.IDENTITY);

let selectedTileset;
let initialMousePosition;
const enableTransformEditor = true;

const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

handler.setInputAction(async (click) => {
  const pickedObject = viewer.scene.pick(click.position);
  if (enableTransformEditor && pickedObject && !pickedObject.id) {
    selectedTileset = pickedObject.primitive;
    initialMousePosition = Cesium.Cartesian2.clone(click.position);
  }
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction((click) => {
  selectedTileset = null;
  initialMousePosition = null;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

handler.setInputAction((movement) => {
  if (selectedTileset && initialMousePosition) {
    const translation = new Cesium.Cartesian3();
    Cesium.Matrix4.getTranslation(selectedTileset.modelMatrix, translation);

    const dx = movement.endPosition.x - initialMousePosition.x;
    const yaw = Cesium.Math.toRadians(dx);

    // Compute the rotation matrix, and multiply it
    // to the "full rotation matrix"
    const rotation3 = Cesium.Matrix3.fromRotationZ(yaw);
    const rotationMatrix = Cesium.Matrix4.fromRotation(rotation3);

    Cesium.Matrix4.multiply(
      fullRotationMatrix,
      rotationMatrix,
      fullRotationMatrix
    );

    // Compute the new model matrix from the
    // root transform and the full rotation matrix
    const newModelMatrix = Cesium.Matrix4.clone(Cesium.Matrix4.IDENTITY);
    Cesium.Matrix4.multiply(rootTransform, fullRotationMatrix, newModelMatrix);

    // Apply the new model matrix
    selectedTileset.modelMatrix = newModelMatrix;

    // Update initialMousePosition for the next movement
    initialMousePosition = Cesium.Cartesian2.clone(movement.endPosition);
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

viewer.zoomTo(tileset);
相关推荐
3D小将9 小时前
3D格式转换之Rhino转换为IGS格式技术
3d·stp模型·igs模型·glb模型
PhotonixBay19 小时前
InGaAs微透镜3D形貌怎么测?共聚焦显微镜在光通信的应用实践
功能测试·测试工具·3d·测试标准
学习星球1 天前
AI 一句话生成 3D 游戏世界:腾讯 HY-World 2.0 开源深度解析与本地实战
开发语言·人工智能·游戏·3d·ai·课程设计·ai编程
ai小陈2 天前
Hunyuan3D-2云端部署实战:图生3D、文生3D怎么跑更稳
人工智能·科技·3d·ai·音视频·gpu算力
独立开发之道2 天前
Three.js 创建 VR 内容:四步把一个普通 3D 场景送进头显
javascript·3d·vr
k4m7v2pz2 天前
Bevy 0.18.1 雨雪天气粒子系统排障实录:四个“想当然“如何让 3D/2D 粒子全部不可见
3d·游戏开发·3d渲染·bevy·天气粒子·2d渲染
戴西软件2 天前
戴西iDWS.3DViz Suite数据轻量化可视化软件,从传统桌面软件向云端协同的重大突破
大数据·运维·网络·人工智能·机器学习·3d
Jmyd01232 天前
实训室的 3D 模型涉及肖像文物,数据安全与合规怎么做?
安全·3d·数据安全·虚拟实训
AI视觉网奇3 天前
3d子部件高亮选中
开发语言·javascript·3d
我才是银古3 天前
当 360° 全景遇上真实地图:Vue 3 实现全景-地图双向联动的工程实践
3d·vue3·360影像