增加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>

- Dhugal Robertson

---

<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> - Dhugal Robertson

欢迎来到StackOverflow：如果您发布代码、XML、标记或数据样本，请在文本编辑器中突出显示这些行，并单击编辑器工具栏上的“代码示例”按钮（{}）以使其格式化和语法高亮！ - marc_s

你有任何影响模型查看器的CSS吗？ - Colin Gell

没有，但是HTML组件允许样式输入，我只是不知道代码。我已经尝试在代码的几乎所有位置放置以下内容以尝试影响它。 - Dhugal Robertson

<style> {Width 600px; height 800px;}</style> - Dhugal Robertson

Answer 1

如果您想增加模型查看器框的宽度和高度，那么您可以在模型查看器标签上轻松应用CSS。

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

- Iron Man

Answer 2

我也遇到了完全相同的问题

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

对我来说解决方案如下：

将model-viewer包装在一个空的div中，并对DIV和model-viewer应用CSS以实现所需的样式。

注意事项

当我尝试在model-viewer上使用以下宽度值时，它无法正确地进行样式设置。

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

- Udesh

Answer 3

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

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

- Lucky yadav

Answer 4

我试过这个方法，对我的情况来说完美地起作用了。

.wrapper{
width: 500px;
height: 300px;
}
model-viewer{
  height: 100%;
  width: auto;
}

        <div class="wrapper">
          <!--3D Model goes inside this div-->
          
          <model-viewer 
          ar 
          ar-modes="webxr" 
          camera-controls
          disable-pan
          disable-zoom
          min-camera-orbit="auto 80deg auto"
          max-camera-orbit="auto 80deg auto"
          touch-action="none"
          src="male.gltf"
          shadow-intensity="1"
          alt="3d Human Model"
          camera-orbit="18.9deg 77.33deg 0.703m"
          camera-target="-0.00m 0.175m 0.00m"
          field-of-view="33deg"
          max-field-of-view="33deg"
          min-field-of-view="17deg"
          interpolation-decay="300">

        </div>

- Kiarash P