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"
  },
}