teleportTo(position, quaternion) API

[vincentfretin]

Add new API teleportTo(position, quaternion), quaternion optional, with rotation y transition, also fix look-controls pitchObject.rotation.x if needed, to be used via buttons to change camera view.

amplitude_teleport_api.webm

Related:

• Better transition including rotation #56

[vincentfretin]

You can sponsor $20 to vincentfretin fully or partially to work on this feature. Find other work you can sponsor at https://github.com/c-frame/sponsorship

[vincentfretin]

@3DStreet sponsored me to work on this issue. Thank you!

[vincentfretin]

You can use the following build to test it before the next 1.5.0 release

  <script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-cursor-teleport@00d6039/dist/aframe-cursor-teleport-component.min.js"></script>

see doc and basic example

code:

aframe-cursor-teleport/examples/basic/index.html

Lines 62 to 80 in 00d6039

	<a-entity id="destination" position="1.4 1.55 -1.38" rotation="0 135 0">
	<a-entity geometry="primitive: ring; radiusInner: 0.48" scale="0.2 0.2 0.2" position="0 0.01 0" rotation="-90 0 0" material="color: #000000"></a-entity>
	<a-entity geometry="primitive: plane" scale="0.15 0.15 0.15" position="0 0.011 -0.2" rotation="-90 45 0" material="color: #000000"></a-entity>
	</a-entity>
	<a-entity id="moveup" class="clickable" geometry="primitive: plane; width: 0.9; height: 0.3" text="value: move directly\non second platform; align: center; width: 2" position="1.6 1 -1.5" rotation="0 -45 0" material="color: #000000"></a-entity>
	<!-- environment -->
	<a-sky color="#e1f5fe"></a-sky>
	</a-scene>
	<script>
	const moveup = document.getElementById('moveup');
	const destination = document.getElementById('destination');
	const cameraRig = document.getElementById('cameraRig');
	moveup.addEventListener('click', () => {
	const cursorTeleport = cameraRig.components['cursor-teleport'];
	cursorTeleport.teleportTo(destination.object3D.position, destination.object3D.quaternion);
	});
	</script>