three js 做小地图

image.png

做个最简单的mini map，这就是游戏中常用的小地图，

研究了一圈，原来发现居然还有几个小坑，这里分享一下，希望对碰到这个问题的朋友有帮助

image.png

最初在试用的时候一切正常

我们先引入three js和相关lib，然后创建一个dom

<div id="ThreeJS" style="position: absolute; left:0px; top:0px"></div>

然后是js代码

// MAIN

//全局变量
  var container, scene, renderer, controls, stats;
  var clock = new THREE.Clock();

  var MovingCube;
  var perspectiveCamera;

  var mapCamera, mapWidth = 240, mapHeight = 160; // w/h should match div dimensions

  var shape2

  init();
  animate();





  // FUNCTIONS
  function init() {
  
    scene = new THREE.Scene();
 
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;

    // orthographic 相机
    mapCamera = new THREE.OrthographicCamera(
      window.innerWidth / -2,       // Left
      window.innerWidth / 2,        // Right
      window.innerHeight / 2,       // Top
      window.innerHeight / -2,  // Bottom
      -5000,                        // Near
      10000 );                      // Far
    mapCamera.up = new THREE.Vector3(0,0,-1);
    mapCamera.lookAt( new THREE.Vector3(0,-1,0) );
    scene.add(mapCamera);

    // perspective 相机
    perspectiveCamera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    perspectiveCamera.position.set(0,200,550);
    perspectiveCamera.lookAt(scene.position);
    scene.add(perspectiveCamera);



      renderer = new THREE.WebGLRenderer( {antialias:true} );
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );


    controls = new THREE.OrbitControls(perspectiveCamera, renderer.domElement);
    controls.enableKeys = false;
    controls.enableKeys = false;


    // fps显示stats
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );
    // 灯光
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,250,0);
    scene.add(light);
    var ambientlight = new THREE.AmbientLight(0x111111);
    scene.add( ambientlight );

    // 地板
    var floorMaterial = new THREE.MeshBasicMaterial( { color: 0x999999, side: THREE.DoubleSide } );
    var floorGeometry = new THREE.PlaneGeometry(2000, 2000, 10, 10);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);




    // 创建6面颜色
    var materialArray = [];
    materialArray.push(new THREE.MeshBasicMaterial( { color: 0xff0000 }));
    materialArray.push(new THREE.MeshBasicMaterial( { color: 0xffee00 }));
    materialArray.push(new THREE.MeshBasicMaterial( { color: 0xffeeff }));
    materialArray.push(new THREE.MeshBasicMaterial( { color: 0x00eeff }));
    materialArray.push(new THREE.MeshBasicMaterial( { color: 0x0000ff }));
    materialArray.push(new THREE.MeshBasicMaterial( { color: 0xff00ff }));

    
    var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );
    MovingCube = new THREE.Mesh( MovingCubeGeom, materialArray );
    MovingCube.position.set(0, 25.1, 0);
    scene.add( MovingCube );

  



    // 创建几个场景上的物体
    var colorMaterial = new THREE.MeshLambertMaterial( { color: 0xff3333 } );
    var shape = new THREE.Mesh( new THREE.TorusKnotGeometry( 30, 6, 160, 10, 2, 5 ), colorMaterial );
    shape.position.set(-200, 50, -200);
    scene.add( shape );
    // torus knot
    var colorMaterial = new THREE.MeshLambertMaterial( { color: 0x33ff33 } );
    var shape = new THREE.Mesh( new THREE.TorusKnotGeometry( 30, 6, 160, 10, 3, 2 ), colorMaterial );
    shape.position.set(200, 50, -200);
    scene.add( shape );
    // torus knot
    var colorMaterial = new THREE.MeshLambertMaterial( { color: 0xffff33 } );
    var shape = new THREE.Mesh( new THREE.TorusKnotGeometry( 30, 6, 160, 10, 4, 3 ), colorMaterial );
    shape.position.set(200, 50, 200);
    scene.add( shape );
    // torus knot 这个让它动起来，所以放到外面
    var colorMaterial = new THREE.MeshLambertMaterial( { color: 0x3333ff } );
     shape2 = new THREE.Mesh( new THREE.TorusKnotGeometry( 30, 6, 160, 10, 3, 4 ), colorMaterial );
    shape2.position.set(-200, 50, 200);
    scene.add( shape2 );

    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0x000000, 1 );
    renderer.autoClear = false;

  }

  function animate()
  {
    requestAnimationFrame( animate );
    render();
    update();
  }

  function update()
  {
    stats.update();
    controls.update();
  }

    var w = window.innerWidth, h = window.innerHeight;
  function render()
  {


    renderer.clear();
    if(shape2){
      shape2.rotation.y += 0.01
    }


    renderer.setViewport( 10, h - mapHeight - 10, mapWidth, mapHeight );
    renderer.render( scene, mapCamera );

    renderer.setViewport( 0, 0, w, h );
    renderer.render( scene, perspectiveCamera );

  }

整个显示看起来非常不错，动画可以实时反应到小地图上

image.png

然后试着移植到项目中，怎么都无法显示，要么显示地图，要么显示主体，就是不正常显示

找了半天发现项目中这句

scene.background = new THREE.Color( 0xbfd1e5 );

这个是让背景不至于全黑，结果却发现造成小地图被覆盖了
注释掉这句，然后小地图就可以正常显示了

然后发现一个奇怪的问题

image.png

shader的粒子在小地图上显示得特别的大

中间尝试换了一下相机类型，改成PerspectiveCamera，结果发现居然会被地图物体遮挡

image.png

这个最终的解决方法是给OrthographicCamera的position改变一下y的高度，变成

mapCamera.position.y = 100

就可以避免这个问题，这个值的大小并不会改变小地图中显示的内容，

要修改小地图中显示内容的多少，要去改 OrthographicCamera 的 Left， Right， Top， Bottom四个参数

目前虽然做了不少优化

image.png

可最终的结果draw calls并不理想，几乎多了一倍，同时也渲染了阴影等内容，按照unity的推荐，mini map最好还是做成2D的
不知道有没有对这块了解的朋友，一起探讨下如何优化？

谢谢～～

three js 做小地图

推荐阅读更多精彩内容