image.png

做個(gè)最簡單的mini map腮敌，這就是游戲中常用的小地圖膜钓，

研究了一圈桃煎，原來發(fā)現(xiàn)居然還有幾個(gè)小坑零蓉，這里分享一下笤受，希望對碰到這個(gè)問題的朋友有幫助

image.png

最初在試用的時(shí)候一切正常

我們先引入three js和相關(guān)lib，然后創(chuàng)建一個(gè)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 相機(jī)
    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 相機(jī)
    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);




    // 創(chuàng)建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 );

  



    // 創(chuàng)建幾個(gè)場景上的物體
    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 這個(gè)讓它動(dòng)起來壁公，所以放到外面
    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 );

  }

整個(gè)顯示看起來非常不錯(cuò)感论，動(dòng)畫可以實(shí)時(shí)反應(yīng)到小地圖上

image.png

然后試著移植到項(xiàng)目中，怎么都無法顯示紊册，要么顯示地圖比肄，要么顯示主體，就是不正常顯示

找了半天發(fā)現(xiàn)項(xiàng)目中這句

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

這個(gè)是讓背景不至于全黑囊陡，結(jié)果卻發(fā)現(xiàn)造成小地圖被覆蓋了
注釋掉這句芳绩，然后小地圖就可以正常顯示了

然后發(fā)現(xiàn)一個(gè)奇怪的問題

image.png

shader的粒子在小地圖上顯示得特別的大

中間嘗試換了一下相機(jī)類型，改成PerspectiveCamera撞反，結(jié)果發(fā)現(xiàn)居然會(huì)被地圖物體遮擋

image.png

這個(gè)最終的解決方法是給OrthographicCamera的position改變一下y的高度妥色，變成

mapCamera.position.y = 100

就可以避免這個(gè)問題，這個(gè)值的大小并不會(huì)改變小地圖中顯示的內(nèi)容遏片，

要修改小地圖中顯示內(nèi)容的多少嘹害，要去改 OrthographicCamera 的 Left撮竿， Right， Top笔呀， Bottom四個(gè)參數(shù)

目前雖然做了不少優(yōu)化

image.png

可最終的結(jié)果draw calls并不理想幢踏，幾乎多了一倍，同時(shí)也渲染了陰影等內(nèi)容许师，按照unity的推薦房蝉，mini map最好還是做成2D的
不知道有沒有對這塊了解的朋友，一起探討下如何優(yōu)化微渠？

謝謝～～