How to translate LngLatLike to three.js position to render point on map?

Question

I'm trying to draw single point on map using mapbox.js and three.js, but for some reason [-120,40] (Bottom left of USA) coordinates are being draw on top of Greenland, [-60, 79] coordinates. Could you help me with whatever I am doing wrong in following code?

onAdd(){
    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true,
    });
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera();
    this.map = map;
    this.center = MercatorCoordinate.fromLngLat([0, 0], 0);
    const { x, y, z } = this.center;
    this.cameraTransform = new THREE.Matrix4().makeTranslation(x, y, z).scale(new THREE.Vector3(1, -1, 1));

    const dotGeometry = new THREE.BufferGeometry();
    dotGeometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array([0, 0, 0]), 3));
    const pointMaterial = new THREE.PointsMaterial({ size: 4, color: 0xffff00 });
    const point = new THREE.Points(dotGeometry, pointMaterial);
    const model = MercatorCoordinate.fromLngLat([-120,40], 0);
    point.position.set(-model.x, model.y);
    this.scene.add(point);
}

render(gl, matrix){
    this.camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix).multiply(this.cameraTransform);
    this.renderer.resetState();
    this.renderer.render(this.scene, this.camera);
    this.map.triggerRepaint();
}

Answer 1

For anyone that will stumble upon similar problem, there is a solution:

const model = mapboxgl.MercatorCoordinate.fromLngLat([-120, 40], modelAltitude);

point.position.set(model.x, model.y, 0);

this.scene.add(point);

  private render(gl: any, matrix: any) {
    this.camera.projectionMatrix = new THREE.Matrix4().fromArray(matrix);
    this.renderer.resetState();
    this.renderer.render(this.scene, this.camera);
    this.map.triggerRepaint();
  }

This should correctly render point at given latitude and longitude.