Tengo un problema en THREEJS con el controlador XR cuando trato de transmitir objetos que están a más de 40 de distancia. Menos de 40, el raycast funciona bien.
Me basé en este ejemplo en threeJS: https://threejs.org/examples/webxr_vr_dragging.html
¿Alguien conoce una forma de aumentar la distancia de prueba para raycasting en WebXR?
A continuación se muestra el código que estoy usando para instanciar el controlador.
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 ); } }Aumentar la distancia fue más simple de lo que pensé al principio.
Solo necesita aumentar la escala de la línea en el eje Z como:
geometry.scale(1,1, 100);