html实现3d视觉特效
生活随笔
收集整理的這篇文章主要介紹了
html实现3d视觉特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<html>
<head>
<title>HTML5實現3D球效果</title>
<style type="text/css">
#box{
border:2px solid #f60; margin:0 auto;
}
</style>
<script>var spaceX = 30; //X方向的密度var spaceY = 30; //Y方向的密度var PI = Math.PI; //數學角度πvar radius = 200; //球的半徑var radian = PI / 180; //弧度var speedX = 0; //X方向的速度var speedY = 0; //Y方向的速度var offsetX = 300; //X方向的偏移量相當于將球的中心X坐標移之到畫布中央var offsetY = 300; //Y方向的偏移量相當于將球的中心Y坐標移之到畫布中央var spheres = new Array(); //存儲像素點var canvas; //畫布var context; //上下文var focalLength = 300; //控制球距離屏幕的距離var start = true; //是否啟動var sx = 0; //sinxvar cx = 0; //cosxvar sy = 0; //sinyvar cy = 0; //cosyvar sz = 0; //sinzvar cz = 0; //coszvar innerStaColor = "GREEN"; //表示內部顏色var outerStaColor = "RED"; //外部顏色var objectRadius = 10; //繪制原點半徑var scaleRatio = 0;var cameraView = {x: 0,y: 0,z: 0,rotX: 0,rotY: 0,rotZ: 0}; //視角角度/**author:qingfeileedate:2012-03-28description:初始化系統畫布信息**/function initCanvas() {try{ canvas = document.getElementById("sphere");context = canvas.getContext("2d");}catch(e){document.getElementById("tip_info").innerHTML = "您的瀏覽器不支持！"; }}/**author:qingfeileedate:2012-03-28description:初始化小球實體**/function initSphere() {for (var i = spaceY; i < 180; i += spaceY) {for (var angle = 0; angle < 360; angle += spaceX) {var object = {};var x = Math.sin(radian * i) * radius;object.x = Math.cos(angle * radian) * x;object.y = Math.cos(radian * i) * radius;object.z = Math.sin(angle * radian) * x;object.glow = .5; //亮度的范圍
spheres.push(object);}}}/**author:qingfeileedate:2012-03-28description:初始化系統函數**/function init() {initCanvas();initSphere();setInterval(this.update, 1000 / 60, this);setTimeout(function() {start = false;},1000);}/**author:qingfeileedate:2012-03-28description:設置整個大球的運轉速度**/function setSpeed(speedX, speedY) {this.speedX = speedX;this.speedY = speedY;}/**author:qingfeileedate:2012-03-28description:更新整個球的狀態以實現動態效果**/function update() {if (start) {setParam();}}/**author:qingfeileedate:2012-03-28description:設置各個小球的屬性**/function setParam() {//根據速度大小計算出一次旋轉的角度大小var rotYstep = speedX / 10000;var rotXstep = speedY / 10000;cameraView.rotY = rotYstep;cameraView.rotX = -rotXstep;//計算出對應的cos和sin
sx = Math.sin(cameraView.rotX);cx = Math.cos(cameraView.rotX);sy = Math.sin(cameraView.rotY);cy = Math.cos(cameraView.rotY);sz = Math.sin(cameraView.rotZ);cz = Math.cos(cameraView.rotZ);// 設置畫布的效果
context.fillStyle = 'rgba(0,0,0,0.1)';context.fillRect(0, 0, canvas.width, canvas.height);var l = spheres.length - 1;for (var i = l,obj; obj = spheres[i]; i--) {render(obj);}}/**author:qingfeileedate:2012-03-28description:渲染整個畫布**/function render(object) {var xy, xz, yx, yz, zx, zy;// 計算出物體的相對于照相機的位置var x = object.x - cameraView.x;var y = object.y - cameraView.y;var z = object.z - cameraView.z;// 繞X軸旋轉
xy = cx * y - sx * z;xz = sx * y + cx * z;// 繞Y軸旋轉
yz = cy * xz - sy * x;yx = sy * xz + cy * x;// 繞Z軸旋轉
zx = cz * yx - sz * xy;zy = sz * yx + cz * xy;//給各個球重新定位
object.x = zx;object.y = zy;object.z = yz;//根據z軸數據來縮放球
scaleRatio = focalLength / (focalLength + yz);scale = scaleRatio;if (object.glow > .5) {object.glow -= .02;}var sphereStyle = context.createRadialGradient(offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, scaleRatio * .5, offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, scaleRatio * objectRadius * .5);sphereStyle.addColorStop(0, innerStaColor);sphereStyle.addColorStop(object.glow, outerStaColor);sphereStyle.addColorStop(1, 'rgba(0,0,0,0)');context.fillStyle = sphereStyle;context.fillRect(offsetX + object.x * scaleRatio - scaleRatio * objectRadius * .5, offsetY + object.y * scaleRatio - scaleRatio * objectRadius * .5, scaleRatio * objectRadius, scaleRatio * objectRadius);document.getElementById("tip_info").innerHTML = "當前速度："+speedX+" "+ speedY+" 小球半徑："+objectRadius; }/**author:qingfeileedate:2012-03-28description:凍結/激活真個大球狀態**/function startOrPause() {if (start) {setTimeout(function() {start = false;},2000);document.getElementById("swi").innerHTML = "激活";innerStaColor = "GREEN";outerStaColor = "RED";} else {start = true;document.getElementById("swi").innerHTML = "2秒后凍結";innerStaColor = "RED";outerStaColor = "GREEN";}}function changeObjectRadius(val) {this.objectRadius = val;}window.addEventListener("load", init, true);</script></head><body><div id="box" style="width:600px; height:600px"> <canvas id="sphere" width="600" height="600" style="background:#0066FF"></canvas><div align="center"><button id="swi" onclick="startOrPause()">激活</button><button onclick="setSpeed(-150,0)">向東</button><button onclick="setSpeed(150,0)">向西</button><button onclick="setSpeed(0,-150)">向南</button><button onclick="setSpeed(0,150)">向北</button>小球大小： <input type="range" min="10" max="30" value="10" step="2" onchange="changeObjectRadius(this.value)"/></div><div align="center"><a id="tip_info"></a></div></div></body>
</html>
?
轉載于:https://www.cnblogs.com/objects/p/7127325.html
總結
以上是生活随笔為你收集整理的html实现3d视觉特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python error: Unable
- 下一篇： Kinect实现简单的三维重建