Tutorial: location-based-three

[YasserB94]

Do you want to request a feature or report a bug? 🐞Report a bug 🐞

---

What is the current behavior? On the first step of the tutorial as long as I can correctly render the red box using ThreeJS Once I add the AR.js related code I start running into issues.

• ✅The webcam correctly requests for the needed permissions and is in use by the browser
• 🐞No video element is added to the dom as described in the guide
• 🐞The webcam cannot be seen anywhere

I am greeted by several errors and warnings in the console:

• 🐛WARNING: Multiple instances of Three.js being imported.
• 🐛THREE.PlaneBufferGeometry has been renamed to THREE.PlaneGeometry.
• 🐛THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false
• 🪳Program Info Log: Must have a compiled vertex shader attached:

SHADER_INFO_LOG:
ERROR: 0:327: 'uvundefined' : undeclared identifier
ERROR: 0:327: 'constructor' : not enough data provided for construction
VERTEX

• 🐞ERROR: 0:327: 'uvundefined' : undeclared identifier
• 🐞ERROR: 0:327: 'constructor' : not enough data provided for construction VERTEX

322: void main() {
  323: #if defined( USE_UV ) || defined( USE_ANISOTROPY )
  324:  vUv = vec3( uv, 1 ).xy;
  325: #endif
  326: #ifdef USE_MAP
> 327:  vMapUv = ( mapTransform * vec3( MAP_UV, 1 ) ).xy;
  328: #endif
  329: #ifdef USE_ALPHAMAP
  330:  vAlphaMapUv = ( alphaMapTransform * vec3( ALPHAMAP_UV, 1 ) ).xy;
  331: #endif
  332: #ifdef USE_LIGHTMAP
  333:  vLightMapUv = ( lightMapTransform * vec3( LIGHTMAP_UV, 1 ) ).xy;
three.module.js:19936:12

• 🐛WebGL warning: linkProgram: Must have a compiled vertex shader attached: SHADER_INFO_LOG:
• 🐛ERROR: 0:327: 'uvundefined' : undeclared identifier
• 🐛ERROR: 0:327: 'constructor' : not enough data provided for construction
• 🐛WebGL warning: useProgram: Program must be linked successfully.
• 🐛WebGL warning: drawElementsInstanced: The current program is not linked.

Then a couple more warnings and: 🐞After reporting 32, no further warnings will be reported for this WebGL context.🐞

---

If the current behavior is a bug, please provide the steps to reproduce.

Reproduce by following the tutorial about location-based-arjs-with-threejs from the official documentation website.

---

Please mention other relevant information such as the browser version, Operating System and Device Name Tested on:

• 💻 Firefox,Firefox Dev,Chrome,Brave,Safari
• 📱iOS - Safari,Chrome

• What is the expected behavior?

• To learn something trough the tutorials and not have errors everywhere when following the documentation to the letter.
• I was hoping to see at least a cube on a webcam view

If this is a feature request, what is motivation or use case for changing the behavior?

[froston]

Hey. I figured out installing older version of three.js fixes some of the issues. However I'm still having a problem with three objects quickly appearing in the beggining and then dissapearing from the scene. Found a hacky fix for it but I would appreaciate AR.js fixing the location based bugs.

{
  "dependencies": {
    "@ar-js-org/ar.js": "3.4.5",
    "three": "0.150.0"
  },
}