Javascript 是否有制定成功AR标记的规则/要求？
我目前正在使用AFAME库进行一个项目，该库允许用户通过标记或地理位置对AR中要查看的文本的内容和功能进行个性化设置。我想制作一些与产品品牌相匹配的AR标记，因此我使用自己输入的Photoshop创建的图像为此创建了多个标记，但在运行.PATT文件和使用我的相机查看图像时，很少有这些标记真正起作用。例如，当前正在工作，但这不是。我知道应该有清晰的线条和不对称的符号，但如果第一个有效，那么为什么第二个不行呢？我一直在使用以下代码：Javascript 是否有制定成功AR标记的规则/要求？,javascript,html,augmented-reality,aframe,Javascript,Html,Augmented Reality,Aframe,我目前正在使用AFAME库进行一个项目，该库允许用户通过标记或地理位置对AR中要查看的文本的内容和功能进行个性化设置。我想制作一些与产品品牌相匹配的AR标记，因此我使用自己输入的Photoshop创建的图像为此创建了多个标记，但在运行.PATT文件和使用我的相机查看图像时，很少有这些标记真正起作用。例如，当前正在工作，但这不是。我知道应该有清晰的线条和不对称的符号，但如果第一个有效，那么为什么第二个不行呢？我一直在使用以下代码： <!DOCTYPE HTML> <html>
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<!-- support 3D text -->
<script src="js/aframe-text-geometry-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.0.2/aframe/build/aframe-ar-nft.js"></script>
</head>
<body style="background: #888888; margin: 0px; overflow: hidden;">
<script>
AFRAME.registerComponent("registerevents", {
init: function ()
{
this.firstDetection = false;
this.markerVisible = false;
this.marker = this.el;
this.root = document.querySelector("#root");
this.word = document.querySelector("#words");
this.root.object3D.visible = false;
let self = this;
this.marker.addEventListener('markerFound', function() {
self.markerVisible = true;
});
this.marker.addEventListener('markerLost', function() {
self.markerVisible = false;
});
this.p = new THREE.Vector3();
this.q = new THREE.Quaternion();
this.s = new THREE.Vector3();
},
tick: function (time, deltaTime)
{
// check if marker is found for the first time;
// if so, make object visible and align position/rotation.
if ( this.markerVisible && !this.firstDetection )
{
this.firstDetection = true;
this.root.object3D.visible = true;
let words = document.querySelector("#words");
words.setAttribute("animation__rise", "autoplay", "true");
words.setAttribute("animation__fade", "autoplay", "true");
}
// if marker is visible, align the entity to the marker
if (this.markerVisible)
{
// sync position of marker and 3D objects
let lerpAmount = 0.5;
this.marker.object3D.getWorldPosition(this.p);
this.marker.object3D.getWorldQuaternion(this.q);
this.marker.object3D.getWorldScale(this.s);
this.root.object3D.position.lerp(this.p, lerpAmount);
this.root.object3D.quaternion.slerp(this.q, lerpAmount);
this.root.object3D.scale.lerp(this.s, lerpAmount);
this.word.setAttribute("color", "green");
}
else
{
// marker lost
this.word.setAttribute("color", "red");
}
}
});
</script>
<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
<a-marker type = "pattern" url = "/application/static/markers/Marker3.patt" id = "innocent">
<a-entity
id="words"
text-geometry="value: Hello, world!;"
material="color: yellow; repeat: 0.5 0.5;"
rotation="9 0 0"
animation__rise = "property: position; dur: 5000; easing: linear; dir: normal; from:-1 0 0; to: -1 0 -2; loop: true;"
animation__fade = "property: material.opacity; dur: 4000; from: 1.0; to: 0.0; loop:true; delay: 1000;"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
注册表组件（“registerevents”{
init：函数（）
{
this.firstDetection=false；
this.markervible=false；
this.marker=this.el；
this.root=document.querySelector（“root”）；
this.word=document.querySelector（“#words”）；
this.root.object3D.visible=false；
让自我=这个；
this.marker.addEventListener（'markerFound'，function（）{
self.markervible=true；
});
this.marker.addEventListener（'markerLost'，function（）{
self.markervible=false；
});
this.p=新的3.Vector3（）；
this.q=新的三个四元数（）；
this.s=新的3.Vector3（）；
},
勾选：函数（时间、deltaTime）
{
//检查是否第一次发现标记；
//如果是，请使对象可见并对齐位置/旋转。
if（this.markervible&！this.firstDetection）
{
this.firstDetection=true；
this.root.object3D.visible=true；
让words=document.querySelector（“#words”）；
setAttribute（“动画上升”、“自动播放”、“真实”）；
setAttribute（“动画衰减”、“自动播放”、“真实”）；
}
//如果标记可见，请将图元与标记对齐
if（this.markervible）
{
//标记和三维对象的同步位置
设lerpAmount=0.5；
this.marker.object3D.getWorldPosition（this.p）；
this.marker.object3D.getWorldQuaternion（this.q）；
this.marker.object3D.getWorldScale（this.s）；
this.root.object3D.position.lerp（this.p，lerpAmount）；
this.root.object3D.quaternion.slerp（this.q，lerpAmount）；
this.root.object3D.scale.lerp（this.s，lerpAmount）；
this.word.setAttribute（“颜色”、“绿色”）；
}
其他的
{
//标记丢失
这个.word.setAttribute（“颜色”、“红色”）；
}
}
});