如题所述
html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的。
比如可以用以下方法实现图片的360度旋转:
代码示例:
var render, loop, t, dt, //定义变量
DEG2RAD = Math.PI / 180, //角度转弧度
cvs = document.querySelector('canvas'), //创建canvas
ctx = cvs.getContext('2d'),//绘制2d图形上下文
teddy = new Image(), //创建图像
heart = new Image(), //创建图像中心
angle = 0,//初始化角度为0
reqAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
//创建动画帧
cvs.width = 400;
cvs.height = 200;
teddy.src = 'xxx.jpg';
heart.src = 'yyy.jpg';
//开始渲染
render = function (timestamp) {
dt = timestamp - t;
t = timestamp;
// cavas设置为白色
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0, 0, cvs.width, cvs.height);
// 绘制中心
ctx.drawImage(heart, -20, -120);
// 绘制teddy
ctx.save();
ctx.translate(cvs.width/2, cvs.height/2); // 移动鼠标到画布中心
ctx.rotate(DEG2RAD * angle); // 旋转画布
ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2); // 绘制中心图片
angle += dt / 16.67 * 6; // increment angle ~ 360 deg/sec
ctx.restore();
};
loop = function (timestamp) {
reqAnimFrame(loop);
render(timestamp);
};
t = Date.now();
loop(t);
比如可以用以下方法实现图片的360度旋转:
代码示例:
var render, loop, t, dt, //定义变量
DEG2RAD = Math.PI / 180, //角度转弧度
cvs = document.querySelector('canvas'), //创建canvas
ctx = cvs.getContext('2d'),//绘制2d图形上下文
teddy = new Image(), //创建图像
heart = new Image(), //创建图像中心
angle = 0,//初始化角度为0
reqAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
//创建动画帧
cvs.width = 400;
cvs.height = 200;
teddy.src = 'xxx.jpg';
heart.src = 'yyy.jpg';
//开始渲染
render = function (timestamp) {
dt = timestamp - t;
t = timestamp;
// cavas设置为白色
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0, 0, cvs.width, cvs.height);
// 绘制中心
ctx.drawImage(heart, -20, -120);
// 绘制teddy
ctx.save();
ctx.translate(cvs.width/2, cvs.height/2); // 移动鼠标到画布中心
ctx.rotate(DEG2RAD * angle); // 旋转画布
ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2); // 绘制中心图片
angle += dt / 16.67 * 6; // increment angle ~ 360 deg/sec
ctx.restore();
};
loop = function (timestamp) {
reqAnimFrame(loop);
render(timestamp);
};
t = Date.now();
loop(t);
温馨提示:答案为网友推荐,仅供参考
第1个回答 2016-06-22
通常导入的3D模型是通用的标准向量格式*.AI序列,再由Flash进行引入从而实现目的,也可以用Dimensions来导入。追问
HTML5可以做到吗?
第2个回答 2016-06-17
three.js,可以使用这个,还是不错的,官网也有文档教程。追问
是插件吗?好像不能下载模板吧?