mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reformatted + fixed spawn problem.

Browse Source
This commit is contained in:
Michael Mainguy 2023-07-13 11:07:00 -05:00
parent 46efe08535
commit 6d776ef545
13 changed files with 185 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.ts
View File

@ -16,10 +16,7 @@ import {
Vector3, Vector3,
WebXRDefaultExperience WebXRDefaultExperience
} from "@babylonjs/core"; } from "@babylonjs/core";
import {Right} from "./controllers/right";
import {Left} from "./controllers/left";
///import {havokModule} from "./util/havok"; ///import {havokModule} from "./util/havok";
import {Bmenu} from "./menus/bmenu";
import HavokPhysics from "@babylonjs/havok"; import HavokPhysics from "@babylonjs/havok";
import {Rigplatform} from "./controllers/rigplatform"; import {Rigplatform} from "./controllers/rigplatform";

5
src/controllers/base.ts
View File

@ -1,4 +1,4 @@
import {PhysicsBody, Vector3, WebXRCamera, WebXRInputSource} from "@babylonjs/core"; import {Vector3, WebXRInputSource} from "@babylonjs/core";
import {Rigplatform} from "./rigplatform"; import {Rigplatform} from "./rigplatform";
export class Base { export class Base {
@ -18,10 +18,11 @@ export class Base {
if (value.value == 1) { if (value.value == 1) {
console.log(value); console.log(value);
} }
}); });
} }
}); });
} }
setRig(rig: Rigplatform) { setRig(rig: Rigplatform) {
this.rig = rig; this.rig = rig;
} }

4
src/controllers/left.ts
View File

@ -13,13 +13,13 @@ export class Left extends Base {
.onAxisValueChangedObservable.add((value) => { .onAxisValueChangedObservable.add((value) => {
if (Math.abs(value.x) > .1) { if (Math.abs(value.x) > .1) {
this.rig.leftright(value.x*this.speedFactor); this.rig.leftright(value.x * this.speedFactor);
Base.stickVector.x = 1; Base.stickVector.x = 1;
} else { } else {
Base.stickVector.x = 0; Base.stickVector.x = 0;
} }
if (Math.abs(value.y) > .1) { if (Math.abs(value.y) > .1) {
this.rig.updown(value.y*this.speedFactor); this.rig.updown(value.y * this.speedFactor);
Base.stickVector.y = 1; Base.stickVector.y = 1;
} else { } else {
Base.stickVector.y = 0; Base.stickVector.y = 0;

12
src/controllers/right.ts
View File

@ -10,7 +10,7 @@ export class Right extends Base {
constructor(controller: constructor(controller:
WebXRInputSource) { WebXRInputSource) {
super(controller); super(controller);
this.controller.onMotionControllerInitObservable.add((init)=> { this.controller.onMotionControllerInitObservable.add((init) => {
const trigger = init.components['xr-standard-trigger']; const trigger = init.components['xr-standard-trigger'];
if (trigger) { if (trigger) {
trigger trigger
@ -30,13 +30,13 @@ export class Right extends Base {
if (value.value < .05) { if (value.value < .05) {
this.down = false; this.down = false;
} }
}); });
} }
if (init.components['b-button']) { if (init.components['b-button']) {
init.components['b-button'].onButtonStateChangedObservable.add((value)=>{ init.components['b-button'].onButtonStateChangedObservable.add((value) => {
if (value.pressed) { if (value.pressed) {
this.bmenu.toggle(); this.bmenu.toggle();
} }
}); });
} }
@ -50,7 +50,7 @@ export class Right extends Base {
} }
if (Math.abs(value.y) > .1) { if (Math.abs(value.y) > .1) {
this.rig.forwardback(value.y*this.speedFactor); this.rig.forwardback(value.y * this.speedFactor);
Base.stickVector.z = 1; Base.stickVector.z = 1;
} else { } else {
Base.stickVector.z = 0; Base.stickVector.z = 0;

58
src/controllers/rigplatform.ts
View File

@ -20,15 +20,15 @@ import {Bmenu} from "../menus/bmenu";
export class Rigplatform { export class Rigplatform {
static LINEAR_VELOCITY = 4; static LINEAR_VELOCITY = 4;
static ANGULAR_VELOCITY = 3; static ANGULAR_VELOCITY = 3;
public bMenu: Bmenu;
static x90 = Quaternion.RotationAxis(Vector3.Up(), 1.5708); static x90 = Quaternion.RotationAxis(Vector3.Up(), 1.5708);
private camera: Camera; public bMenu: Bmenu;
private scene: Scene;
private xr: WebXRDefaultExperience;
public right: Right; public right: Right;
public left: Left; public left: Left;
public body: PhysicsBody; public body: PhysicsBody;
public rigMesh: Mesh; public rigMesh: Mesh;
private camera: Camera;
private scene: Scene;
private xr: WebXRDefaultExperience;
private turning: boolean = false; private turning: boolean = false;
constructor(scene: Scene, xr: WebXRDefaultExperience) { constructor(scene: Scene, xr: WebXRDefaultExperience) {
@ -68,31 +68,6 @@ export class Rigplatform {
}); });
} }
#initializeControllers() {
this.xr.input.onControllerAddedObservable.add((source, state) => {
let controller;
switch (source.inputSource.handedness) {
case "right":
controller = new Right(source);
this.right = controller;
controller.setBMenu(this.bMenu);
break;
case "left":
controller = new Left(source);
this.left = controller;
break;
}
this.xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
if (controller) {
controller.setRig(this);
}
console.log(source);
console.log(state);
});
}
public forwardback(val: number) { public forwardback(val: number) {
const ray = this.camera.getForwardRay(); const ray = this.camera.getForwardRay();
@ -143,6 +118,31 @@ export class Rigplatform {
} }
#initializeControllers() {
this.xr.input.onControllerAddedObservable.add((source, state) => {
let controller;
switch (source.inputSource.handedness) {
case "right":
controller = new Right(source);
this.right = controller;
controller.setBMenu(this.bMenu);
break;
case "left":
controller = new Left(source);
this.left = controller;
break;
}
this.xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
if (controller) {
controller.setRig(this);
}
console.log(source);
console.log(state);
});
}
//create a method to set the camera to the rig //create a method to set the camera to the rig
#setupKeyboard() { #setupKeyboard() {

49
src/diagram/diagramManager.ts
View File

@ -12,6 +12,7 @@ export enum DiagramEventType {
} }
export type DiagramEvent = { export type DiagramEvent = {
type: DiagramEventType; type: DiagramEventType;
menustate?: BmenuState; menustate?: BmenuState;
@ -30,6 +31,7 @@ export type DiagramEntity = {
scale?: Vector3; scale?: Vector3;
parent?: string; parent?: string;
} }
export class DiagramManager { export class DiagramManager {
static onDiagramEventObservable = new Observable(); static onDiagramEventObservable = new Observable();
static leftController: Mesh; static leftController: Mesh;
@ -46,6 +48,7 @@ export class DiagramManager {
DiagramManager.onDiagramEventObservable.add(this.#onDiagramEvent, -1, true, this); DiagramManager.onDiagramEventObservable.add(this.#onDiagramEvent, -1, true, this);
} }
} }
#onDiagramEvent(event: DiagramEvent) { #onDiagramEvent(event: DiagramEvent) {
console.log(event); console.log(event);
const entity = event.entity; const entity = event.entity;
@ -55,10 +58,10 @@ export class DiagramManager {
let material let material
if (entity) { if (entity) {
mesh = this.scene.getMeshByName(entity.id); mesh = this.scene.getMeshByName(entity.id);
material = this.scene.getMaterialByName("material-"+entity.id); material = this.scene.getMaterialByName("material-" + entity.id);
if (!material){ if (!material) {
material = new StandardMaterial("material-"+event.entity.id, this.scene); material = new StandardMaterial("material-" + event.entity.id, this.scene);
material.ambientColor = Color3.FromHexString(event.entity.color.replace("#","")); material.ambientColor = Color3.FromHexString(event.entity.color.replace("#", ""));
} }
} }
@ -71,10 +74,17 @@ export class DiagramManager {
const newMesh = DiagramManager.currentMesh.clone(DiagramManager.currentMesh.name = "id" + uuidv4(), DiagramManager.currentMesh.parent); const newMesh = DiagramManager.currentMesh.clone(DiagramManager.currentMesh.name = "id" + uuidv4(), DiagramManager.currentMesh.parent);
DiagramManager.currentMesh.setParent(null); DiagramManager.currentMesh.setParent(null);
DiagramManager.currentMesh = newMesh; DiagramManager.currentMesh = newMesh;
DiagramManager.onDiagramEventObservable.notifyObservers({type: DiagramEventType.DROPPED, entity: entity}); DiagramManager.onDiagramEventObservable.notifyObservers({
type: DiagramEventType.DROPPED,
entity: entity
});
} }
break; break;
case DiagramEventType.ADD: case DiagramEventType.ADD:
if (DiagramManager.currentMesh){
DiagramManager.currentMesh.dispose();
}
if (mesh) { if (mesh) {
return; return;
} else { } else {
@ -82,6 +92,7 @@ export class DiagramManager {
if (!mesh) { if (!mesh) {
return; return;
} }
} }
case DiagramEventType.MODIFY: case DiagramEventType.MODIFY:
@ -109,6 +120,7 @@ export class DiagramManager {
} }
} }
#createMesh(entity: DiagramEntity) { #createMesh(entity: DiagramEntity) {
if (!entity.id) { if (!entity.id) {
entity.id = "id" + uuidv4(); entity.id = "id" + uuidv4();
@ -116,21 +128,26 @@ export class DiagramManager {
let mesh: Mesh; let mesh: Mesh;
switch (entity.template) { switch (entity.template) {
case "#box-template": case "#box-template":
mesh = MeshBuilder.CreateBox( entity.id, mesh = MeshBuilder.CreateBox(entity.id,
{width: entity.scale.x, {
width: entity.scale.x,
height: entity.scale.y, height: entity.scale.y,
depth: entity.scale.z}, this.scene); depth: entity.scale.z
}, this.scene);
break; break;
case "#sphere-template": case "#sphere-template":
mesh= MeshBuilder.CreateSphere(entity.id, {diameter: entity.scale.x}, this.scene); mesh = MeshBuilder.CreateSphere(entity.id, {diameter: entity.scale.x}, this.scene);
break break
case "#cylinder-template": case "#cylinder-template":
mesh= MeshBuilder.CreateCylinder(entity.id, {diameter: entity.scale.x, height: entity.scale.y}, this.scene); mesh = MeshBuilder.CreateCylinder(entity.id, {
break; diameter: entity.scale.x,
default: height: entity.scale.y
mesh = null; }, this.scene);
break;
default:
mesh = null;
} }
return mesh; return mesh;
} }

44
src/integration/ring/cameras.ts
View File

@ -6,40 +6,44 @@ export class Cameras {
private token: string; private token: string;
private cameras; private cameras;
private cameratextures = new Array<Texture>(); private cameratextures = new Array<Texture>();
constructor(scene: Scene, token: string) { constructor(scene: Scene, token: string) {
this.scene = scene; this.scene = scene;
this.token = token; this.token = token;
} }
public async getCameras() { public async getCameras() {
const cameras = await axios.get('https://local.immersiveidea.com/api/cameras'); const cameras = await axios.get('https://local.immersiveidea.com/api/cameras');
this.cameras = cameras; this.cameras = cameras;
console.log(cameras); console.log(cameras);
} }
public createCameras() { public createCameras() {
this.createCamera(12333524, 0); this.createCamera(12333524, 0);
this.createCamera( 115860395, 1); this.createCamera(115860395, 1);
this.createCamera( 115855810, 2); this.createCamera(115855810, 2);
this.createCamera( 99677736, 3); this.createCamera(99677736, 3);
this.createCamera( 48497021, 4); this.createCamera(48497021, 4);
this.createCamera( 55870327, 5); this.createCamera(55870327, 5);
} }
public createCamera(id, index) {
const width = 1.6;
const height = .9
const plane = MeshBuilder.CreatePlane("plane", {width: width, height: height}, this.scene);
const materialPlane = new StandardMaterial("texturePlane", this.scene);
const imageText = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene);
materialPlane.diffuseTexture = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene); public createCamera(id, index) {
materialPlane.specularColor = new Color3(0, 0, 0); const width = 1.6;
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element const height = .9
plane.material = materialPlane; const plane = MeshBuilder.CreatePlane("plane", {width: width, height: height}, this.scene);
plane.rotation.y = Angle.FromDegrees(180).radians(); const materialPlane = new StandardMaterial("texturePlane", this.scene);
plane.position.y = height/2 + .2; const imageText = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene);
plane.position.z = -3;
plane.position.x = (width*3) - (index * width); materialPlane.diffuseTexture = new Texture("https://local.immersiveidea.com/api/cameras?id=" + id, this.scene);
this.cameratextures.push(imageText); materialPlane.specularColor = new Color3(0, 0, 0);
materialPlane.backFaceCulling = false;//Allways show the front and the back of an element
plane.material = materialPlane;
plane.rotation.y = Angle.FromDegrees(180).radians();
plane.position.y = height / 2 + .2;
plane.position.z = -3;
plane.position.x = (width * 3) - (index * width);
this.cameratextures.push(imageText);
} }
} }

2
src/menus/amenu.ts
View File

@ -1,8 +1,10 @@
export class Amenu { export class Amenu {
private visible = false; private visible = false;
constructor() { constructor() {
} }
public toggle() { public toggle() {
this.visible = !this.visible; this.visible = !this.visible;
} }

108
src/menus/bmenu.ts
View File

@ -1,12 +1,13 @@
import { import {
AbstractMesh, AbstractMesh,
Angle, Angle,
Color3, Mesh, Color3,
MeshBuilder, Scene,
Scene, SceneSerializer,
StandardMaterial, StandardMaterial,
TransformNode, Vector3, TransformNode,
WebXRExperienceHelper, WebXRInputSource Vector3,
WebXRExperienceHelper,
WebXRInputSource
} from "@babylonjs/core"; } from "@babylonjs/core";
import {GUI3DManager, HolographicButton, PlanePanel} from "@babylonjs/gui"; import {GUI3DManager, HolographicButton, PlanePanel} from "@babylonjs/gui";
import {DiagramEntity, DiagramEvent, DiagramEventType, DiagramManager} from "../diagram/diagramManager"; import {DiagramEntity, DiagramEvent, DiagramEventType, DiagramManager} from "../diagram/diagramManager";
@ -17,6 +18,7 @@ export enum BmenuState {
DROPPING, // Dropping an entity DROPPING, // Dropping an entity
} }
export class Bmenu { export class Bmenu {
private scene; private scene;
private state: BmenuState = BmenuState.NONE; private state: BmenuState = BmenuState.NONE;
@ -36,9 +38,11 @@ export class Bmenu {
} }
}); });
} }
setController(controller: WebXRInputSource) { setController(controller: WebXRInputSource) {
this.rightController = controller.grip; this.rightController = controller.grip;
} }
makeButton(name: string, id: string) { makeButton(name: string, id: string) {
const button = new HolographicButton(name); const button = new HolographicButton(name);
button.text = name; button.text = name;
@ -47,61 +51,19 @@ export class Bmenu {
return button; return button;
} }
#clickhandler(_info, state) {
console.log(state.currentTarget.name);
let entity: DiagramEntity = {
template: null,
position: new Vector3(0,-.040,.13),
rotation: new Vector3(),
scale: new Vector3(.1, .1, .1),
color: "#CEE",
text: "test",
last_seen: new Date(),
parent: this.rightController.id
};
switch (state.currentTarget.name) {
case "addBox":
entity.template = "#box-template";
break;
case "addSphere":
entity.template = "#sphere-template";
break;
case "addCylinder":
entity.template = "#cylinder-template";
break;
default:
console.log("Unknown button");
return;
}
const event: DiagramEvent = {
type: DiagramEventType.ADD,
entity: entity
}
this.state = BmenuState.ADDING;
DiagramManager.onDiagramEventObservable.notifyObservers(event);
}
public getState() { public getState() {
return this.state; return this.state;
} }
public setState(state: BmenuState) { public setState(state: BmenuState) {
this.state = state; this.state = state;
} }
#createDefaultMaterial() {
const myMaterial = new StandardMaterial("myMaterial", this.scene);
myMaterial.diffuseColor = Color3.FromHexString("#CEE");
return myMaterial;
}
toggle() { toggle() {
if (this.panel) { if (this.panel) {
this.panel.dispose(); this.panel.dispose();
this.panel = null; this.panel = null;
this.setState(BmenuState.NONE);
} else { } else {
const anchor = new TransformNode("bMenuAnchor"); const anchor = new TransformNode("bMenuAnchor");
anchor.rotation.y = Angle.FromDegrees(180).radians(); anchor.rotation.y = Angle.FromDegrees(180).radians();
@ -125,4 +87,52 @@ export class Bmenu {
} }
} }
#clickhandler(_info, state) {
console.log(state.currentTarget.name);
let entity: DiagramEntity = {
template: null,
position: new Vector3(0, -.040, .13),
rotation: new Vector3(),
scale: new Vector3(.1, .1, .1),
color: "#CEE",
text: "test",
last_seen: new Date(),
parent: this.rightController.id
};
switch (state.currentTarget.name) {
case "addBox":
entity.template = "#box-template";
break;
case "addSphere":
entity.template = "#sphere-template";
break;
case "addCylinder":
entity.template = "#cylinder-template";
break;
case "doneAdding":
this.state=BmenuState.NONE;
break;
default:
console.log("Unknown button");
return;
}
const event: DiagramEvent = {
type: DiagramEventType.ADD,
entity: entity
}
this.state = BmenuState.ADDING;
DiagramManager.onDiagramEventObservable.notifyObservers(event);
}
#createDefaultMaterial() {
const myMaterial = new StandardMaterial("myMaterial", this.scene);
myMaterial.diffuseColor = Color3.FromHexString("#CEE");
return myMaterial;
}
} }

24
src/menus/objectEditor.ts
View File

@ -5,11 +5,13 @@ export class ObjectEditor {
private scene; private scene;
private editor: Mesh; private editor: Mesh;
private mesh; private mesh;
constructor(scene, mesh) { constructor(scene, mesh) {
this.scene=scene; this.scene = scene;
this.mesh = mesh; this.mesh = mesh;
this.edit(); this.edit();
} }
public edit() { public edit() {
this.editor = Mesh.CreatePlane("editor", 2, this.scene); this.editor = Mesh.CreatePlane("editor", 2, this.scene);
this.editor.position.z = -2; this.editor.position.z = -2;
@ -20,8 +22,8 @@ export class ObjectEditor {
panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT; panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER; panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
panel.width='100%'; panel.width = '100%';
panel.height='100%'; panel.height = '100%';
texture.addControl(panel); texture.addControl(panel);
const x = this.createControl(); const x = this.createControl();
@ -29,14 +31,14 @@ export class ObjectEditor {
const z = this.createControl() const z = this.createControl()
const myMesh = this.mesh; const myMesh = this.mesh;
z.value = myMesh.scaling.z; z.value = myMesh.scaling.z;
z.onValueChangedObservable.add((value)=> { z.onValueChangedObservable.add((value) => {
myMesh.scaling.z = value; myMesh.scaling.z = value;
}); });
y.onValueChangedObservable.add((value)=> { y.onValueChangedObservable.add((value) => {
myMesh.scaling.y = value; myMesh.scaling.y = value;
}); });
y.value = myMesh.scaling.x; y.value = myMesh.scaling.x;
x.onValueChangedObservable.add((value)=> { x.onValueChangedObservable.add((value) => {
myMesh.scaling.x = value; myMesh.scaling.x = value;
}); });
x.value = myMesh.scaling.x; x.value = myMesh.scaling.x;
@ -47,22 +49,24 @@ export class ObjectEditor {
button1.height = '20px'; button1.height = '20px';
button1.background = "#FFF"; button1.background = "#FFF";
panel.addControl(button1); panel.addControl(button1);
button1.onPointerClickObservable.add(()=> { button1.onPointerClickObservable.add(() => {
this.close(); this.close();
}, -1, false, this); }, -1, false, this);
} }
createControl(): Slider { createControl(): Slider {
const slider = new Slider(); const slider = new Slider();
slider.minimum = .1 slider.minimum = .1
slider.maximum = 10; slider.maximum = 10;
slider.height = '40px'; slider.height = '40px';
slider.step =.1 slider.step = .1
return slider; return slider;
} }
close() { close() {
this.editor.dispose(); this.editor.dispose();
this.mesh=null; this.mesh = null;
this.scene=null; this.scene = null;
} }
} }

3
src/server/ring/ringCamera.ts
View File

@ -11,11 +11,12 @@ export class RingCamera {
}); });
this.ringApi = ringApi; this.ringApi = ringApi;
} }
public async getCameras() { public async getCameras() {
const cams = await this.ringApi.getCameras(); const cams = await this.ringApi.getCameras();
console.log(cams[0]); console.log(cams[0]);
const camid = cams.map((value ) => value.id); const camid = cams.map((value) => value.id);
console.log(camid); console.log(camid);
return cams; return cams;
} }

9
src/util/gmap.ts
View File

@ -1,22 +1,24 @@
import {Angle, Color3, MeshBuilder, Scene, StandardMaterial, Texture} from "@babylonjs/core"; import {Angle, Color3, MeshBuilder, Scene, StandardMaterial, Texture} from "@babylonjs/core";
import googleStaticMapsTile from "google-static-maps-tile"; import googleStaticMapsTile from "google-static-maps-tile";
export class Gmap { export class Gmap {
private scene: Scene; private scene: Scene;
constructor(scene: Scene) { constructor(scene: Scene) {
this.scene = scene; this.scene = scene;
} }
public async createMapTiles(lat, lon) { public async createMapTiles(lat, lon) {
googleStaticMapsTile({ googleStaticMapsTile({
areaSize: '2560x2560', areaSize: '2560x2560',
center: '26.443397,-82.111512', center: '26.443397,-82.111512',
zoom: 12, zoom: 12,
imagePerLoad: 50, imagePerLoad: 50,
durationBetweenLoads: 60*1000+100, durationBetweenLoads: 60 * 1000 + 100,
key: 'AIzaSyD4jJCYcIvHDEiOkVxC2c4zNYRqZKYHMMk', key: 'AIzaSyD4jJCYcIvHDEiOkVxC2c4zNYRqZKYHMMk',
maptype: 'satellite' maptype: 'satellite'
}) })
.on('progress', function(info) { .on('progress', function (info) {
console.log(info.count); console.log(info.count);
console.log(info.total); console.log(info.total);
const image = info.image; const image = info.image;
@ -27,11 +29,12 @@ export class Gmap {
document.body.appendChild(image); document.body.appendChild(image);
}); });
} }
public createMap(lat, lon) { public createMap(lat, lon) {
//const lat = 42.3369513; //const lat = 42.3369513;
//const lon = -88.8707076; //const lon = -88.8707076;
const plane = MeshBuilder.CreatePlane("plane", {width: 1, height:1}, this.scene); const plane = MeshBuilder.CreatePlane("plane", {width: 1, height: 1}, this.scene);
const materialPlane = new StandardMaterial("texturePlane", this.scene); const materialPlane = new StandardMaterial("texturePlane", this.scene);
const zoom = 10; const zoom = 10;

7
src/util/mapt.ts
View File

@ -1,10 +1,13 @@
import * as maptilerClient from '@maptiler/client'; import * as maptilerClient from '@maptiler/client';
import {Angle, Color3, MeshBuilder, Scene, StandardMaterial, Texture} from "@babylonjs/core"; import {Angle, Color3, MeshBuilder, Scene, StandardMaterial, Texture} from "@babylonjs/core";
export class Mapt { export class Mapt {
private scene: Scene; private scene: Scene;
constructor(scene: Scene) { constructor(scene: Scene) {
this.scene = scene; this.scene = scene;
} }
buildMapImage() { buildMapImage() {
const apiKey = '073I3Pfe4lzoSf8tNriR'; const apiKey = '073I3Pfe4lzoSf8tNriR';
maptilerClient.config.apiKey = apiKey; maptilerClient.config.apiKey = apiKey;
@ -12,9 +15,9 @@ export class Mapt {
const link = maptilerClient.staticMaps.centered( const link = maptilerClient.staticMaps.centered(
[-88.8711198, 42.3370588], [-88.8711198, 42.3370588],
14, 14,
{width:2048, height:2048, style: 'streets-v2'} {width: 2048, height: 2048, style: 'streets-v2'}
); );
const plane = MeshBuilder.CreatePlane("plane", {width: 10, height:10}, this.scene); const plane = MeshBuilder.CreatePlane("plane", {width: 10, height: 10}, this.scene);
const materialPlane = new StandardMaterial("texturePlane", this.scene); const materialPlane = new StandardMaterial("texturePlane", this.scene);
const zoom = 10; const zoom = 10;
const sphere = MeshBuilder.CreateSphere("cams", {diameter: .1}, this.scene); const sphere = MeshBuilder.CreateSphere("cams", {diameter: .1}, this.scene);