共计 5095 个字符,预计需要花费 13 分钟才能阅读完成。
原文参考我的公众号文章 threejs 实现右上角小地图
通过三番五次的尝试,总算是实现了小地图功能。尝试了几种形式,然而综合成果和性能来看,独立相机(OrthographicCamera)+ 独立渲染器(WebGLRenderer)实现小地图是最佳抉择。
这里间接上最佳实际,而后再顺次记录下其它尝试的大抵思路。
最佳实际
独立相机 + 独立渲染器
实现思路其实很简略,植入现有程序也很不便,来看下:
- 第一步,创立地图像机
个别抉择正交相机,它的最大个性就是所有物体在它的眼里都是一样的显示比例,没有近大远小,很适宜 2D 小地图。像机的前四个参数决定了能看到主场景内多少范畴,越大看到的货色越多。
// 初始化小地图相机
const mapSize = 20; // 相机看到主场景的内容有多少
const mapCamera = new OrthographicCamera(
-mapSize / 2,
mapSize / 2,
mapSize / 2,
-mapSize / 2,
1,
1000
);
mapCamera.position.set(0, 100, 0);
mapCamera.lookAt(new THREE.Vector3(0, 0, 0));
- 第二步,创立地图渲染器
创立小地图独立渲染器,这样能够和主程序的渲染器和流程解耦,也不便调整小地图在画面上的的显示地位。
// 初始化小地图渲染器
const mapRenderSize = 200; // 决定了小地图 2D 立体的 css 款式大小
const mapRenderer = new WebGLRenderer({alpha: true});
mapRenderer.setSize(mapRenderSize, mapRenderSize);
mapRenderer.setClearColor(0x7d684f);
// 上面渲染器相干设置最好搞下,不然显示成果会有点怪!mapRenderer.shadowMap.enabled = true;
mapRenderer.shadowMap.type = PCFSoftShadowMap;
mapRenderer.physicallyCorrectLights = true;
mapRenderer.outputEncoding = sRGBEncoding;
// 设置款式,并增加到 HTML
mapRenderer.domElement.id = "mapcanvas";
mapRenderer.domElement.style.position = "absolute";
mapRenderer.domElement.style.right = "5px";
mapRenderer.domElement.style.top = "5px";
mapRenderer.domElement.style.zIndex = "1001";
mapRenderer.domElement.style.border = "1px dashed #000";
mapRenderer.domElement.style.transform = `rotateZ(${mapRotateZ}deg)`;
mapRenderer.domElement.style.borderRadius = "16px";
document.body.appendChild(mapRenderer.domElement);
- 第三步,更新小地图相机地位与调用小地图渲染器渲染画面
为了让小地图上的画面与主程序画面同步,须要放弃小地图相机的地位与咱们的玩家(或主相机)地位同步。
// 更新地图相机地位和视点
function updateMapCameraAndRender(){
let targetPos = player.position; // 决定了小地图的观测中心点
mapCamera.position.set(
targetPos.x,
targetPos.y + 100,
targetPos.z
);
mapCamera.lookAt(targetPos.x, 2, targetPos.z);
// 渲染小地图
mapRenderer.render(this.scene, mapCamera);
}
animate(){
// 主程序 render...
// 小地图 render
updateMapCameraAndRender();}
实现以上三步,小地图就退出到了主程序中了,一句话来说就是:用一个独自的相机盯着指标场景,并用一个独立的渲染器实时渲染到一个新的 Dom 节点上。
上面是我封装好的小地图类,不便引入应用。
import {
OrthographicCamera,
WebGLRenderer,
PCFSoftShadowMap,
sRGBEncoding,
MathUtils,
ACESFilmicToneMapping,
Vector3,
} from "three";
export class MiniMap {
_miniMapCamera = null;
_miniMapRenderer = null;
_followTarget = null;
/**
* 初始化参数
* @param {Object} options
* @options.scene 主场景
* @options.target 小地图以之为中心点的 3D 指标
* @options.mapSize 决定了摄像机看到的内容大小,默认 10
* @options.mapRenderSize 决定了小地图 2D 立体的大小,默认 120
* @options.mapRotateZ number 小地图沿着 Z 轴(垂直屏幕)旋转角度,默认 0
* @options.mapSyncRotateZ boolean 小地图沿着 Z 轴(垂直屏幕)是否跟着一起 target 旋转,默认 false
*/
constructor(
options = {
scene,
target,
mapSize,
mapRenderSize,
mapRotateZ,
mapSyncRotateZ,
}
) {
this.scene = options.scene;
this.mapSize = options.mapSize || 10;
this.mapRenderSize = options.mapRenderSize || 120;
this.mapRotateZ = options.mapRotateZ || 0;
this.mapSyncRotateZ = options.mapSyncRotateZ || false;
this._followTarget = options.target;
if (!this.scene) {throw new Error("scene 不能为空");
}
if (!this._followTarget) {throw new Error("target 不能为空,示意小地图画面次要追随对象");
}
this.add();}
add() {const { mapSize, mapRenderSize, mapRotateZ} = this;
// 初始化小地图渲染器
const mapRenderer = new WebGLRenderer({alpha: true});
mapRenderer.setSize(mapRenderSize, mapRenderSize);
// mapRenderer.setClearColor(0x7d684f);
mapRenderer.shadowMap.enabled = true;
mapRenderer.shadowMap.type = PCFSoftShadowMap;
mapRenderer.physicallyCorrectLights = true;
mapRenderer.outputEncoding = sRGBEncoding;
// mapRenderer.toneMapping = ACESFilmicToneMapping; // 电影渲染成果
// mapRenderer.toneMappingExposure = 0.6;
this._miniMapRenderer = mapRenderer;
// 设置款式,并增加到 HTML
mapRenderer.domElement.id = "mapcanvas";
mapRenderer.domElement.style.position = "absolute";
mapRenderer.domElement.style.right = "5px";
mapRenderer.domElement.style.top = "5px";
mapRenderer.domElement.style.zIndex = "1001";
mapRenderer.domElement.style.border = "1px dashed #000";
mapRenderer.domElement.style.transform = `rotateZ(${mapRotateZ}deg)`;
mapRenderer.domElement.style.borderRadius = "16px";
this._miniMapDomEl = mapRenderer.domElement;
document.body.appendChild(mapRenderer.domElement);
// 初始化小地图相机
const mapCamera = new OrthographicCamera(
-mapSize / 2,
mapSize / 2,
mapSize / 2,
-mapSize / 2,
1,
1000
); // 在这种投影模式下,无论物体间隔相机距离远或者近,在最终渲染的图片中物体的大小都放弃不变。这对于渲染 2D 场景或者 UI 元素是十分有用的。this._miniMapCamera = mapCamera;
// 更新地图相机地位和朝向
this.updateCamera();}
updateCamera() {
// 更新小地图 css 旋转角度,与玩家同步
if (this.mapSyncRotateZ) {let targetRotateY = MathUtils.radToDeg(this._followTarget.rotation.y);
this._miniMapDomEl.style.transform = `rotateZ(${this.mapRotateZ + targetRotateY}deg)`;
}
// 更新地图相机地位和朝向
let targetPos = this._followTarget.position;
this._miniMapCamera.position.set(
targetPos.x,
targetPos.y + 10,
targetPos.z
);
this._miniMapCamera.lookAt(targetPos.x, 3, targetPos.z);
}
update() {
// 更新地图相机地位和朝向
this.updateCamera();
// 渲染小地图
this._miniMapRenderer.render(this.scene, this._miniMapCamera);
}
}
应用示例:
import {MiniMap} from "./scripts/MiniMap";
this.miniMap = new MiniMap({
target: this.player,
scene: this.scene,
mapSize: 12,
mapRenderSize: 160,
});
animate() {
// 主程序代码....
// 更新小地图
this.miniMap.update();}
其它尝试
- v1 实现:OrthographicCamera + Canvas 将渲染器的内容以图片的模式绘制到 Canvas 元素上。体验地址 1
毛病:每次绘制都是一次图片加载,页面申请量无限大!而且会有提早,因为图片加载过程是须要网络传输工夫的,这样就导致小地图卡顿!
- v2 实现:在界面上新建一块区域作为小地图,贴上场景地图的贴纸,再绘制一个标记代表玩家。主场景中的玩家挪动时,将地位同步给小地图上的玩家标记。体验地址 2
长处:能够自定义小地图的款式和玩家标记的款式,因为个别小地图只是事实抽象的地形、物体、玩家地位标记!
毛病:因为小地图的渲染和主业务的渲染是在同一个相机下显示的,当镜头视角切换、缩放等操作会影响小地图的地位和大小,因而须要编写简单的逻辑去实时更新小地图的地位和渲染大小,有肯定难度!
- v3 实现:独立相机(OrthographicCamera)+ 独立渲染器(SVGRenderer)
成果也很特地,且因为是以 svg 的模式展现小地图,所以能够通过 js 和 css 管制 svg 节点。只不过比照下来大场景下性能没那么好 🤷体验地址 3