How can you restrict the view in the model viewer to prevent users from viewing underneath the 3D object?

Just starting out in the world of web development!

I've been tinkering with Modelviewer for a while now, trying to put a 3D map model on a live server. However, one issue I've encountered is that users can see 'under the map.' Any advice on how to address this? Couldn't find any solutions on .

Check out the Front View of the 3D-model here

If you're curious, here's an image of the problem: Under View of the 3D-model

Take a look at the current code snippet for the camera controls:

<model-viewer id="hotspot-camera-view-demo" src="assets/scene.gltf" camera-controls auto-rotate ar ios-src="assets/Low_Poly_Lake_Scene.usdz" camera-controls enable-pan touch-action="none" camera-orbit="-8.142746deg 68.967deg 0.6179899m" camera-target="-0.003m 0.0722m 0.0391m" field-of-view="45deg" min-field-of-view="25deg" max-field-of-view="45deg" interpolation-decay="200" min-camera-orbit="auto auto 5%" ar ar-modes="webxr scene-viewer quick-look"></model-viewer>

Answer №1

After successfully figuring out how to make it function, I can now move the 3D model from side to side horizontally, but not up and down vertically.

<model-viewer id="hotspot-camera-view-demo" src="assets/scene.gltf" camera-controls auto-rotate
    ar ios-src="assets/Low_Poly_Lake_Scene.usdz" camera-controls enable-pan touch-action="none"
    camera-orbit="0deg 75deg 25m" camera-target="-0.003m 0.0722m 0.0391m" field-of-view="45deg"
    min-field-of-view="25deg" max-field-of-view="45deg" interpolation-decay="200"
    min-camera-orbit='auto 75deg auto' max-camera-orbit= 'auto 75deg auto' ar
    ar-modes="webxr scene-viewer quick-look">

However, I'm curious if there's a way to prevent movement along the x-axis exceeding positive values when viewing the top of the 3D model.

For example:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having Difficulty Formatting HTML Input in Next.js

I'm encountering difficulties when trying to style HTML form elements in Next.js. I've been unsuccessful in applying CSS using a simple class name from the imported stylesheet, but have managed to achieve some success with inline styling by using ...

How can I alter the color of a face on a mesh that I imported into Three.js?

I'm having trouble figuring out how to change the color of a mesh imported from Blender in three.js. Any guidance on this issue would be greatly appreciated. Furthermore, I'm interested in learning how to make a specific face (or any face from a ...

Creating floating labels with Bootstrap 5 in an input group

I would like to combine Bootstrap's "Floating Label" and "Input Group" components, but I'm encountering an issue where the label disappears when the input is focused. Below, I have outlined the different scenarios in my code: Both components (no ...

Hover over a row in one table to modify the appearance of another row in a different table

Is there a way to change the appearance of rows in one table when hovering over rows in another table that are related? You can find a JSFiddle link illustrating what I am trying to achieve. Here is an example of the code: table#table1 #el1:hover + ta ...

Using JQuery to target and style individual td elements within a database in a

Hey there! I'm currently in the process of learning jQuery and I've encountered a little issue with the code below: <table class="table table-bordered table-striped table-hover datatable"> <thead> <tr> & ...

Text-color in the v-tooltip

Is there a way to change the text color of v-tooltips components without affecting the tooltip background color? I attempted to inspect the element, but the tooltip only appears on hover, making it impossible to inspect. Below is the code snippet: < ...

Seeing the Bootstrap css load immediately upon the page loading and switching between pages

Upon loading my webpage or navigating between subpages, I've noticed that the Bootstrap.css styles are interfering with my CSS transitions. For some reason, my regular links appear orange initially, but they turn blue during loading or when transition ...

Can a dynamic form action be achieved?

My toolbar has 3 buttons (delete, block, unblock). Is it possible to dynamically change the form action? <form action="/users/groupUnblock" method="POST"> <button type="submit" class="btn btn-danger btn-sm" ...

Applying CSS transition delays to multiple images

I'm having trouble implementing a transition delay in my CSS. I've tried adding it in various places but it doesn't seem to be working as expected. This is my CSS: .imageBox { position: relative; float: left; transition ...

Issues with CSS rendering in the Chrome browser are causing display problems

After successfully creating an iFrames page tab on Facebook that looks great in Firefox and Internet Explorer, I encountered an issue with the div positioning in Chrome. You can view the page here: Oddly enough, this is the only page experiencing problems ...

Troublesome CSS media queries failing to meet expectations

I am facing an issue with two divs that are supposed to be 368px x 228px and sit next to each other. Despite my attempts to apply media queries and run tests, I am unable to resolve the issue. Can someone guide me on how to fix this? Below is my code: < ...

Styling Buttons with Overlapping Effects using Styled Components

Having trouble with button overlapping in my project. I'm trying to achieve the layout shown in the attached image https://i.sstatic.net/aXIdh.png Check out the Codesandbox demo HERE const MainButton = styled.button` border-radius: 50%; border: 2 ...

Clicking on the element will not cause the body to scroll

For some reason, I need to keep the onclick function, but I'm struggling to make it work as intended. What I want is for the body to slide to the next logo when the previous logo is clicked. This is a simplified version of what I have: <div class ...

Difficulty in moving to the left side

I'm attempting to make the parent div slide to the left when one of its children is clicked. However, I keep encountering the following error message: Uncaught TypeError: Property '#' of object # is not a function $(".Area").live("click ...

Utilizing Flask to insert data into a MySQL database table

Hey there, I'm running into some trouble with inserting values into my database. While I can successfully log in using the same method on the sign-up page, I've tried various options without success. Below is my Python code: from flask import F ...

The HTML element update event was not triggered due to the excessive load of a JavaScript function

I am currently running a JavaScript function that is quite CPU intensive. To provide visual feedback to users when it starts and stops, I am attempting to display a badge on the webpage. Below is the code snippet: function updateView() { console.log(1 ...

Creating an atom without any boundaries: A step-by-step guide

While browsing the Atom forum, I stumbled upon a post discussing scripts for enhancing the UI of Atom. I'm curious about where to place these scripts. Should they go in the Atom init script? Any guidance would be highly valued. Visit this link for m ...

What causes the sub-menus to move even when they are set to position: absolute?

The sub-menu items under the about link appear to be slightly shifted from the left, despite setting it with position: absolute; left: 0px. I aim to have all menu items (including sub-menus) perfectly overlapped. Below is the code snippet: <html> & ...

Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling: #footer { height: 100px; background-color: #F3F3F3; position: absolute; bottom: 0; } Although the footer is displaying at th ...

Updating the font style in MUI with React 18

I attempted to create a new theme in order to replace the default font family of MUI but unfortunately, it was not successful. This is what my theme component looks like: import { createTheme } from "@mui/material/styles"; const theme = createT ...