As a newcomer to Javascript and Three.js, I'm seeking guidance on implementing a first-person camera using three.js. I'm trying to convert the PointerLockControls.js example found here: PointerLockControls example
The problem arises when I encounter the error 'TypeError: Cannot read properties of undefined (reading 'lock') at HTMLDivElement.', specifically caused by line 204 in my code:
// initialise locks:
const blocker = document.getElementById( 'blocker' );
const instructions = document.getElementById( 'instructions' );
instructions.addEventListener( 'click', function () {
// LINE 204: ERROR
this.controls_.lock;
} );
In the example provided, the lock function is defined as:
instructions.addEventListener( 'click', function () {
controls.lock();
} );
I understand that the issue stems from `this.controls_` being undefined at runtime. Even though I create and assign `this.controls_` before adding the event listener, it appears to be undefined when 'this.controls_.lock' is called.
Could it be that `this.controls_` needs to be defined independently of the event listener for it to work within the listener scope?
Prior attempts involved defining:
instructions.addEventListener( 'click', function () {
this.controls_.lock();
} );
where `PointerCamera.lock` was implemented as:
lock() {
this.controls.lock();
}
I've experimented with redefining my lock functions using `const = function () {...}` which led to a type error in the PointerLockControls.js file.
Any insights or assistance on addressing this matter would be highly valued!
Full Javascript code snippet:
import * as THREE from '../three.js-r134/three.js-r134/build/three.module.js';
import { FirstPersonControls } from '../three.js-r134/three.js-r134/examples/jsm/controls/FirstPersonControls.js';
import { PointerLockControls } from '../three.js-r134/three.js-r134/examples/jsm/controls/PointerLockControls.js';
// Your complete JavaScript implementation goes here...
And here's a snippet of the corresponding HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Trying to get basic FPS control</title>
<style>
/* CSS styling for your HTML content */
</style>
</head>
<body>
<div id="blocker">
<div id="instructions">
<p style="font-size:36px">
Click to play
</p>
<p>
Move: WASD<br/>
Jump: SPACE<br/>
Look: MOUSE
</p>
</div>
</div>
<script type="module" src="./fpsbasic.js"></script>
</body>
</html>