这是我第一次使用a框架,我正在设置一个简单的a框架以在我的应用程序中显示.obj文件。没什么疯狂的,我不需要一个例子就花了太多精力。所要抓住的是,包括a框架代码将为我的根“ html”元素添加一个称为“ a-html”的类,这会破坏我的许多样式。我可以理解,如果他们在样式中包括了该类,并且随资源一起使用了该类,并且该类未使用,但是为什么要假定它在不需要接触的元素上添加一个类呢?
到目前为止,我的代码:
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls@1.0.0/dist/aframe-orbit-controls.min.js"></script>
<script src="https://unpkg.com/aframe-supercraft-loader@1.1.3/dist/aframe-supercraft-loader.js"></script>
...
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#3d-model-modal">View 3D model</button>
<div id="3d-model-modal" class="modal fade" role="dialog" >
<div class="modal-dialog" style="width:900px; height: 900px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div id="obj-container">
<a-scene vr-mode-ui="enabled: false">
<a-assets>
<a-asset-item id="model-obj" src="<c:url value="/customerStatus/getObjFile/${guid}" />" ></a-asset-item>
<a-asset-item id="textures" src="<c:url value="/customerStatus/getMtlFile" />"></a-asset-item>
</a-assets>
<a-entity obj-model="obj: #model-obj; mtl: #textures" rotation="-90 0 0"></a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 15 25"></a-entity>
<a-plane position="0 0 -10" rotation="-90 0 0" width="4000" height="4000" color="#526F35"></a-plane>
<a-sky color="#87CEEB"></a-sky>
</a-scene>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
默认情况下,它用于全屏样式和防止页面溢出/滚动。可以使用<a-scene embedded="true">
关闭样式规则,也可以覆盖样式或删除类。