130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import {MathUtils, OrthographicCamera, PerspectiveCamera, Scene, WebGLRenderer,Object3D} from "three";
|
||
import Viewer from "@/core/viewer/Viewer";
|
||
|
||
interface IMiniMapOptions {
|
||
mapSize: number, // 决定了摄像机看到的内容大小, mapSize * mapSize 大小内容
|
||
mapRenderSize: number, // 决定了小地图2D平面的大小
|
||
followTarget:Object3D, // 小地图画面主要跟随对象
|
||
isShow: boolean // 是否显示小地图
|
||
}
|
||
|
||
class MiniMap {
|
||
_miniMapCamera: OrthographicCamera | PerspectiveCamera | null = null;
|
||
_miniMapRenderer: WebGLRenderer | null = null;
|
||
_followTarget: Object3D;
|
||
|
||
private scene: Scene;
|
||
private sceneHelpers: Scene;
|
||
private mapRenderSize: number;
|
||
// @ts-ignore
|
||
public dom: HTMLDivElement;
|
||
|
||
isShow: boolean = false;
|
||
|
||
constructor(viewer:Viewer, options:IMiniMapOptions) {
|
||
this.scene = viewer.scene;
|
||
this.sceneHelpers = viewer.sceneHelpers;
|
||
this.mapRenderSize = options.mapRenderSize;
|
||
this._followTarget = options.followTarget;
|
||
this.isShow = options.isShow;
|
||
|
||
if (!this.scene) {
|
||
throw new Error("scene不能为空");
|
||
}
|
||
if (!this._followTarget) {
|
||
throw new Error("target不能为空，表示小地图画面主要跟随对象");
|
||
}
|
||
|
||
this.dom = this.createDomElement();
|
||
viewer.container.appendChild(this.dom);
|
||
|
||
// 初始化小地图相机
|
||
this._miniMapCamera = new OrthographicCamera(
|
||
-options.mapSize / 2,
|
||
options.mapSize / 2,
|
||
options.mapSize / 2,
|
||
-options.mapSize / 2,
|
||
1, 100 * 1000
|
||
);
|
||
|
||
// 更新地图相机位置和朝向
|
||
this.updateCamera();
|
||
}
|
||
|
||
createDomElement() {
|
||
// 初始化小地图渲染器
|
||
const mapRenderer = new WebGLRenderer({alpha: true});
|
||
mapRenderer.setSize(this.mapRenderSize, this.mapRenderSize);
|
||
// mapRenderer.setClearColor(0x7d684f);
|
||
mapRenderer.shadowMap.enabled = false;
|
||
mapRenderer.autoClear = false;
|
||
this._miniMapRenderer = mapRenderer;
|
||
|
||
const pDiv = document.createElement("div");
|
||
pDiv.id = "es-3d-mini-map";
|
||
pDiv.style.position = "absolute";
|
||
pDiv.style.right = "10px";
|
||
pDiv.style.top = "10px";
|
||
pDiv.style.zIndex = "1001";
|
||
pDiv.style.border = "1px solid #FFF";
|
||
pDiv.style.background = "rgba(0, 0, 0, 0.40)";
|
||
pDiv.style.width = this.mapRenderSize - 100 + "px";
|
||
pDiv.style.height = this.mapRenderSize - 100 + "px";
|
||
pDiv.style.overflow = "hidden";
|
||
pDiv.style.display = this.isShow ? "block" : "none";
|
||
|
||
mapRenderer.domElement.style.transform = `rotateZ(0deg)`;
|
||
mapRenderer.domElement.style.width = this.mapRenderSize + "px";
|
||
mapRenderer.domElement.style.height = this.mapRenderSize + "px";
|
||
mapRenderer.domElement.style.position = "absolute";
|
||
mapRenderer.domElement.style.left = "-50px";
|
||
mapRenderer.domElement.style.top = "-50px";
|
||
|
||
pDiv.appendChild(mapRenderer.domElement);
|
||
|
||
return pDiv;
|
||
}
|
||
|
||
open(){
|
||
this.dom.style.display = "block";
|
||
this.isShow = true;
|
||
}
|
||
|
||
close(){
|
||
this.dom.style.display = "none";
|
||
this.isShow = false;
|
||
}
|
||
|
||
updateCamera() {
|
||
// 更新小地图css旋转角度，与玩家同步
|
||
let targetRotateY = MathUtils.radToDeg(this._followTarget.rotation.y - Math.PI);
|
||
(this._miniMapRenderer as WebGLRenderer).domElement.style.transform = `rotateZ(${targetRotateY}deg)`;
|
||
|
||
// 更新地图相机位置和朝向
|
||
let targetPos = this._followTarget.position;
|
||
(this._miniMapCamera as OrthographicCamera).position.set(
|
||
targetPos.x,
|
||
targetPos.y + 10,
|
||
targetPos.z
|
||
);
|
||
(this._miniMapCamera as OrthographicCamera).lookAt(targetPos.x, 2, targetPos.z);
|
||
}
|
||
|
||
update() {
|
||
// 更新地图相机位置和朝向
|
||
this.updateCamera();
|
||
|
||
const renderer = this._miniMapRenderer as WebGLRenderer;
|
||
|
||
renderer.autoClear = false;
|
||
|
||
// 渲染小地图
|
||
renderer.render(this.scene, this._miniMapCamera as OrthographicCamera);
|
||
|
||
renderer.render(this.sceneHelpers, this._miniMapCamera as OrthographicCamera);
|
||
|
||
renderer.autoClear = true;
|
||
}
|
||
}
|
||
|
||
export {MiniMap} |