在cesium中使用threejs

最新推荐文章于 2024-08-20 10:05:27 发布

原创

最新推荐文章于 2024-08-20 10:05:27 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

// 创建Cesium的Viewer
var viewer = new Cesium.Viewer("cesiumContainer");
 
// 创建Three.js的场景
var scene = new THREE.Scene();
 
// 创建Three.js的相机
var camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
 
// 创建Three.js的渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建Three.js的控件（例如OrbitControls）
var controls = new THREE.OrbitControls(camera, renderer.domElement);
 
// 将Three.js的相机位置和方向与Cesium的相机同步
viewer.scene.postRender.addEventListener(function () {
  var cesiumCamera = viewer.camera;
  var cesiumToThreejsMatrix = new Cesium.Matrix4();
  Cesium.Matrix4.fromRotationTranslation(
    new Cesium.Matrix3(),
    cesiumCamera.positionWC,
    cesiumToThreejsMatrix
  );
  cesiumToThreejsMatrix = Cesium.Matrix4.inverse(cesiumToThreejsMatrix);
  camera.matrixWorld.copy(cesiumToThreejsMatrix);
  camera.matri