Having trouble with raycasting in THREEJS using the XR controller when trying to detect objects beyond a distance of 40 units. Raycasting works perfectly within 40 units.
Referenced the example in THREEJS:
Any suggestions on how to extend the raycasting distance in WebXR?
Provided below is the code used to initialize the controller.
setControllerVR(groupCamera, renderer) {
let context = this;
let controller1 = renderer.xr.getController(0);
controller1.addEventListener('selectstart', this.onSelectStart.bind(this));
controller1.addEventListener('selectend', this.onSelectEnd.bind(this));
controller1.addEventListener('connected', function (event) {
this.add(context.buildController(event.data));
});
controller1.addEventListener('disconnected', function () {
this.remove(this.children[0]);
});
groupCamera.add(controller1);
this.controller1 = controller1;
}
buildController( data ) {
let geometry, material;
switch ( data.targetRayMode ) {
case 'tracked-pointer':
geometry = new THREE.BufferGeometry();
geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
return new THREE.Line( geometry, material );
case 'gaze':
geometry = new THREE.RingGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
return new THREE.Mesh( geometry, material );
}
}