VoxelInspector 是一个使用 CesiumJS 和 Three.js 技术实现的工具,可以用于可视化和编辑 3D Voxels,它支持多种操作,包括创建和删除 Voxels、修改 Voxels 的属性、显示和隐藏 Voxels 等。
使用 VoxelInspector 工具需要以下环境:
下载 VoxelInspector 工具源码,并将其部署到您的 CesiumJS 应用程序的公共目录中。
例如:
Cesium.Apps/SampleData/VoxelInspector/
├── cesium
├── js
│ ├── VoxelHandler.js
│ ├── VoxelInspector.js
│ └── VoxelShaders.js
├── css
│ └── VoxelInspector.css
├── img
│ ├── Add.png
│ ├── Delete.png
│ ├── Hide.png
│ └── Show.png
└── index.html
然后将以下代码添加到您的 HTML 页面中:
<link href="./SampleData/VoxelInspector/css/VoxelInspector.css" rel="stylesheet">
<script src="./SampleData/VoxelInspector/js/VoxelShaders.js"></script>
<script src="./SampleData/VoxelInspector/js/VoxelHandler.js"></script>
<script src="./SampleData/VoxelInspector/js/VoxelInspector.js"></script>
在 CesiumJS 场景中创建 VoxelInspector 实例:
var viewer = new Cesium.Viewer('cesiumContainer');
var voxelInspector = new VoxelInspector(viewer);
或者,您可以在单独的 Three.js 场景中使用 VoxelInspector:
var voxelInspector = new VoxelInspector();
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var renderScene = function () {
requestAnimationFrame(renderScene);
voxelInspector.render(scene, camera);
renderer.render(scene, camera);
};
renderScene();
接下来,您可以使用以下方法修改 Voxels:
在指定位置添加一个新的 Voxel,颜色为 color。position 应该是一个 CesiumJS Cartographic 对象。
voxelInspector.addVoxel(new Cesium.Cartographic(-1.0, -1.0, 0.1), 0xff0000);
删除指定位置的 Voxel。position 应该是一个 CesiumJS Cartographic 对象。
voxelInspector.deleteVoxel(new Cesium.Cartographic(-1.0, -1.0, 0.1));
修改指定位置的 Voxel 颜色。position 应该是一个 CesiumJS Cartographic 对象。
voxelInspector.setVoxelColor(new Cesium.Cartographic(-1.0, -1.0, 0.1), 0x00ff00);
显示或隐藏指定位置的 Voxel。position 应该是一个 CesiumJS Cartographic 对象。visible 应该是一个布尔值,为 true 显示,为 false 隐藏。
voxelInspector.setVoxelVisibility(new Cesium.Cartographic(-1.0, -1.0, 0.1), false);
返回指定位置的 Voxel 对象,如果该位置没有 Voxel,返回 null。position 应该是一个 CesiumJS Cartographic 对象。
var voxel = voxelInspector.getVoxelAt(new Cesium.Cartographic(-1.0, -1.0, 0.1));
if (voxel) {
console.log('Voxel color is ' + voxel.color.toString(16));
}
可以在以下链接中查看 VoxelInspector 工具的示例:https://cesiumjs.org/Cesium/Apps/SampleData/VoxelInspector/