Utilizing THREE.js's raycaster, I successfully linked a mouse event to my 3D model in my development environment. However, when I built it using VUE.js and ran it in the production environment, I encountered an error: Uncaught ReferenceError: Cannot access 'r' before initialization.
The original code in that function:
raycast( raycaster, intersects ) {
const geometry = this.geometry;
const material = this.material;
const matrixWorld = this.matrixWorld;
...
const start = Math.max( 0, drawRange.start );
const end = Math.min( index.count, ( drawRange.start + drawRange.count ) );
for ( let i = start, il = end; i < il; i += 3 ) {}
}
The updated code in that function:
raycast(t, e) {
const n = this.geometry
, i = this.material
, r = this.matrixWorld;
...
// ERROR HERE
// Uncaught ReferenceError: Cannot access 'r' before initialization
for (let n = Math.max(0, r.start), r = Math.min(s.count, r.start + r.count); n < r; n += 3){}
}
I implemented some code similar to the one causing the error, and the exact error occurred:
const a = {age: 10}
for (let b = a.age, a = 11; b < a; b++ ) {
console.log(a)
}
Here is my code :
mounted() {
this.init3D();
this.animate();
},
methods: {
init3D() {
// Your initialization code here
},
onMouseMove(event) {
// Mouse move functionality
}
}
To resolve the error, you may need to revise the code sections highlighted in the errors and ensure proper variable declaration and initialization.
enter image description here enter image description here
EXTRA:
I built using the command npm buildPro.
Here is an excerpt from my package.json file:
"scripts": {
// List of scripts
},
"dependencies": {
// List of dependencies
},
Apologies for any language barriers or confusing text.