Arcgis api 4.x 3D室内户型浏览效果/黑色背景（附上完整vue代码）

1.效果

2.功能拆分 

2.1 黑幕效果

简单来说，三维场景中分为地面和天空，如果把地面和天空都设置成黑色，那就实现了黑幕效果；

 scene = new WebScene({
    basemap: "topo-vector",
    ground: new Ground({
      surfaceColor: [0, 0, 0, 1],
      opacity: 0, //给地面设置透明度
    }),
    layers: [model_graphicsLayer],
  });
 view = new SceneView({
    container: "map_box",
    map: scene,
    alphaCompositingEnabled: true, // 控制SceneView是否启用alpha混合（透明度合成）
    camera: {
      position: [118.30180628424577, 32.27081492598214, 293.42],
      tilt: 47.6,
      heading: 89.68,
    },
    qualityProfile: "high", //渲染质量
    environment: {
      background: {
        type: "color",
        color: [0, 0, 0, 1],
      },
      starsEnabled: false, // 星星在三维场景的天空背景不可见
      atmosphereEnabled: false, // 大气效果不渲染
    },
  });

2.2 加载三维模型

导入gltf 3D模型；这里需要注意的是，在官方文档中提到，“导入模型的URL可以指向引用外部二进制资源（.bin文件和纹理）的glTF文件（.gltf），也可以指向单个二进制文件（.glb）”；

      下图展示我的模型资源，“.bin文件”、“gltf文件”和纹理都应该在一个文件夹下，涉及模型版权，就不给大家下载了。

 var model_simpleMarkerSymbol = {
    type: "point-3d",
    symbolLayers: [
      {
        type: "object",
        width: 100, //模型宽度
        // height: 20, //模型高度
        resource: {
          href: "http://127.0.0.1:5173/model/home/home.gltf",
        },
        heading: 360, //朝向
      },
    ],
  };
  const model_graphicsLayer = new GraphicsLayer();
  const model_point = {
    type: "point",
    longitude: 118.3036022,
    latitude: 32.27082817,
    z: 100,
  };
  const model_pointGraphic = new Graphic({
    geometry: model_point,
    symbol: model_simpleMarkerSymbol,
  });
  model_graphicsLayer.add(model_pointGraphic);

官方文档https://developers.arcgis.com/javascript/latest/sample-code/import-gltf/ 

3.完整代码 

<script setup>
import { onMounted, ref, reactive } from "vue";
import WebScene from "@arcgis/core/WebScene";
import SceneView from "@arcgis/core/views/SceneView";
import Ground from "@arcgis/core/Ground";
import SceneLayer from "@arcgis/core/layers/SceneLayer";
import Graphic from "@arcgis/core/Graphic";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";

onMounted(() => {
  MapInit();
});

// 全局地图实例
let view;
let scene;

function MapInit() {
  //=========================================================================================================
  //↓ 内部模型
  var model_simpleMarkerSymbol = {
    type: "point-3d",
    symbolLayers: [
      {
        type: "object",
        width: 100, //模型宽度
        // height: 20, //模型高度
        resource: {
          href: "http://127.0.0.1:5173/model/home/home.gltf",
        },
        heading: 360, //朝向
      },
    ],
  };
  const model_graphicsLayer = new GraphicsLayer();
  const model_point = {
    type: "point",
    longitude: 118.3036022,
    latitude: 32.27082817,
    z: 100,
  };
  const model_pointGraphic = new Graphic({
    geometry: model_point,
    symbol: model_simpleMarkerSymbol,
  });
  model_graphicsLayer.add(model_pointGraphic);
  //↑ 内部模型
  //=========================================================================================================
  scene = new WebScene({
    basemap: "topo-vector",
    ground: new Ground({
      surfaceColor: [0, 0, 0, 1],
      opacity: 0, //给地面设置透明度
    }),
    layers: [model_graphicsLayer],
  });
  view = new SceneView({
    container: "map_box",
    map: scene,
    alphaCompositingEnabled: true, // 控制SceneView是否启用alpha混合（透明度合成）
    camera: {
      position: [118.30180628424577, 32.27081492598214, 293.42],
      tilt: 47.6,
      heading: 89.68,
    },
    qualityProfile: "high", //渲染质量
    environment: {
      background: {
        type: "color",
        color: [0, 0, 0, 1],
      },
      starsEnabled: false, // 星星在三维场景的天空背景不可见
      atmosphereEnabled: false, // 大气效果不渲染
    },
  });

  view.ui.remove("attribution");
  view.ui.remove("zoom");
  view.ui.remove("navigation-toggle");
  view.ui.remove("compass");
}
</script>

<template>
  <div id="map_box"></div>
</template>

<style scoped>
@import "https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/dark/main.css";
@import "https://js.arcgis.com/calcite-components/2.11.1/calcite.css";
#map_box {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  background: rgb(0, 0, 0);
}

.esri-view {
  --esri-view-outline-color : rgba(0,0,0,0) !important;
}
</style>

     当然，加载完模型，再结合点符号就更直观啦！

 （如果文章对你有帮助，可以点个赞鼓励下博主噢！）