archilogic - 添加平面图按钮

Question

我对 3d.io appeditor 的archilogic 有一个非常基本的要求。

我需要将左下角的平面图按钮添加到这个空间：

https://spaces.archilogic.com/model/Panoraman/hvaj2t1s?modelResourceId=375c42b6-dd27-4e13-94f9-a822b4d31f15

有谁知道我必须添加按钮才能出现以及如何设置视点？

非常感激。

Answer 1

看起来该特定图标不在默认的 appcreator css 中。您可以通过稍微自定义相机模式菜单来添加它，例如：

 <div class="camera-mode">
    <div class="btn camera active"
         onclick="document.querySelector('.waypoints').classList.toggle('hide'), this.classList.toggle('active')">
    </div>
    <div class="btn bird"
         id="btn-bird"
         onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:7}, rotation:{x:-60}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}),  this.classList.add('active')">
    </div>
    <div class="btn person active"
         id="btn-person"
         onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:1.6}, rotation:{x:0}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}), this.classList.add('active')">
    </div>
    <div class="btn floorplan"
         id="btn-floorplan"
         onclick="document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:10}, rotation:{x:-90}}),document.querySelectorAll('.camera-mode .btn:not(.camera)').forEach(function(e){e.classList.remove('active')}),  this.classList.add('active')">
    </div>
  </div>
</div>

并为 SVG 图标添加一些 CSS

.btn.floorplan {
  background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-black.svg)
}
.btn.floorplan.active {
  background-image:url(https://spaces-static.archilogic.com/build/180201-164834-458aa7c/e3d/ui/icon-floorplan-blue.svg)
}

演示在这里

为了获得最佳结果，请根据您的模型调整参数并将和图标position托管在某处，该链接可能不会永远保持不变icon-floorplan-black.svgicon-floorplan-blue.svg