请选择 进入手机版 | 继续访问电脑版
查看: 5993|回复: 124

[新手教程] html5 canvas超逼真3d动画场景

  [复制链接]
最佳答案
0 
guofinni 发表于 2017-2-21 14:36:46 | 显示全部楼层 |阅读模式

这是一款效果非常逼真的html5 canvas 3d动画场景效果。3d动画场景中的canvas使用javascript动态生成,并使用css3对动画场景进行渲染。这个3d动画场景可以在场景的内部和顶部进行动画切换。


QQ截图20170221142935.jpg

简要教程

这是一个使用Html5 canvas制作的相当真实的3d动画场景效果。canvas由js在运行时动态生成。

HTML
  1. <div class="wrapper">   
  2.     <div class="context"></div>
  3.     <h1>Look around by dragging and holding the mouse button</h1>   
  4. </div>
  5. <div id="gui"></div>
复制代码

生成canvas的javascript代码:
  1. var canvas = document.createElement('canvas');
  2. canvas.setAttribute('width', '420');
  3. canvas.setAttribute('height', '380');
  4. canvas.setAttribute('id', 'canvas');
  5. var canvasWidth = canvas.width = canvas.getAttribute('width');
  6. var canvasHeight = canvas.height = canvas.getAttribute('height');
  7. var mainContext = document.getElementsByClassName('context')[0];
  8. mainContext.appendChild(canvas);
复制代码


初始化地图:
  1. function initTexMap() {
  2.     for ( var i = 1; i < 16; i++) {
  3.         var br = 255 - ((Math.random() * 96) | 0);
  4.         for ( var y = 0; y < 16 * 3; y++) {
  5.             for ( var x = 0; x < 16; x++) {
  6.                 var color = 0x966C4A;
  7.                 if (i == 4)
  8.                     color = 0x7F7F7F;
  9.                 if (i != 4 || ((Math.random() * 3) | 0) === 0) {
  10.                     br = 255 - ((Math.random() * 96) | 0);
  11.                 }
  12.                 if ((i == 1 && y < (((x * x * 3 + x * 81) >> 2) & 3) + 18)) {
  13.                     color = 0x6AAA40;
  14.                 } else if ((i == 1 && y < (((x * x * 3 + x * 81) >> 2) & 3) + 19)) {
  15.                     br = br * 2 / 3;
  16.                 }
  17.                 if (i == 7) {
  18.                     color = 0x675231;
  19.                     if (x > 0 && x < 15
  20.                             && ((y > 0 && y < 15) || (y > 32 && y < 47))) {
  21.                         color = 0xBC9862;
  22.                         var xd = (x - 7);
  23.                         var yd = ((y & 15) - 7);
  24.                         if (xd < 0)
  25.                             xd = 1 - xd;
  26.                         if (yd < 0)
  27.                             yd = 1 - yd;
  28.                         if (yd > xd)
  29.                             xd = yd;

  30.                         br = 196 - ((Math.random() * 32) | 0) + xd % 3 * 32;
  31.                     } else if (((Math.random() * 2) | 0) === 0) {
  32.                         br = br * (150 - (x & 1) * 100) / 100;
  33.                     }
  34.                 }

  35.                 if (i == 5) {
  36.                     color = 0xB53A15;
  37.                     if ((x + (y >> 2) * 4) % 8 === 0 || y % 4 === 0) {
  38.                         color = 0xBCAFA5;
  39.                     }
  40.                 }
  41.                 if (i == 9) {
  42.                     color = 0x4040ff;
  43.                 }
  44.                 var brr = br;
  45.                 if (y >= 32)
  46.                     brr /= 2;

  47.                 if (i == 8) {
  48.                     color = 0x50D937;
  49.                     if (((Math.random() * 2) | 0) === 0) {
  50.                         color = 0;
  51.                         brr = 255;
  52.                     }
  53.                 }               

  54.                 var col = (((color >> 16) & 0xff) * brr / 255) << 16
  55.                         | (((color >> 8) & 0xff) * brr / 255) << 8
  56.                         | (((color) & 0xff) * brr / 255);
  57.                 texmap[x + y * 16 + i * 256 * 3] = col;
  58.             }
  59.         }
  60.     }
  61. }
复制代码


顶部视图:
  1. function initMap(topviewEnabled) {
  2. for (var cell = 0; cell < pixels.length; cell += 4) {
  3.         var ii = Math.floor(cell/4);
  4.         var x = ii % canvasWidth;
  5.         var y = Math.floor(ii / canvasWidth);
  6.         var xx = 123 + x * .02;
  7.         var yy = 324 + y * .02;
  8.         
  9.         var value = Math.floor((perlin.noise(xx,yy,1))*256);              
  10.         pixels[cell] = pixels[cell + 1] = pixels[cell + 2] = value;
  11.         pixels[cell + 3] = 255; // alpha.
  12.     }

  13.     for ( var z = 0; z < 128; z++) {        
  14.         for (x = 0; x < 64; x++) {
  15.             for (y = 0; y < 64; y++) {            
  16.                 i = z << 12 | y << 6 | x;
  17.                 var yd = (y - 32.5) * 0.4;
  18.                 var zd = (z - 32.5) * 0.4;
  19.                 map[i] = Math.random() * 16 | 0;
  20.                 var r = (pixels[x + y * w] * 4 + 0) & 0xff;
  21.                 var g = (pixels[x + y * w] * 4 + 1) & 0xff;
  22.                 var b = (pixels[x + y * w] * 4 + 2) & 0xff;   
  23.                 var pixelCol = r << 16 | g << 8 | b;

  24.                 i = z << 12 | y << 6 | x;
  25.                 if (map[i] == 0 && y > 2174564)
  26.                     map[i] = 9;
  27.                 else if (map[i] != 0) {
  28.                     var j = z << 12 | (y-1) << 6 | x;
  29.                     if (map[j] == 0) {
  30.                         map[i] = 1;
  31.                     } else {
  32.                         j = z << 12 | (y-2) << 6 | x;
  33.                         if (map[j] == 0)
  34.                             map[i] = 2;                       
  35.                     }
  36.                 }
  37.             
  38.                 if(topviewEnabled) {                    
  39.                     if ((pixelCol & 0xff * 0.48) < (64 - y) << 2) {
  40.                         map[i] = 0;
  41.                     }
  42.                 } else {
  43.                     if (Math.random() > Math.sqrt(Math.sqrt(yd * yd + zd * zd)) - 0.8 &&                    
  44.                         ((pixelCol & 0xff * 0.5) < (64 - y) << 2)) {
  45.                             map[i] = 0;
  46.                     }
  47.                 }  
  48.             }
  49.         }
  50.     }
  51. }
复制代码

详细代码请参考下载文件。
游客,如果您要查看本帖隐藏内容请回复


最佳答案
0 
abcdls0905 发表于 2017-2-21 14:48:53 | 显示全部楼层
666666666666666666666666666
最佳答案
0 
swordlegend 发表于 2017-2-21 17:50:52 | 显示全部楼层
如果您要查看本帖隐藏内容请回复
最佳答案
0 
jsc123 发表于 2017-2-22 10:55:03 | 显示全部楼层
大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大大是谁
最佳答案
0 
wowowow 发表于 2017-2-22 11:01:29 | 显示全部楼层
看看还是不错的
最佳答案
0 
狭隘龙 发表于 2017-2-22 21:26:44 | 显示全部楼层
66666666666666666666
最佳答案
0 
wxy360 发表于 2017-2-22 22:54:25 | 显示全部楼层
学习无止境,歇息分享中对对对     
最佳答案
0 
9sfisher 发表于 2017-2-23 07:29:47 | 显示全部楼层
哈哈,找好久了,终于出来了
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐阅读 More>

© 2001-2015 9秒社团

合作伙伴

公司简介 | 联系方式
COPYRIGHT©2015 ZHONGQINGLONGTU NETWORK CO.LTD ALL RIGHTS RESERVED.ICP备11023195号-4
北京中清龙图网络技术有限公司
返回顶部 返回列表