html5 动态3d箭头,HTML5旋转的3D镐 | 箭头

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var c = new GameCanvas('gc');

c.setsize(window.innerWidth, window.innerHeight);

var td = new TDScene(c);

td.init();

var width = c.size('x');

var height = c.size('y');

var model = {

x: 0,

y: 0.2,

z: 300,

velo: 0,

dir: 1

};

var gravity = 0.3;

var pickaxe = {

blocks: [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0,

0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0,

0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0,

0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1,

0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1,

0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1,

0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1,

0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1,

0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0,

0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,

0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,

1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0

],

colors: ["red", "red", "red", "red", "red", "rgb(14, 63, 54)", "rgb(14, 63, 54)", "rgb(14, 63, 54)", "rgb(14, 63, 54)", "rgb(14, 63, 54)", "red", "red", "red",

"red", "red", "red", "red", "rgb(14, 63, 54)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "red",

"red", "red", "red", "red", "red", "rgb(14, 63, 54)", "rgb(14, 63, 54)", "rgb(14, 63, 54)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red",

"red", "red", "red", "red", "red", "red", "red", "red", "rgb(67, 33, 1)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(14, 63, 54)",

"red", "red", "red", "red", "red", "red", "red", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "rgb(43, 199, 172)", "rgb(43, 199, 172)", "rgb(14, 63, 54)",

"red", "red", "red", "red", "red", "red", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "rgb(14, 63, 54)", "rgb(43, 199, 172)", "rgb(14, 63, 54)",

"red", "red", "red", "red", "red", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "red", "rgb(14, 63, 54)", "rgb(43, 199, 172)", "rgb(14, 63, 54)",

"red", "red", "red", "red", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "red", "red", "rgb(14, 63, 54)", "rgb(43, 199, 172)", "rgb(14, 63, 54)",

"red", "red", "red", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "red", "red", "red", "red", "rgb(14, 63, 54)", "red",

"red", "red", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "red", "red", "red", "red", "red", "red", "red",

"red", "rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "red", "red", "red", "red", "red", "red", "red", "red",

"rgb(67, 33, 1)", "rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red",

"rgb(102, 51, 0)", "rgb(33, 13, 1)", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red", "red"

]

};

var modelList = [];

var modelListBlocks = pickaxe.blocks;

var modelListColor = pickaxe.colors;

var ct = 0;

var bw = 0.17 / 2;

var bh = 0.17 / 2;

var size = 13;

for (var y = 0 - bh * (size / 2); y < bh * (size / 2); y += bh) {

for (var x = 0 - bw * (size / 2); x < bw * (size / 2); x += bw) {

if (modelListBlocks[ct])

modelList.push({

x: x,

y: y + model.y,

z: 300,

color: modelListColor[ct]

});

ct++;

}

}

model.model = modelList;

var rot = 0;

loop();

function loop() {

c.fill(0, 0, width, height, "white", "black");

for (var i = 0; i < model.model.length; i++) {

var m = model.model[i];

var a = {

x: model.x,

z: model.z

};

var angle = c.angle(a.x, a.z, m.x, m.z);

var dist = c.distance(a.x, a.z, m.x, m.z);

a.x += Math.cos((angle + rot) * Math.PI / 180) * dist;

a.z += Math.sin((angle + rot) * Math.PI / 180) * 20 * dist;

td.rotCube(a.x, m.y, a.z, bw * 1.47, bh * 2.02, 0.25, m.color, rot, true);

}

/*td.centerY += model.velo;

if (model.dir == 1)

model.velo += gravity;

if (model.dir == -1)

model.velo -= gravity;

if (td.centerY > height/2) {

model.dir = -1;

}

if (td.centerY < height/2)

model.dir = 1;*/

rot += 1;

if (rot > 270)

rot = -90;

requestAnimationFrame(loop);

}