增加html查看器模型的宽度和高度

Question

当前，当我将下面的代码上传到网站上的HTML组件时，内容被限制在一个小框中，但HTML组件中有更多的空间来容纳内容。

有人能告诉我在哪里写代码吗？我将不胜感激！

<script type="module" 
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer 
alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
src="shared-assets/models/NeilArmstrong.glb" 
ar ar-modes="webxr scene-viewer quick-look" 
environment-image="shared-assets/environments/moon_1k.hdr" 
poster="shared-assets/models/NeilArmstrong.webp" 
seamless-poster shadow-intensity="1" camera-controls>
</model-viewer>

Answer 1

如果你想增加模型查看器框的宽度和高度，那么你可以很容易地在模型查看器上应用css标记。

model-viewer{
width:400px;
height:400px;
}

Answer 2

我也遇到了同样的问题

内容被限制在一个小框中，但是html组件中有更多的空间来容纳内容。

我的解决方案是执行以下操作：

将模型查看器包装在一个空div中，然后将CSS应用于DIV和模型查看器，从而实现了我想要的样式。

票据

当我尝试在模型查看器上使用以下宽度值时，它的样式不正确。

width: auto;
width: 100%;

下方的HTML

<div class="model-view-css-fix">
<model-viewer 
alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
src="shared-assets/models/NeilArmstrong.glb" 
ar ar-modes="webxr scene-viewer quick-look" 
environment-image="shared-assets/environments/moon_1k.hdr" 
poster="shared-assets/models/NeilArmstrong.webp" 
seamless-poster shadow-intensity="1" camera-controls>
</model-viewer>
</div>

下方的CSS

宽度将无法以100%或自动正确定型，因此vh保持50%的宽高比。

.model-view-css-fix{
object-fit: contain;
height: 80vh;
width:auto;  
}
model-viewer {
width: 40vh;
height: 80vh;
} 

Answer 3

只需将model-viewer封装在div中，并使用inherit值设置height和width属性。确保div的height和width设置为您选择的初始值。

div{
height: 50vh;
width: 50vw;
}
model-viewer{
height: inherit;
width: inherit;
}