RiO São Francisco
![<div id="ardisplay_viewer_3270" class="ardisplay_viewer nodisplay"><script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script><model-viewer id="model_3270" ar ar-modes="webxr scene-viewer quick-look" camera-controls auto-rotate
ios-src="https://ar-vr.online/wp-content/uploads/2023/02/saofranciscoazul_ios-1.usdz"
src="https://ar-vr.online/wp-content/uploads/2023/02/saofranciscoazul_android-1.glb"
field-of-view=""
max-camera-orbit="Infinity auto 100%""
min-camera-orbit="auto auto 100%""
exposure="1"
shadow-intensity="1"
shadow-softness="1"
poster=""
alt="AR Display 3D model"
class="ar-display-model-viewer"
quick-look-browsers="safari chrome"
><button slot="ar-button" class="ar-button " id="ar-button_3270"><img id="ar-img_3270" src="https://ar-vr.online/wp-content/uploads/2022/02/viewar.png" class="ar-button-img"></button><div class="ar-qrcode-btn-container hide_on_devices">
<button id="ar-qrcode_3270" type="button" class="ar-qrcode hide_on_devices" onclick="this.classList.toggle('ar-qrcode-large');" style="display: none; background-image: url(data:image/png;base64,);"></button>
</div><div class="ar-reset-btn-container">
<button id="ar-reset_3270" class="ar-reset" onclick="document.getElementById('model_3270').setAttribute('camera-orbit', '');return getData()"><img src="https://ar-vr.online/wp-content/plugins/ar-for-wordpress/assets/images/reset.png"></button>
</div><div class="ar-popup-btn-container "><button id="ar_pop_Btn_3270" class="ar_popup-btn hide_on_devices" type="button"><img src="https://ar-vr.online/wp-content/plugins/ar-for-wordpress/assets/images/fullscreen.png" class="ar-fullscreen_btn-img"></button></div><input type="hidden" id="src_3270" value="https://ar-vr.online/wp-content/uploads/2023/02/saofranciscoazul_android-1.glb">
<button slot="hotspot-dot+X-Y+Z" class="dot nodisplay" data-position="1 -1 1" data-normal="1 0 0"></button>
<button slot="hotspot-dim+X-Y" class="dimension nodisplay" data-position="1 -1 0" data-normal="1 0 0"></button>
<button slot="hotspot-dot+X-Y-Z" class="dot nodisplay" data-position="1 -1 -1" data-normal="1 0 0"></button>
<button slot="hotspot-dim+X-Z" class="dimension nodisplay" data-position="1 0 -1" data-normal="1 0 0"></button>
<button slot="hotspot-dot+X+Y-Z" class="dot nodisplay" data-position="1 1 -1" data-normal="0 1 0"></button>
<button slot="hotspot-dim+Y-Z" class="dimension nodisplay" data-position="0 -1 -1" data-normal="0 1 0"></button>
<button slot="hotspot-dot-X+Y-Z" class="dot nodisplay" data-position="-1 1 -1" data-normal="0 1 0"></button>
<button slot="hotspot-dim-X-Z" class="dimension nodisplay" data-position="-1 0 -1" data-normal="-1 0 0"></button>
<button slot="hotspot-dot-X-Y-Z" class="dot nodisplay" data-position="-1 -1 -1" data-normal="-1 0 0"></button>
<button slot="hotspot-dim-X-Y" class="dimension nodisplay" data-position="-1 -1 0" data-normal="-1 0 0"></button>
<button slot="hotspot-dot-X-Y+Z" class="dot nodisplay" data-position="-1 -1 1" data-normal="-1 0 0"></button>
<div id="controls" class="dimension" style="display:block">
<label for="show-dimensions_3270" style="margin:0px !important;">Dimensions:</label>
<input id="show-dimensions_3270" type="checkbox" style="cursor: pointer;">
</div>
</model-viewer>
<style>/* Custom CSS Styling */
</style>
<style> #ar-button_3270_pop{top:40px !important;}</style><style> .dimension{left:50px !important;}</style>
<style>
/*Model Viewer Size*/
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.ardisplay_viewer{
min-height:300px;
height:300px;
width: 100%;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.ardisplay_viewer{
min-height:400px;
height:400px;
width: 100%;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.ardisplay_viewer{
min-height:500px;
height:500px;
width: 100%;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.ardisplay_viewer{
min-height:600px;
height:600px;
width: 100%;
}
}
/*Dimensions*/
.dot{
width: 10px;
height: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
background: #fff;
}
.dimension{
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
color: rgba(0, 0, 0, 0.8);
font-family: Futura, Helvetica Neue, sans-serif;
font-size: 12px;
font-weight: 600;
max-width: 128px;
padding: 0.25em 0.5em;
}
/*Hot Spots*/
.hotspot{
font-size: 12px;
}
/*Call to Action Button */
.ar_cta_button{
font-size: 12px;
}
.ar-reset {
position: absolute;
top: 6px;
left: 6px;
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background: none;
/*margin-right: 4px;*/
border-radius: 4px;
border: none;
cursor: pointer;
}
</style>
<script>
const modelViewerTransform3270 = document.querySelector("model-viewer#model_3270");
const updateScale3270 = () => {
modelViewerTransform3270.scale = '1 1 1';
};
updateScale3270();
</script> <script type="module">
const modelViewer = document.querySelector('#model_3270');
modelViewer.querySelector('#src_3270').addEventListener('input', (event) => {
modelViewer.src = event.target.value;
});
const checkbox = modelViewer.querySelector('#show-dimensions_3270');
checkbox.addEventListener('change', () => {
modelViewer.querySelectorAll('button').forEach((hotspot) => {
if ((hotspot.classList.contains('dimension'))||(hotspot.classList.contains('dot'))){
if (checkbox.checked) {
hotspot.classList.remove('nodisplay');
} else {
hotspot.classList.add('nodisplay');
}
}
if (document.getElementById("ar_pop_Btn_3270").classList.contains('nodisplay')){
document.getElementById("ar_pop_Btn_3270").classList.remove('nodisplay');
document.getElementById("ar_close_3270_pop").classList.remove('nodisplay');
}document.getElementById("ar-button_3270").classList.remove('nodisplay');
document.getElementById("ar-qrcode_3270").classList.remove('nodisplay');
});
});
modelViewer.addEventListener('load', () => {
const center = modelViewer.getCameraTarget();
const size = modelViewer.getDimensions();
const x2 = size.x / 2;
const y2 = size.y / 2;
const z2 = size.z / 2;
modelViewer.updateHotspot({
name: 'hotspot-dot+X-Y+Z',
position: `${center.x + x2} ${center.y - y2} ${center.z + z2}`
});
modelViewer.updateHotspot({
name: 'hotspot-dim+X-Y',
position: `${center.x + x2} ${center.y - y2} ${center.z}`
});
modelViewer.querySelector('button[slot="hotspot-dim+X-Y"]').textContent = `${(size.z).toFixed(2)} m`;
modelViewer.updateHotspot({
name: 'hotspot-dot+X-Y-Z',
position: `${center.x + x2} ${center.y - y2} ${center.z - z2}`
});
modelViewer.updateHotspot({
name: 'hotspot-dim+X-Z',
position: `${center.x + x2} ${center.y} ${center.z - z2}`
});
modelViewer.querySelector('button[slot="hotspot-dim+X-Z"]').textContent = `${(size.y).toFixed(2)} m`;
modelViewer.updateHotspot({
name: 'hotspot-dot+X+Y-Z',
position: `${center.x + x2} ${center.y + y2} ${center.z - z2}`
});
modelViewer.updateHotspot({
name: 'hotspot-dim+Y-Z',
position: `${center.x} ${center.y + y2} ${center.z - z2}`
});
modelViewer.querySelector('button[slot="hotspot-dim+Y-Z"]').textContent = `${(size.x).toFixed(2)} m`;
modelViewer.updateHotspot({
name: 'hotspot-dot-X+Y-Z',
position: `${center.x - x2} ${center.y + y2} ${center.z - z2}`
});
modelViewer.updateHotspot({
name: 'hotspot-dim-X-Z',
position: `${center.x - x2} ${center.y} ${center.z - z2}`
});
modelViewer.querySelector('button[slot="hotspot-dim-X-Z"]').textContent = `${(size.z).toFixed(2)} m`;
modelViewer.updateHotspot({
name: 'hotspot-dot-X-Y-Z',
position: `${center.x - x2} ${center.y - y2} ${center.z - z2}`
});
modelViewer.updateHotspot({
name: 'hotspot-dim-X-Y',
position: `${center.x - x2} ${center.y - y2} ${center.z}`
});
modelViewer.querySelector('button[slot="hotspot-dim-X-Y"]').textContent = `${(size.z).toFixed(2)} m`;
modelViewer.updateHotspot({
name: 'hotspot-dot-X-Y+Z',
position: `${center.x - x2} ${center.y - y2} ${center.z + z2}`
});
});
</script>
</div><span class="ar-button_standalone ar_cursor_pointer " id="ar-button-standalone_3270" onclick="document.getElementById('ardisplay_viewer_3270_pop').classList.remove('nodisplay');document.getElementById('ar_popup_3270').style.display = 'block';"><img id="ar-img_3270" src="https://ar-vr.online/wp-content/uploads/2022/02/viewar.png" class="ar-button-img"></span><script languange="javascript">document.getElementById('model_3270').classList.add('nodisplay');</script>](https://ar-vr.online/wp-content/uploads/2023/02/saofranciscoazul-1.jpg)
O que é Realidade Aumentada?
A realidade aumentada (AR) é uma versão aprimorada do mundo físico real que é alcançada através do uso de elementos visuais digitais, som ou outros estímulos sensoriais fornecidos por meio da tecnologia. Usa o ambiente do mundo real existente e coloca informações virtuais sobre ele para aprimorar a experiência.
O principal valor da realidade aumentada é a maneira pela qual os componentes do mundo digital se misturam à percepção do mundo real, não como uma simples exibição de dados, mas através da integração de sensações imersivas, que são percebidas como partes naturais de um ambiente.
Para experimentar a AR digitalize o QRCode com a câmera do seu celular ou tablet.
