溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“HTML5怎么實現多視角3D可旋轉的標志動畫”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML5怎么實現多視角3D可旋轉的標志動畫”文章吧。
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 <RAYCOUNT; 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 <RAYCOUNT; 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.length; 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可旋轉的標志動畫”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
