AR.js动画初始化异常、仅首个动画生效及与Unity场景尺寸位置不匹配问题技术咨询

Let's break down each of your AR.js issues with clear fixes and explanations, tailored to your code:

1. AR.js Animations Fail to Initialize & 3. Animations Won't Start Without Onclick #

The root causes here are syntax errors, duplicate animation component names, and missing trigger events tied to marker detection:

• You're using Chinese commas (e.g., -0,125) in position/rotation values—AFRAME can't parse these, so it falls back to default values.
• Duplicate animation names (like multiple animation__1_0_f0 entries) get overwritten by AFRAME, leaving only the last one active.
• Your initial animations only trigger on mousedown, not when the marker is first detected.
• transparent=True uses invalid HTML syntax; it should be transparent="true" (lowercase, wrapped in quotes).

Fix: #

1. Replace all Chinese commas with English periods (e.g., 0 -0,125 0,065 → 0 -0.125 0.065).
2. Give every animation a unique name to avoid overwrites.
3. Tie initial animations to the markerFound event so they start automatically when the marker is detected.
4. Fix HTML attribute syntax.

Updated a-plane code:

<a-plane src="textures/1.png" id="1_0" class="intersectable" 
  width="1" height="1" 
  position="0 -0.125 0.065" 
  rotation="285 0 0" 
  color="#FFFFFF" 
  transparent="true"
  <!-- Initial state animations (triggered when marker is found) -->
  animation__1_0_f0_pos="property: position; to: 0 -0.125 0.065; dur: 0; easing: linear; startEvents: markerFound;"
  animation__1_0_f0_rot="property: rotation; to: 285 0 0; dur: 0; easing: linear; startEvents: markerFound;"
  animation__1_0_f0_width="property: width; to: 1; dur: 0; easing: linear; startEvents: markerFound;"
  animation__1_0_f0_height="property: height; to: 1; dur: 0; easing: linear; startEvents: markerFound;"
  <!-- Animation chain -->
  animation__1_0_f1="property: position; from: 0 -0.125 0.065; to: 0 0.19 -1.112; dur: 300; easing: linear; startEvents: animationcomplete__1_0_f0_pos, animationcomplete__1_0_f5_rot;"
  animation__1_0_f2_pos="property: position; from: 0 0.19 -1.112; to: 0 0.19 -0.049; dur: 300; easing: linear; startEvents: animationcomplete__1_0_f1;"
  animation__1_0_f2_rot="property: rotation; from: 285 0 0; to: 270 0 0; dur: 300; easing: linear; startEvents: animationcomplete__1_0_f1;"
  animation__1_0_f4="property: position; from: 0 0.19 -0.049; to: 0 0.19 1.76; dur: 600; easing: linear; startEvents: animationcomplete__1_0_f2_pos;"
  animation__1_0_f5_pos="property: position; from: 0 0.19 1.76; to: 0 -0.125 0.065; dur: 3400; easing: linear; startEvents: animationcomplete__1_0_f4;"
  animation__1_0_f5_rot="property: rotation; from: 270 0 0; to: 285 0 0; dur: 3400; easing: linear; startEvents: animationcomplete__1_0_f4;">
</a-plane>

Add this to your markerFound callback to ensure animations fire reliably:

marker.addEventListener("markerFound", function (evt) {
    markerFound = 1;
    // Manually trigger the initial animation event
    document.querySelector("#1_0").emit('markerFound');
});

2. Only animation__1_0_f1 Works #

This happens because:

• Duplicate animation names (like multiple animation__1_0_f0) overwrite each other—only the last one stays active, breaking your animation chain.
• You reference a non-existent animation (animationcomplete__1_0_f3) as a trigger for animation__1_0_f4, so that animation never runs.

Fix: #

• Use unique names for every animation component (as shown in the fixed code above).
• Remove or replace references to non-existent animations. For example, change animationcomplete__1_0_f3 to animationcomplete__1_0_f2_pos since that's the preceding animation in your chain.

4. Object Size/Position Doesn't Match Unity Settings #

The main issues here are syntax errors and coordinate system mismatches:

• Chinese commas in position/rotation values cause invalid parsing, leading to unexpected positions.
• Unity and AR.js use the same Y-up coordinate system, but you need to align units: the Hiro marker in AR.js is 1 meter wide, so scale your Unity objects to match this 1:1 ratio.
• Unity's object origin might differ from AR.js's marker origin (center of the marker), so you may need to adjust position offsets.

Fix: #

1. Fix all comma-to-period syntax errors (as mentioned earlier).
2. Scale your AR.js objects to match Unity's dimensions: if a Unity object is 2 meters wide, set width="2" in AR.js.
3. Adjust position values to compensate for origin differences. For example, if your Unity object is offset from its pivot, replicate that offset in the position attribute of your a-plane.

内容的提问来源于stack exchange，提问作者Danyllo Linhares