使用Obelisk.js 和 NoiseJs 构建的立方图

Isometric map，可以用鼠标拖动

map

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1877
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
  var perlin;

$(function() {
    return perlin.init();
  });

if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.oRequestAnimationFrame;
  }

if (!window.requestAnimationFrame) {
    throw new Error('Unable to use this map without support for requestAnimationFrame');
  }

perlin = {
    init: function() {
      this.cubeSize = 16;
      this.mapSize = 50;
      this.canvas = $('#perlin');
      this.context = this.canvas[0].getContext('2d');
      this.setContextSize();
      this.setResizeHandler();
      this.origin = new obelisk.Point(this.canvas.width() / 2, this.cubeSize * 3);
      this.pixelView = new obelisk.PixelView(this.canvas, this.origin);
      this.dimension = new obelisk.CubeDimension(this.cubeSize, this.cubeSize, this.cubeSize * 3);
      $('#regenerate').on('click', (function(_this) {
        return function() {
          _this.generateNoiseMachine();
          return _this.resetCubes();
        };
      })(this));
      this.generateNoiseMachine();
      this.generateColors();
      this.generateCubes();
      this.setKeyListener();
      this.setDraggable(true);
      return this.animateLoop();
    },
    generateNoiseMachine: function() {
      return noise.seed(Math.random());
    },
    animateLoop: function() {
      window.requestAnimationFrame(this.animateLoop.bind(this));
      return this.drawMap();
    },
    setContextSize: function() {
      var canvSize;
      canvSize = {
        width: this.canvas.width(),
        height: this.canvas.height()
      };
      this.context.canvas.width = canvSize.width;
      return this.context.canvas.height = canvSize.height;
    },
    setKeyListener: function() {
      return $(window).on('keydown', (function(_this) {
        return function(event) {
          switch (event.keyCode) {
            case 37:
              return _this.origin.x += 10;
            case 39:
              return _this.origin.x -= 10;
            case 40:
              return _this.origin.y -= 10;
            case 38:
              return _this.origin.y += 10;
          }
        };
      })(this));
    },
    setResizeHandler: function() {
      if (this.resizeTimer) {
        clearTimeout(this.resizeTimer);
      }
      this.resizeTimer = null;
      return $(window).off('resize.perlin').on('resize.perlin', (function(_this) {
        return function() {
          clearTimeout(_this.resizeTimer);
          return setTimeout((function() {
            return _this.setContextSize();
          }), 10);
        };
      })(this));
    },
    generateColors: function() {
      var color, rawColors, _i, _len, _results;
      rawColors = [0x3438FF, 0x3349F3, 0x3349F3, 0xA88E6F, 0xCEAE88, 0x30C4A3, 0x2FD697, 0x2FE88C];
      this.colors = [];
      _results = [];
      for (_i = 0, _len = rawColors.length; _i < _len; _i++) {
        color = rawColors[_i];
        _results.push(this.colors.push(new obelisk.CubeColor().getByHorizontalColor(color)));
      }
      return _results;
    },
    getLevelAt: function(x, y) {
      var noiseVal, scale;
      scale = 20;
      noiseVal = (noise.simplex2(x / scale, y / scale) + 1) / 2;
      return Math.floor((this.colors.length - 1) * noiseVal);
    },
    getZForLevel: function(level) {
      return level * (this.cubeSize / 2);
    },
    resetCubes: function() {
      var level, x, y, _i, _ref, _results;
      _results = [];
      for (x = _i = 0, _ref = this.cubes.length; 0 <= _ref ? _i < _ref : _i > _ref; x = 0 <= _ref ? ++_i : --_i) {
        _results.push((function() {
          var _j, _ref1, _results1;
          _results1 = [];
          for (y = _j = 0, _ref1 = this.cubes[x].length; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; y = 0 <= _ref1 ? ++_j : --_j) {
            level = this.getLevelAt(x, y);
            this.cubes[x][y].color = this.colors[level];
            this.cubes[x][y].build();
            _results1.push(this.points[x][y].z = this.getZForLevel(level));
          }
          return _results1;
        }).call(this));
      }
      return _results;
    },
    generateCubes: function() {
      var level, x, y, _i, _ref, _results;
      this.cubes = [];
      this.points = [];
      _results = [];
      for (x = _i = 0, _ref = this.mapSize; 0 <= _ref ? _i < _ref : _i > _ref; x = 0 <= _ref ? ++_i : --_i) {
        this.cubes[x] = [];
        this.points[x] = [];
        _results.push((function() {
          var _j, _ref1, _results1;
          _results1 = [];
          for (y = _j = 0, _ref1 = this.mapSize; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; y = 0 <= _ref1 ? ++_j : --_j) {
            level = this.getLevelAt(x, y);
            this.cubes[x][y] = new obelisk.Cube(this.dimension, this.colors[level], false);
            _results1.push(this.points[x][y] = new obelisk.Point3D(x * this.cubeSize, y * this.cubeSize, this.getZForLevel(level)));
          }
          return _results1;
        }).call(this));
      }
      return _results;
    },
    drawMap: function() {
      var x, y, _i, _ref, _results;
      this.pixelView.clear();
      _results = [];
      for (x = _i = 0, _ref = this.cubes.length; 0 <= _ref ? _i < _ref : _i > _ref; x = 0 <= _ref ? ++_i : --_i) {
        _results.push((function() {
          var _j, _ref1, _results1;
          _results1 = [];
          for (y = _j = 0, _ref1 = this.cubes[x].length; 0 <= _ref1 ? _j < _ref1 : _j > _ref1; y = 0 <= _ref1 ? ++_j : --_j) {
            _results1.push(this.pixelView.renderObject(this.cubes[x][y], this.points[x][y]));
          }
          return _results1;
        }).call(this));
      }
      return _results;
    },
    setDraggable: function(bool) {
      var originPoint;
      if (!bool && this.scopedDrag) {
        this.scopedDrag.cleanup();
      } else {
        originPoint = this.origin;
        this.scopedDrag = {
          mousedown: function(event) {
            event.preventDefault();
            this.startX = event.pageX;
            this.startY = event.pageY;
            return this.win.on('mouseup.isoDragSecondary', this.mouseup.bind(this)).on('mousemove.isoDragSecondary', this.mousemove.bind(this));
          },
          mouseup: function(event) {
            event.preventDefault();
            this.win.off('.isoDragSecondary');
            delete this.startX;
            return delete this.startY;
          },
          mousemove: function(event) {
            event.preventDefault();
            if ((this.startX != null) && this.startX !== event.pageX) {
              originPoint.x -= this.startX - event.pageX;
            }
            if ((this.startY != null) && this.startY !== event.pageY) {
              originPoint.y -= this.startY - event.pageY;
            }
            this.startX = event.pageX;
            return this.startY = event.pageY;
          },
          init: function() {
            return this.win = $(window).on('mousedown.isoDrag', this.mousedown.bind(this));
          },
          cleanup: function() {
            this.win.off('.isoDrag').off('.isoDragSecondary');
            return delete this.win;
          }
        };
      }
      return this.scopedDrag.init();
    }
  };

/*
  noiseMachine = (size, seed)->
      @seedLen = 1024 ## for 1024, the max (before wrapping) is 10240
      @seed = if seed then seed.split(',') else @generateSeed()
      if @seed.length != @seedLen
          throw new Error 'Seed length does not match given noise map size.'
      if size < 32 or size > 10240
          throw new Error 'Maximum map sizes are between 32 and 10240.'
      @_maxSize = size;
      @setScale( this.seedLen / 2 );
      @setNormalize( this.seedLen * 5 );
  
  noiseMachine.prototype =
      generateSeed: ->
           *# Fisher-Yates algorithm ## http:##en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
           *# SUGGESTION FROM:  http:##sroucheray.org/blog/2009/11/array-sort-should-not-be-used-to-shuffle-an-array/
          seed = []
          for i in [0...@seedLen]
              seed.push(i+1);
          i = seed.length
          j = null
          temp = null
          while --i
              j = Math.floor( Math.random() * ( i + 1 ) )
              temp = seed[i]
              seed[i] = seed[j]
              seed[j] = temp
  
          return seed
  
      toString: ->
          @seed.join(',');
      setScale: (scale)->
          @_noiseScale = scale;
      setNormalize: (norm)->
          @_normalize = norm
  
      fade: (t)->
          return t * t * t * (t * (t * 6 - 15) + 10)
      lerp: ( t, a, b)->
          return a + t * (b - a)
      grad: (hash, x, y, z)->
          h = hash & 15                      ## CONVERT LO 4 BITS OF HASH CODE
          u = h<8 ? x : y                 ## INTO 12 @gradIENT DIRECTIONS.
          v = h<4 ? y : h==12||h==14 ? x : z
          return ((h&1) == 0 ? u : 0-u) + ((h&2) == 0 ? v : 0-v)
      scale: (n)->
          return (1 + n)/2
  
      noiseAt: (orig_x, orig_y, orig_z)->
          orig_z = if !orig_z then 0 else orig_z;
  
          if orig_x < 0 or orig_y < 0 or orig_x > @_maxSize or orig_y > @_maxSize
              return 0
           *# this sets boundaries so the map doesn't wrap
  
          x = ( @_noiseScale * ( orig_x / @_normalize ) )
          y = ( @_noiseScale * ( orig_y / @_normalize ) )
          z = ( @_noiseScale * ( orig_z / @_normalize ) )
  
          seed = @seed.slice(0);
          seed = seed.concat(seed);
          
          X = Math.floor(x) & (@seedLen-1)                  ## FIND UNIT CUBE THAT
          Y = Math.floor(y) & (@seedLen-1)                  ## CONTAINS POINT.
          Z = Math.floor(z) & (@seedLen-1);
          x -= Math.floor(x)                                ## FIND RELATIVE X,Y,Z
          y -= Math.floor(y)                                ## OF POINT IN CUBE.
          z -= Math.floor(z)
          u = @fade(x)                                ## COMPUTE @fade CURVES
          v = @fade(y)                                ## FOR EACH OF X,Y,Z.
          w = @fade(z);
          A = seed[X]+Y
          AA = seed[A]+Z
          AB = seed[A+1]+Z      ## HASH COORDINATES OF
          B = seed[X+1]+Y
          BA = seed[B]+Z
          BB = seed[B+1]+Z      ## THE 8 CUBE CORNERS,
          
          val = @scale(@lerp(w, @lerp(v, @lerp(u, @grad(seed[AA  ], x  , y  , z   ),  ## AND ADD
                                  @grad(seed[BA  ], x-1, y  , z   )), ## BLENDED
                          @lerp(u, @grad(seed[AB  ], x  , y-1, z   ),  ## RESULTS
                                  @grad(seed[BB  ], x-1, y-1, z   ))),## FROM  8
                  @lerp(v, @lerp(u, @grad(seed[AA+1], x  , y  , z-1 ),  ## CORNERS
                                  @grad(seed[BA+1], x-1, y  , z-1 )), ## OF CUBE
                          @lerp(u, @grad(seed[AB+1], x  , y-1, z-1 ),
                                  @grad(seed[BB+1], x-1, y-1, z-1 )))))
  
           *# ## THE FOLLOWING FADES the land into the water
          edgefade = Math.floor( @_maxSize / 2 ) ## 10
          x_dist = if orig_x <= edgefade then orig_x else if ( this._maxSize - orig_x ) <= edgefade then this._maxSize - orig_x else 0
          y_dist = if orig_y <= edgefade then orig_y else if ( this._maxSize - orig_y ) <= edgefade then this._maxSize - orig_y else 0
          if orig_x == 0 or orig_x == @_maxSize or ( x_dist > 0 && x_dist < edgefade )
              val -= ( 1 / x_dist )
          if orig_y == 0 or orig_y == this._maxSize or ( y_dist > 0 && y_dist < edgefade )
              val -= ( 1 / y_dist )
          if val < 0
              val = 0
           *# ## THE PRECEDING FADES the land into the water
  
          return val
   */

}).call(this);

编译

CSS

HTML

Isometric map，可以用鼠标拖动

map

编辑器支持Emmet

快捷键

Isometric map，可以用鼠标拖动

map

Mapbox.js 带地标信息的网页地图应用

Mapbox.js + Leaflet.label.js 地图及标签覆盖层

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：