WebVR Teleport VR HTC VIVE controllers

Hello,

I have a problem with the VR teleport (https://github.com/Sean-Bradley/TeleportVR) that I implemented and modify to make it work with an HTC VIVE because this is a code for the Oculus Rift.

Everything works but when I teleport, I lose the position of my controllers.

There is my JS code : `

            var camera, scene, renderer;
	var controller1, controller2;
	var room;
	var count = 0;
	var radius = 0.08;
	var statsVR;
	var normal = new THREE.Vector3();
	var relativeVelocity = new THREE.Vector3();
	var clock = new THREE.Clock();
	var teleportVR, head, vr_camera, vr_button, floor, target, curve;
	var activeController, teleportVR_active;
	var maxDistance = 10;
	var vectorArray = new THREE.QuadraticBezierCurve3(
		new THREE.Vector3(0, 0, 0),
		new THREE.Vector3(1, 3, -1),
		new THREE.Vector3(2, 0, -2)
	);
	var target_position = new THREE.Vector3(0,0,0);
	var target_quaternion = new THREE.Quaternion();
	init();
	animate();
	function init() {
		scene = new THREE.Scene();
		scene.background = new THREE.Color( 0x505050 );
		
		var geometry = new THREE.BoxGeometry( 1, 1, 1 );
		var material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
		var cube = new THREE.Mesh( geometry, material );
		scene.add( cube );
		
		teleportVR = new THREE.Group();
		scene.add(teleportVR);
		
		vr_camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.01, 10000);
		vr_camera.up = new THREE.Vector3(0, 0, 0); 
		
		teleportVR.add(vr_camera);
		
		head = new THREE.Group();
		teleportVR.add(head);

		var loader = new THREE.FBXLoader();
		loader.load('../libs/Robot_Head/Robot_head.fbx', function (object) {

			object.traverse(function (node) {

				if (node.isMesh) node.material = material_robot_head;

			});
			object.scale.multiplyScalar(0.254);
			object.rotation.y += Math.PI;
			object.position.y -= 1.7;
			object.position.z += 0.25;
			head.add(object);
		});

		var geometry = new THREE.PlaneBufferGeometry(1.5, 1.5);
		var material = new THREE.MeshStandardMaterial({
			color: 0xeeeeee,
			roughness: 1.0,
			metalness: 0.0,
			side: THREE.DoubleSide,
			opacity: 0.5,
			transparent: true
		});
		floor = new THREE.Mesh(geometry, material);
		floor.rotation.x = - Math.PI / 2;
		floor.receiveShadow = true;
		teleportVR.add(floor);
		
		target = new THREE.Group();
		teleportVR.add(target);


		var maxDistance = 10;

		var mesh = new THREE.Mesh(
			new THREE.CylinderGeometry(0.5, 0.5, .01, 64),
			new THREE.MeshStandardMaterial({
				color: 0x299fed,
				opacity: 0.5,
				transparent: true
			})
		);
		mesh.name = "helper";
		target.add(mesh);
		var mesh = new THREE.Mesh(
			new THREE.TorusGeometry(0.5, 0.1, 30, 64),
			new THREE.MeshStandardMaterial({
				color: 0x299fed
			})
		);
		mesh.name = "helper_ring";
		mesh.rotation.x = 0.5 * Math.PI;
		target.add(mesh);
		target.visible = false;

		var geometry = new THREE.TubeBufferGeometry(vectorArray, 100, .1, 64, false);
		curve = new THREE.Mesh(geometry, new THREE.MeshStandardMaterial({
			color: 0x299fed
		}));
		curve.visible = false;
		teleportVR.add(curve);
		
		camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.01, 10000);
		var light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
		light.position.set( 1, 1, 1 );
		scene.add( light );
		teleportVR.add(camera);
		statsVR = new StatsVR(scene, camera);
		//
		renderer = new THREE.WebGLRenderer({ antialias: true });
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(window.innerWidth, window.innerHeight);
		renderer.gammaInput = true;
		renderer.gammaOutput = true;
		renderer.shadowMap.enabled = true;
		renderer.shadowMap.type = THREE.PCFShadowMap;
		document.body.appendChild(renderer.domElement);
		renderer.vr.enabled = true;
		document.body.appendChild(WEBVR.createButton(renderer));
		
		//teleportVR.standingMatrix = renderer.vr.getStandingMatrix();

		vr_button = document.getElementById("vr_button");

		window.addEventListener('vr controller connected', function (event) {
			var controller = event.detail;
			//teleportVR.add(controller);
			scene.add(controller);
			var controller_info = [];
			controller.standingMatrix = renderer.vr.getStandingMatrix();
			controller.head = window.camera;
			var textureLoader = new THREE.TextureLoader();
			var map = textureLoader.load('../libs/vr/vive_controller/onepointfive_texture.png');
			var material = new THREE.MeshPhongMaterial({ map: map });
			var loader = new THREE.OBJLoader();
			loader.load('../libs/vr/vive_controller/vr_controller_vive.obj', function (object) {
				// For any meshes in the model, add our material.
				object.traverse(function (node) {
					if (node.isMesh) node.material = material;
				});
				controller.add(object);
			});
			
			controller.addEventListener('primary press began', function (event) {
				activeController = controller;
				teleportVR_active = true;
				target.visible = true;
				curve.visible = true;
			});

			controller.addEventListener('thumbpad axes changed', function (event) {
				if ((event.axes[1] > 0.001) || (event.axes[1] < -0.001)) {
					target.position.y = -event.axes[1] * 10;
				}
			});

			controller.addEventListener('primary press ended', function (event) {
				teleportVR_active = false;
				target.visible = false;
				curve.visible = false;
				target.getWorldPosition(teleportVR.position);
				target.getWorldQuaternion(teleportVR.quaternion);
			});

			controller.addEventListener('grip press began', function (event) {
			});

			controller.addEventListener('grip press ended', function (event) {
			});

			controller.addEventListener('disconnected', function (event) {
				controller.parent.remove(controller);
			});

		});

		window.addEventListener("beforeunload", function (e) {
			if (vr_button.textContent === "SORTIR VR") {
				vr_button.click();
			}
		}, false);
		//
		window.addEventListener( 'resize', onWindowResize, false );
	}
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );
	}
	//
	function animate() {
		renderer.setAnimationLoop( render );
	}
	function render() {
	
		vr_button.style.display = "";
		statsVR.msStart();
		statsVR.update();
		THREE.VRController.update();

		floor.position.x = camera.position.x;
		floor.position.z = camera.position.z;

		head.position.x = camera.position.x;
		head.position.y = camera.position.y;
		head.position.z = camera.position.z;

		head.rotation.x = camera.rotation.x;
		head.rotation.y = camera.rotation.y;
		head.rotation.z = camera.rotation.z;
		//
		
		renderer.render( scene, camera );
		if (teleportVR_active) {
		
			activeController.getWorldPosition(target_position);
			
			activeController.getWorldQuaternion(target_quaternion);
		
			var v = new THREE.Vector3(0, 0, -1);
			v.applyQuaternion(target_quaternion);

			target.position.x = v.x * maxDistance;
			target.position.z = v.z * maxDistance;

			vectorArray.v0.copy(target.position);
			vectorArray.v2.copy(target_position);
			
			var midPoint = new THREE.Object3D();
			midPoint.position.copy(vectorArray.v2);

			midPoint.quaternion.copy(target_quaternion);
			
			midPoint.translateX(0);
			midPoint.translateY(0);
			midPoint.translateZ(-1);

			vectorArray.v1.copy(midPoint.position);

			curve.geometry.copy(new THREE.TubeBufferGeometry(vectorArray, 100, .05, 64, false));
			curve.geometry.needsUpdate = true;
			
		}
	}`

The teleport is in the eventListener : ‘primary press ended’ and in the render function, the position of the controllers are update.

I have bad base concerning the matrix so if anybody can explain me how can I solve this problem.

Thanks.