Javascript 在ar.js中，三维对象在从纵向移动到横向时会发生扭曲
我从Ar.js开始，在将设备从potrait模式旋转到横向模式时，我在屏幕上显示的3d模型会失真。这就是一个例子 再加上一个屏幕截图来解释同样的情况 我的目标是两件事：Javascript 在ar.js中，三维对象在从纵向移动到横向时会发生扭曲,javascript,three.js,rotation,aframe,ar.js,Javascript,Three.js,Rotation,Aframe,Ar.js,我从Ar.js开始，在将设备从potrait模式旋转到横向模式时，我在屏幕上显示的3d模型会失真。这就是一个例子 再加上一个屏幕截图来解释同样的情况 我的目标是两件事： 旋转时，对象不应扭曲 对象应随设备旋转，使其看起来与屏幕相连。差不多 有人能帮我吗？我们将不胜感激 这是我的密码： <!doctype html> <html> <head> <script src="https://aframe.io/releases
<!doctype html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script><!-- debug -->
<script>
const log = console.log;
window.onload = () => {
let scene = document.querySelector('a-scene'); /* Apply to whole scene */
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let gps = document.createAttribute('gps-entity-place'),
arjs = document.createAttribute('arjs'),
welcome = document.getElementById('welcome');
welcome.setAttribute('value', 'welcome ');
welcome.setAttribute('scale', '2 2 2');
welcome.setAttribute('color', '#000000');
welcome.setAttribute('gps-entity-place', `latitude: ${28.705756}; longitude: ${77.122515}`);
arjs.value = 'sourceType: webcam; sourceWidth: 640; sourceHeight: 480; trackingMethod: best; debugUIEnabled: false;';
gps.value = `latitude: ${28.705756}; longitude: ${77.122515}`;
log(gps.value);
var entityEl = document.createElement('a-entity');
entityEl.setAttribute('gltf-model', 'https://www.zamit.one/location/Duck/Duck.gltf');
entityEl.setAttribute('gps-entity-place', `latitude: ${position.coords.latitude - 0.001}; longitude: ${position.coords.longitude - 0.001}`);
entityEl.setAttribute('scale', `4 4 4`);
entityEl.setAttribute('look-at', '[camera]');
entityEl.setAttribute('rotation', '0 90 0');
scene.setAttributeNode(gps); /* Apply to whole scene */
scene.setAttributeNode(arjs);
scene.appendChild(entityEl);
});
}
};
</script>
</head>
<a-scene device-orientation-permission-ui="enabled: true" vr-mode-ui="enabled: false">
<a-text id="welcome" ></a-text>
<a-camera camera="fov: 80;" gps-camera rotation-reader></a-camera>
</a-scene>
</body>
</html>
#info {
display: block;
position: relative;
margin: 0px auto;
width: 50%;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #222;
opacity: 1;
}
是否将更改后的纵横比传递给摄影机和渲染器？@JeromeReinländer我试图更新场景中的纵横比，但我的屏幕被剪裁掉了。我已经编辑了我的问题，你能指出一个解决方案吗？我有一个类似的问题。在iOS人像上，它是扭曲的，如果我切换到横向，一切都适合，阿伯切换回纵向，它看起来应该是这样。你是否将更改的纵横比传递给相机和渲染器？@JeromeReinländer我试图更新场景的纵横比，但我的屏幕被剪掉了。我已经编辑了我的问题，你能指出一个解决方案吗？我有一个类似的问题。在iOS上，它是扭曲的，如果我切换到横向，一切都适合，阿伯切换回纵向，它看起来应该是这样的。
const aframebox = document.getElementsByClassName('aframebox')[0];
setInterval(function(){
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("info").innerHTML = JSON.stringify(w+'::'+h);
if (typeof aframebox !== 'undefined') {
aframebox.style.height = h;
aframebox.style.width = w;
}
},1)
#info {
display: block;
position: relative;
margin: 0px auto;
width: 50%;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #222;
opacity: 1;
}