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.