HTML5怎么实现多视角3D可旋转的标志动画
这篇“HTML5怎么实现多视角3D可旋转的标志动画”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML5怎么实现多视角3D可旋转的标志动画”文章吧。
创新互联成立与2013年,先为东源等服务建站,东源等地企业,进行企业商务咨询服务。为东源企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
HTML代码
XML / HTML代码将内容复制到文本
< div class = “链接叠加” >
div >
< canvas id = “ canvas” style = “ background-color:#ddd” > canvas >
JavaScript代码
JavaScript代码将内容复制到
//绑定到窗口onload处理程序
window.addEventListener('load' ,onloadHandler, false );
/ **
*窗口加载处理程序
* /
函数 onloadHandler()
{
var canvas = document.getElementById('canvas' );
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var k3dmain = new K3D.Controller(canvas, true );
//生成3D对象
var obj1 = new K3D.K3DObject();
与 (obj1)
{
drawmode = “ solid” ;
shademode = “ lightsource” ;
sortmode = “未排序” ;
addphi = -0.5;
大约= -90;
perslevel = 1000;
在里面(
[{x:-80,y:180,z:0},{x:0,y:180,z:-80},{x:0,y:0,z:-80},{x:- 80,y:20,z:0},{x:-50,y:150,z:-30},{x:0,y:150,z:-80},{x:0,y:130 ,z:-80},{x:-30,y:130,z:-50},{x:-28,y:110,z:-52},{x:0,y:110,z: -80},{x:0,y:90,z:-80},{x:-45,y:90,z:-35},{x:-44,y:80,z:-36} ,{x:-25,y:80,z:-55},{x:-22,y:66,z:-58},{x:0,y:60,z:-80},{x :0,y:40,z:-80},{x:-40,y:50,z:-40}],
[],
[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[235,235,235],顶点:[4,5,6,7,8,9,10 ,11,4]},{颜色:[235,235,235],顶点:[12,13,14,15,16,17,12]}]
);
}
k3dmain.addK3DObject(obj1);
var obj2 = new K3D.K3DObject();
与 (obj2)
{
drawmode = “ solid” ;
shademode = “ lightsource” ;
sortmode = “未排序” ;
addphi = -0.5;
大约= -90;
perslevel = 1000;
在里面(
[{x:0,y:180,z:-80},{x:80,y:180,z:0},{x:80,y:20,z:0},{x:0,y :0,z:-80},{x:0,y:165,z:-80},{x:68,y:165,z:-12},{x:55,y:35,z: -25},{x:0,y:20,z:-80},{x:0,y:150,z:-80},{x:50,y:150,z:-30},{ x:47,y:130,z:-33},{x:0,y:130,z:-80},{x:0,y:110,z:-80},{x:45,y :110,z:-35},{x:40,y:50,z:-40},{x:0,y:40,z:-80},{x:0,y:60,z: -80},{x:20,y:66,z:-60},{x:23,y:90,z:-57},{x:0,y:90,z:-80}]],
[],
[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[240,101,41],顶点:[4,5,6,7,4]} ,{颜色:[235,235,235],顶点:[8,9,10,11,8]}},{颜色:[235,235,235],顶点:[12,13,14,15,16,17,18,19,12 ]}]
);
}
k3dmain.addK3DObject(obj2);
var obj3 = new K3D.K3DObject();
与 (obj3)
{
drawmode = “ solid” ;
shademode = “ lightsource” ;
sortmode = “未排序” ;
addphi = -0.5;
大约= -90;
perslevel = 1000;
在里面(
[{x:80,y:180,z:0},{x:0,y:180,z:80},{x:0,y:0,z:80},{x:80,y: 20,z:0},{x:50,y:150,z:30},{x:0,y:150,z:80},{x:0,y:130,z:80},{ x:30,y:130,z:50},{x:28,y:110,z:52},{x:0,y:110,z:80},{x:0,y:90, z:80},{x:45,y:90,z:35},{x:44,y:80,z:36},{x:25,y:80,z:55},{x: 22,y:66,z:58},{x:0,y:60,z:80},{x:0,y:40,z:80},{x:40,y:50,z: 40}],
[],
[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[235,235,235],顶点:[4,5,6,7,8,9,10 ,11,4]},{颜色:[235,235,235],顶点:[12,13,14,15,16,17,12]}]
);
}
k3dmain.addK3DObject(obj3);
var obj4 = new K3D.K3DObject();
与 (obj4)
{
drawmode = “ solid” ;
shademode = “ lightsource” ;
sortmode = “未排序” ;
addphi = -0.5;
大约= -90;
perslevel = 1000;
在里面(
[{x:0,y:180,z:80},{x:-80,y:180,z:0},{x:-80,y:20,z:0},{x:0, y:0,z:80},{x:0,y:165,z:80},{x:-68,y:165,z:12},{x:-55,y:35,z: 25},{x:0,y:20,z:80},{x:0,y:150,z:80},{x:-50,y:150,z:30},{x:- 47,y:130,z:33},{x:0,y:130,z:80},{x:0,y:110,z:80},{x:-45,y:110,z :35},{x:-40,y:50,z:40},{x:0,y:40,z:80},{x:0,y:60,z:80},{x: -20,y:66,z:60},{x:-23,y:90,z:57},{x:0,y:90,z:80}],
[],
[{颜色:[227,76,38],顶点:[0,1,2,3,0]},{颜色:[240,101,41],顶点:[4,5,6,7,4]} ,{颜色:[235,235,235],顶点:[8,9,10,11,8]}},{颜色:[235,235,235],顶点:[12,13,14,15,16,17,18,19,12 ]}]
);
}
k3dmain.addK3DObject(obj4);
var objBase = new K3D.K3DObject();
与 (objBase)
{
drawmode = “ solid” ;
shademode = “ lightsource” ;
sortmode = “未排序” ;
addphi = -0.5;
大约= -90;
perslevel = 1000;
在里面(
[{x:0,y:0,z:-80},{x:-80,y:20,z:0},{x:0,y:0,z:80},{x:80, y:20,z:0}],
[],
[{颜色:[227,76,38],顶点:[0,2,1,0]},{颜色:[227,76,38],顶点:[0,3,2,0]}]
);
}
k3dmain.addK3DObject(objBase);
var objHtml = 新的 K3D.K3DObject();
与 (objHtml)
{
drawmode = “ solid” ;
shademode = “ lightsource” ;
// sortmode =“ unsorted”;
颜色= [64,64,64];
双面= 真;
addphi = -0.5;
大约= 100;
比例= 0.75;
perslevel = 1000;
在里面(
[{x:-80,y:40,z:0},{x:-70,y:40,z:0},{x:-70,y:30,z:0},{x:- 60,y:30,z:0},{x:-60,y:40,z:0},{x:-50,y:40,z:0},{x:-50,y:10 ,z:0},{x:-60,y:10,z:0},{x:-60,y:20,z:0},{x:-70,y:20,z:0} ,{x:-70,y:10,z:0},{x:-80,y:10,z:0},{x:-40,y:40,z:0},{x:- 10,y:40,z:0},{x:-10,y:30,z:0},{x:-20,y:30,z:0},{x:-20,y:10 ,z:0},{x:-30,y:10,z:0},{x:-30,y:30,z:0},{x:-40,y:30,z:0} ,{x:0,y:40,z:0},{x:10,y:40,z:0},{x:20,y:30,z:0},{x:30,y: 40,z:0},{x:40,y:40,z:0},{x:40,y:10,z:0},{x:30,y:10,z:0},{ x:30,y:30,z:0},{x:20,y:20,z:0},{x:10,y:30,z:0},{x:10,y:10, z:0},{x:0,y:10,z:0},{x:50,y:40,z:0},{x:60,y:40,z:0},{x: 60,y:20,z:0},{x:80,y:20,z:0},{x:80,y:10,z:0},{x:50,y:10,z: 0}],
[],
[{vertices:[0,1,2,3,4,5,6,7,8,9,10,11,0]} ,, {vertices:[12,13,14,15,16,17,18 ,19,12]},{顶点:[20,21,22,23,24,25,26,27,28,29,30,31,20]},{顶点:[32,33,34,35 ,36,37,32]}]
);
}
k3dmain.addK3DObject(objHtml);
//添加渲染循环回调
var ctx = canvas.getContext('2d' );
var rotationOffset = 0;
var len =(canvas.height> canvas.width?canvas.height:canvas.width)* 0.7;
k3dmain.clearBackground = false ;
k3dmain.callback = 函数()
{
//手动清除bg-因为我们要渲染一些额外的东西
ctx.clearRect(0,0,canvas.width,canvas.height);
//在K3D进行3D渲染之前绘制bg效果
ctx.save();
ctx.translate(canvas.width / 2,canvas.height / 2);
ctx.rotate(rotationOffset);
//第一次填充-外部光线
var RAYCOUNT = 24;
ctx.fillStyle = “ #eee” ;
ctx.beginPath();
对于 (var i = 0; i { //旋转上下文 ctx.rotate(TWOPI / RAYCOUNT); ctx.moveTo(0,0); ctx.lineTo(-20,len); ctx.lineTo(20,len); } ctx.closePath(); ctx.fill(); //第二遍填充-内部光线 ctx.fillStyle = “ #fff ” ; ctx.beginPath(); 对于 (var i = 0; i { //旋转上下文 ctx.rotate(TWOPI / RAYCOUNT); ctx.moveTo(0,0); ctx.lineTo(-15,len); ctx.lineTo(15,len); } ctx.closePath(); ctx.fill(); ctx.restore(); rotationOffset + = 0.005; //将用户互动应用于轮播 对于 (var i = 0,objs = k3dmain.objects; i { objs [i] .ophi + = targetRotationX; } 如果 (targetRotationX> -0.5)targetRotationX-= 0.05; 否则如果 (targetRotationX <-0.55)targetRotationX + = 0.05; 如果 (targetRotationX> -0.55 && targetRotationX <-0.5)targetRotationX = -0.5; }; //开始演示循环 k3dmain.paused = true ; setInterval(function (){k3dmain.tick()},1000/60); } //从Doob先生http://mrdoob.com/借来的漂亮的拖动/触摸事件捕获代码 var targetRotationX = 0; var targetRotationOnMouseDownX = 0; var mouseX = 0; var mouseXOnMouseDown = 0; var targetRotationY = 0; var targetRotationOnMouseDownY = 0; var mouseY = 0; var mouseYOnMouseDown = 0; var windowHalfX = window.innerWidth / 2; var windowHalfY = window.innerHeight / 2; document.addEventListener('mousedown' ,onDocumentMouseDown, false ); document.addEventListener('touchstart' ,onDocumentTouchStart, false ); document.addEventListener('touchmove' ,onDocumentTouchMove, false ); 函数 onDocumentMouseDown(event){ event.preventDefault(); document.addEventListener('mousemove' ,onDocumentMouseMove, false ); document.addEventListener('mouseup' ,onDocumentMouseUp, false ); document.addEventListener('mouseout' ,onDocumentMouseOut, false ); mouseXOnMouseDown = event.clientX-windowHalfX; targetRotationOnMouseDownX = targetRotationX; mouseYOnMouseDown = event.clientY-windowHalfY; targetRotationOnMouseDownY = targetRotationY; } 函数 onDocumentMouseMove(event) { mouseX = event.clientX-windowHalfX; targetRotationX = targetRotationOnMouseDownX +(mouseX-mouseXOnMouseDown)* 0.02; mouseY = event.clientY-windowHalfY; targetRotationY = targetRotationOnMouseDownY +(mouseY-mouseYOnMouseDown)* 0.02; } 函数 onDocumentMouseUp(event) { document.removeEventListener('mousemove' ,onDocumentMouseMove, false ); document.removeEventListener('mouseup' ,onDocumentMouseUp, false ); document.removeEventListener('mouseout' ,onDocumentMouseOut, false ); } 函数 onDocumentMouseOut(event) { document.removeEventListener('mousemove' ,onDocumentMouseMove, false ); document.removeEventListener('mouseup' ,onDocumentMouseUp, false ); document.removeEventListener('mouseout' ,onDocumentMouseOut, false ); } 函数 onDocumentTouchStart(event) { 如果 (event.touches.length == 1) { event.preventDefault(); mouseXOnMouseDown = event.touches [0] .pageX-windowHalfX; targetRotationOnMouseDownX = targetRotationX; mouseYOnMouseDown = event.touches [0] .pageY-windowHalfY; targetRotationOnMouseDownY = targetRotationY; } } 函数 onDocumentTouchMove(event) { 如果 (event.touches.length == 1) { event.preventDefault(); mouseX = event.touches [0] .pageX-windowHalfX; targetRotationX = targetRotationOnMouseDownX +(mouseX-mouseXOnMouseDown)* 0.05; mouseY = event.touches [0] .pageY-windowHalfY; targetRotationY = targetRotationOnMouseDownY +(mouseX-mouseYOnMouseDown)* 0.05; } } 以上就是关于“HTML5怎么实现多视角3D可旋转的标志动画”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
分享名称:HTML5怎么实现多视角3D可旋转的标志动画
网页链接:http://scyanting.com/article/pdsoip.html