我正在开发一个涉及 ar.js 的项目，该项目显示 3D 对象和文本，以在移动设备和笔记本电脑上教孩子们字母表。我试图添加一个事件侦听器作为额外的内容，以使孩子们进行更多互动。我的目标是单击/触摸显示的模型，它将放大或改变颜色或旋转。附件中找到我的代码。希望你能解决我的问题。
HTML 代码
<!DOCTYPE html>
<html>
<head>
<script src = "https://aframe.io/releases/1.0.3/aframe.min.js"></script>
<script src = "https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>
<script src = "event.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>
<body>
<a-scene embedded arjs = 'sourceType: webcam; debugUIEnabled:false;'>
<a-assets>
<a-asset-item id = "apple" src = "apple/scene.gltf"></a-asset-item>
</a-assets>
<a-marker id = "appleM" type = "pattern" url = "Asset/pattern-apple.patt"
markerhandler emitevents = "true" cursor="rayOrigin: mouse">
<a-entity id = "animatedApple" gltf-model = "#apple" position = "0 -1 0" scale = ".05, .05, .05"></a-entity>
<a-text value="A for Apple" color = "purple" position = "-1.3 1 0" scale = '2, 2, 2'></a-text>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
event.js（事件处理程序的文件）
init: function() {
const animatedMarker = document.querySelector('#appleM');
const aEntity = document.querySelector('#animatedApple');
// every click, we make our model grow in size :)
animatedMarker.addEventListener('click', function(ev, target){
const intersectedElement = ev && ev.detail && ev.detail.intersectedEl;
if (aEntity && intersectedElement === aEntity) {
const scale = aEntity.getAttribute('scale');
Object.keys(scale).forEach((key) => scale[key] = scale[key] + 1);
aEntity.setAttribute('scale', scale);
}
});
}});
我认为主要问题是a-frame version 1.0.X。由于某种原因addEventListerner('click')如果我使用它，将无法工作。
下面是我的代码，您单击您的模型，它应该会增加比例。注意：有一个关于点击事件不在预期位置 https://github.com/jeromeetienne/AR.js/issues/584.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script>
<!-- IDK Why If I Use This, The addEventListener('click') won't work-->
<!-- <script src = "https://aframe.io/releases/1.0.3/aframe.min.js"></script> -->
<!-- <script src = "https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script> -->
<script>
AFRAME.registerComponent('button', {
init: function() {
const gltf = document.querySelector('#animatedApple');
var x = gltf.getAttribute('scale').x;
var y = gltf.getAttribute('scale').y;
var z = gltf.getAttribute('scale').z;
// every click, we make our model grow in size :)
gltf.addEventListener('click', function(ev, target){
console.log(gltf.getAttribute('scale'));
gltf.setAttribute('scale', x + " " + y + " "+ z);
x += 0.1;
y += 0.1;
z += 0.1;
});
}
});
</script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>
<body>
<a-scene embedded arjs = 'sourceType: webcam; debugUIEnabled:false;'>
<a-assets>
<a-asset-item id = "apple" src = "apple/scene.gltf"></a-asset-item> <!-- change to your assets -->
</a-assets>
<a-marker id = "appleM" preset="hiro" emitevents="true" button> <!-- change to your marker, i use default hiro.jpg -->
<a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable; useWorldCoordinates: true;"></a-entity> <!-- important for addEventListener('click'). Notice the '.clickable'-->
<a-entity class="clickable" id ="animatedApple" gltf-model = "#apple" position = "0 0 0" rotation="270 0 0" scale = "0.5 0.5 0.5"></a-entity> <!-- Notice the '.clickable'-->
<a-text id="aText" value="A for Apple" color = "purple" position = "0 0 0" rotation="270 0 0" scale = "2 2 2"></a-text>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
