如何在模型查看器中显示多个对象？-解网

问：

我为这个项目设计了以下照片。

模型查看器

这是我的测试样品。谁想通过点击一艘船来添加一艘船，这意味着我们既有船又有座位。现在不是他既带船又带椅子的情况。它改变了，这意味着有一个座位，当我们点击船时，座位被移除，船将代替座位。我不想把椅子移走，我希望它既是一把椅子，又是一艘船。

当我添加其中一些对象并想要缩放时，我遇到了一个问题。你有解决方案吗？

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Model-Viewer</title>
</head>
<body>
<model-viewer src="Chair.glb" poster="Chair.webp" shadow-intensity="1" ar camera-controls touch-action="pan-y" alt="A 3D model carousel">
    <button slot="ar-button" id="ar-button">
        View in your space
    </button>
    <button id="ar-failure">
        AR is not tracking!
    </button>
    <div class="slider">
        <div class="slides">
            <button class="slide selected" onclick="switchSrc(this, 'Chair')" style="background-image: url('Chair.webp');">
            </button>
            <button class="slide" onclick="switchSrc(this, 'Mixer')" style="background-image: url('Mixer.webp');">
            </button><button class="slide" onclick="switchSrc(this, 'GeoPlanter')" style="background-image: url('GeoPlanter.webp');">
            </button><button class="slide" onclick="switchSrc(this, 'ToyTrain')" style="background-image: url('ToyTrain.webp');">
            </button>
            <button class="slide" onclick="switchSrc(this, 'Canoe')" style="background-image: url('Canoe.webp');">
            </button>
        </div>
    </div>
</model-viewer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script src="script.js"></script>
</body>
</html>

脚本.js

const modelViewer = document.querySelector("model-viewer");
     
window.switchSrc = (element, name) => {
    const base = "/" + name;
    modelViewer.src = base + '.glb';
    modelViewer.poster = base + '.webp';
    const slides = document.querySelectorAll(".slide");
    slides.forEach((element) => {
        element.classList.remove("selected");
    });
    element.classList.add("selected");
}

document.querySelector(".slider").addEventListener('beforexrselect', (ev) => {
    ev.preventDefault();
});

我替换了此代码，但它不起作用。

<model-viewer src="scene.gltf" camera-controls>
  <button onclick="toggleShip()">Toggle Ship</button>
  <button onclick="toggleChair()">Toggle Chair</button>
  <a-entity id="ship" gltf-model="#ship" visible></a-entity>
  <a-entity id="chair" gltf-model="#chair" visible></a-entity>
</model-viewer>

<script>
  const ship = document.querySelector('#ship');
  const chair = document.querySelector('#chair');

  function toggleShip() {
    ship.setAttribute('visible', !ship.getAttribute('visible'));
  }

  function toggleChair() {
    chair.setAttribute('visible', !chair.getAttribute('visible'));
  }
</script>

JavaScript HTML 模型查看器

如何在模型查看器中显示多个对象？

How to display multiple objects in a model-viewer?

评论