VideoGame movement

[hugosoli]

Hi everybody, Anybody that has ideas about how ti implement videogame nevagtion. use arrows, mouse or wasd keys to navegate the space in similar way than the Threejs examples?

[nzjony]

@hugosoli , thanks for opening the discussion.

See: https://www.harp.gl/docs/master/examples/#getting-started_free-camera.html

This uses the TrackballControls from the three.js example, i.e.: import { TrackballControls } from "three/examples/jsm/controls/TrackballControls";

You would need to experiment with other means of navigating, we don't have any such navigation that uses wasd implemented, but it would be interesting for sure!

[hugosoli]

Ride on! this is what I needed to start. as soon as I have other ways of navigating I will post.

[hugosoli]

Hi everybody, I have modify the free-camera example to use a flyControl. At the moment the flying and navigation of the map that is loaded at the start of the init works nice but the map does not update tiles when you move. Questions are?
Are the tiles uploaded when the map.animtion is running?
if So is there some way to tell:
Map please upldate the tiles that are visible that hasnt'been updated yet?
cheers

[hugosoli]

Still working on the navigation. The following code implements a fly navigation. It moves, it flies but it does not update tiles :(
Any idea would be deeply appreciate.

import { GeoCoordinates } from "@here/harp-geoutils";
import { MapView, MapViewEventNames } from "@here/harp-mapview";
import { VectorTileDataSource } from "@here/harp-vectortile-datasource";
import { FlyControls } from "three/examples/jsm/controls/FlyControls";
import { apikey, authenticationCode } from "./config";
import * as THREE from "three";

const clock = new THREE.Clock();
const canvas = document.getElementById("map") as HTMLCanvasElement;
const CDMX = new GeoCoordinates(19.4326018, -99.1332049);

const mapView = new MapView({
canvas,
theme: "resources/berlin_tilezen_base.json",
target: CDMX,
tilt: 50,
heading: -20,
zoomLevel: 16.1
});
mapView.fog.enabled = false;
mapView.resize(window.innerWidth, window.innerHeight);
window.addEventListener("resize", () => {
mapView.resize(window.innerWidth, window.innerHeight);
});

const dataSource = new VectorTileDataSource({
authenticationCode: authenticationCode
});
mapView.addDataSource(dataSource);

const pointOfView = new THREE.PerspectiveCamera(
mapView.camera.fov,
mapView.canvas.width / mapView.canvas.height,
100,
400000
);
mapView.scene.add(pointOfView);
pointOfView.position.set(0, 0, 700);
mapView.pointOfView = pointOfView;

const flycontrol = new FlyControls(pointOfView, mapView.canvas);
flycontrol.movementSpeed = 1000;
flycontrol.domElement = mapView.canvas;
flycontrol.rollSpeed = Math.PI / 24;
flycontrol.autoForward = false;
flycontrol.dragToLook = false;
flycontrol.enabled = false;

mapView.addEventListener(MapViewEventNames.Render, () => {
mapView.update();
const delta = clock.getDelta();
flycontrol.update( delta );
});
mapView.beginAnimation();

[hugosoli]

Happy!
A working example using flynavigation. The problem at my understanding is that the main camara of the mapView can not be change. You could have secondary ones but the updateds of the tiles is done with such camera. Therefore, you have to tell mapview that the location of its camera is equivalent to the one you create for the fly. (ALL OF THIS COULD BE WRONG) However, studing closely the freecamera example I add that is was missing from my previous post. Here a working solution

import { GeoCoordinates } from "@here/harp-geoutils";
import { MapView, MapViewEventNames,MapViewUtils } from "@here/harp-mapview";
import { MapControls } from "@here/harp-map-controls";
import { VectorTileDataSource } from "@here/harp-vectortile-datasource";
import { FlyControls } from "three/examples/jsm/controls/FlyControls";
import { apikey, authenticationCode } from "./config";
import * as THREE from "three";

const clock = new THREE.Clock();
const canvas = document.getElementById("map") as HTMLCanvasElement;
const CDMX = new GeoCoordinates(19.4326018, -99.1332049);

const mapView = new MapView({
canvas,
theme: "resources/berlin_tilezen_base.json",
target: CDMX,
tilt: 50,
heading: -20,
zoomLevel: 16.1
});

const mapControls = new MapControls(mapView);
mapControls.maxTiltAngle = 90;
mapControls.enabled = false;

mapView.fog.enabled = false;
mapView.resize(window.innerWidth, window.innerHeight);

window.addEventListener("resize", () => {
mapView.resize(window.innerWidth, window.innerHeight);
});

const dataSource = new VectorTileDataSource({
authenticationCode: authenticationCode
});
mapView.addDataSource(dataSource);

const pointOfView = new THREE.PerspectiveCamera(
mapView.camera.fov,
mapView.canvas.width / mapView.canvas.height,
100,
400000
);
mapView.scene.add(pointOfView);
pointOfView.position.set(0, 0, 700);
mapView.pointOfView = pointOfView;

const flycontrol = new FlyControls(pointOfView, mapView.canvas);
flycontrol.movementSpeed = 1000;
flycontrol.domElement = mapView.canvas;
flycontrol.rollSpeed = Math.PI / 24;
flycontrol.autoForward = false;
flycontrol.dragToLook = false;
flycontrol.enabled = false;

const applyTransformControls = () => {
// Apply helper camera offset to main (map view) camera.
mapView.camera.position.add(pointOfView.position);
// Make sure that the pitch limit constraint is preserved
const ypr = MapViewUtils.extractAttitude(mapView, pointOfView);
ypr.pitch = Math.max(
Math.min(ypr.pitch, THREE.MathUtils.degToRad(mapControls.maxTiltAngle)),
0
);
// Finally apply rotation from transformation gizmo.
MapViewUtils.setRotation(
mapView,
THREE.MathUtils.radToDeg(ypr.yaw),
THREE.MathUtils.radToDeg(ypr.pitch)
);
// Reset RTE camera orientation according to constraints applied.
pointOfView.copy(mapView.camera);
// Reset RTE camera position to origin.
pointOfView.position.setScalar(0);
};

mapView.addEventListener(MapViewEventNames.Render, () => {
applyTransformControls();
mapView.update();
const delta = clock.getDelta();
flycontrol.update( delta );
});
mapView.beginAnimation();