Any suggestions for adding a border and drawing boxes within this viewport (minimap)

  Kiến thức lập trình

I’m quite lost, can’t find much documentation on this .setViewport or .setScissor function not quite sure how to work on the minimap itself. I haven’t been able to find a way to modify the content inside the minimap. I want to add a border around the minimap and then draw a rectangle inside the minimap, but haven’t been able to figure out a way without breaking the outside render, since they are using the same renderer (that’s been the only way I’ve been able to render any form of minimap). Any tips on how I can go about it?

 private renderMinimap(): void {
    const width = 200; // Width of the minimap viewport
    const height = 200; // Height of the minimap viewport
    const widthMargin = 40; // Margin from the top-right corner
    const heightMargin = 10;
    // Enable all layers for the minimap camera
    for (let i = 0; i <= this.LAST_LAYER_INDEX; i++) {
      this.minimapCamera.layers.enable(i);
    }
    // Set the viewport for the minimap
    this.renderer.setViewport(
      this.renderer.domElement.clientWidth - width - widthMargin,
      this.renderer.domElement.clientHeight - height - heightMargin,
      width,
      height
    );
    this.renderer.setScissor(
      this.renderer.domElement.clientWidth - width - widthMargin,
      this.renderer.domElement.clientHeight - height - heightMargin,
      width,
      height
    );
    this.renderer.setScissorTest(true);

    // Render the scene from the minimap camera
    this.renderer.render(this.scene, this.minimapCamera);

    // Reset the viewport and scissor test
    this.renderer.setViewport(0, 0, this.renderer.domElement.clientWidth, this.renderer.domElement.clientHeight);

    this.renderer.setScissorTest(false);
  }
  private updateMinimapCamera(): void {
    // Update the minimap camera's position and rotation to match the main camera
    this.minimapCamera.position.copy(this.camera.position);
    this.minimapCamera.rotation.copy(this.camera.rotation);
    this.minimapCamera.updateProjectionMatrix();
  }

I’ve tried adding html and css, but that hasn’t worked.

I’ve also tried using three.js meshes, but they can never quite align with the minimap.

LEAVE A COMMENT