I designed the following photo for the project.
Model-viewer
This is for my test sample. who wants to add a ship by clicking on a ship, which means that we have both the ship and the seat. Now it is not the case that he brings both a ship and a chair. It changes, which means there is a seat, and when we click on the ship, the seat is removed, and the ship will be instead of the seat. I don't want the chair to be removed, I want it to be both a chair and a ship.
When I add some of these objects and when I want to zoom, I have a problem. Do you have a solution?
<!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>
script.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();
});
I replaced this code but it is not working.
<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>