添加平面图按钮

Question

我有一个非常基本的要求，关于3d.io应用程序的逻辑。

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

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)
}

Demo here

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