Я пробовал следующий код из сбоев https://glitch.com/~8w-raycast-image
Код работает нормально, как этот
index. html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8th Wall Raycast a-image</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="//cdn.8thwall.com/web/aframe/8frame-0.8.2.min.js"></script>
<script src="//apps.8thwall.com/xrweb?appKey=bIdX0bnxlgGtNPMw9ewJumghO5gBtFQHo9VXYdx6YmOxqvH6QN8lnJEQf75ATZ19JeTY4I"></script>
<script>
AFRAME.registerComponent('shadow-material', {
init:function() {
this.material = new THREE.ShadowMaterial()
this.el.getOrCreateObject3D('mesh').material = this.material
this.material.opacity = 0.4
}
});
AFRAME.registerComponent('tap-info',{
init: function(){
this.el.addEventListener('click',function() {
alert('image tapped!');
});
}
});
</script>
<script src="//cdn.8thwall.com/web/xrextras/xrextras.js"></script>
</head>
<body>
<a-scene xrweb
xrextras-almost-there
xrextras-loading
xrextras-runtime-error
background="color: #FAFAFA">
<a-camera
position="0 1.8 0"
raycaster="objects: .cantap"
cursor="
fuse: false;
rayOrigin: mouse;"></a-camera>
<a-entity
light="type: directional;
intensity: 1;
castShadow: true;
shadowMapHeight: 1024;
shadowMapWidth: 1024;
shadowCameraTop: 10;"
position="1 4.3 2.5"
shadow>
</a-entity>
<a-image
position="0 1 -2"
height="1.8"
width="1"
class="cantap"
src="https://cdn.glitch.com/e9ba5c8a-0f92-4729-8915-c1adad9dbf67%2FD2DFE4B5-332F-429E-A4BE-CA222BB0C082.jpeg"
tap-info
></a-image>
<a-entity
light="type: ambient;
intensity: 0.5;">
</a-entity>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="50" height="50" color="#7BC8A4" shadow shadow-material></a-plane>
</a-scene>
</body>
</html>
Однако, когда я переместил его на script.js, я столкнулся с проблемой обрезания изображения
script. js
let text = document.createElement('a-image');
text.setAttribute('position', '0 1 -2');
text.setAttribute('height', '2');
text.setAttribute('width', '1');
text.setAttribute('scale', '55 55 55');
text.setAttribute('src', './assets/dot.png');
text.setAttribute('class', 'cantap');
text.setAttribute('tap-info', 'true');
Исходное изображение не работало (нижняя половина была обрезана) , поэтому я попытался использовать собственное изображение, но у меня все еще были те же проблемы.
Исходное изображение
