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);
}
html5 动态3d箭头,HTML5旋转的3D镐 | 箭头相关推荐
- HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...
- HTML5七夕情人节表白网页(抖音3D立方体图像库) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音❤3D立方体图像库❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
- 基于HTML5 WebGL实现3D飞机叶轮旋转
在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D拓扑上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for W ...
- 使用HTML5 canvas和光线投影算法创建伪3D 游戏
为什么80%的码农都做不了架构师?>>> 作者 Jacob Seidelin · 2008年11月28日 本文翻译自 Creating pseudo 3D games with ...
- image 3d view HTML5,Cute Slider - 3D 2D HTML5 Image Slider
IMPORTANT! We can NOT provide support for this item since Feb 2015. If you would like to use our ite ...
- h5动画 php,HTML_多视角3D逼真HTML5水波动画 ,html5+css3进度条倒计时动画特效 - phpStudy...
多视角3D逼真HTML5水波动画 html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了htm ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- [Unity] Unity 3D 中的旋转
Unity 3D 中的旋转 一.Unity 3D 中 Rotation 在Unity中,旋转通常可以用一个三维向量(x,y,z)表示.实际上这是欧拉角.三个分量分别是绕x轴.y轴和z轴的旋转角度. 要 ...
- android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
- R语言使用car包的scatter3d函数可视化可以交互旋转的3D散点图(Spinning 3D scatter plot by the scatter3d() function of car)
R语言使用car包的scatter3d函数可视化可以交互旋转的3D散点图(Spinning 3D scatter plot produced by the scatter3d() function i ...
最新文章
- 【Qt】通过QtCreator源码学习Qt(八):插件生命周期及对应状态(代码走读)
- 大龄程序员刚迈过了 35 岁这个“坎儿”,和大家说点儿心里话
- 你要成为人才,先学习做伯乐
- 定义zabbix_action报警通知模板
- BigDecimal的使用说明
- 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言——1071:菲波那契数
- [JDK]找不到或无法加载主类 java
- 消息队列 策略_太狠了!京东T8架构师建议吃透这40W字消息队列文档,涨薪15K不是梦...
- appium查看控件的方法
- Snabbdom(虚拟dom-6-createElm函数)
- Atitit. Derby的使用总结attilax
- nsis出错_安装程序出现NSIS ERROR错误解决思路
- tictac 立体井字棋--数学问题
- 为什么使用VO,DTO,BO
- 视频教程-SpringBoot核心技术-Java
- 条件极值例题_条件极值问题、拉格朗日乘数法
- python汽车租赁程序_python数据分析实例:共享单车租用影响因素探索
- Oracle 数据库管理员SYS/SYSTEM密码忘记了,怎么破?
- HNU实验五05阿迪看医生
- 安卓六大平台开发者注册地址和方法链接
热门文章
- Matlab运用mapping包在地图上绘制散点图(热力图)
- linux centos php 安装,linux centos7.4 php7.1.31安装
- 开灯关灯java script_Jquery实现视频播放页面的关灯开灯效果
- word文档怎么开启护眼模式_开启手机护眼模式,我们的眼睛真的能免受伤害吗?...
- pip安装cinrad
- Linux 服务器惊现比特币勒索事件,腾讯云安全专家来支招
- mysql创建索引以及进程过程中出现的问题
- 基于modelsim-SE的简单仿真流程—上
- iOS-Delegate模式
- JAVA程序设计:接受数字并求和