用HTML5画一个3D的三角形网格
时间：2016-02-29本教程的主题是利用HTML5技术在2D和3D图形之间搭一座互通的桥梁（通过WebGL方式）。今天我将展示如何使用一个多边形网格绘制一个三维对象。
一个多边形网格或非结构化网格是一个集合的顶点,边缘和面孔,在3
d电脑图像和实体建模定义了一个多面体的对象的形状。通常由三角形的面孔,四边形或其他简单凸多边形,因为这样可以简化渲染,但也可能是由更一般的凹多边
形,或多边形的洞。
为了演示,我们准备了简单的三维物体——一个多维数据集和多维领域
HTML CODE
通常我们会在canvas里做一个简单的标记
我提取一个生成的对象初始化来:
这意味着如果我们需要显示一个多维数据集——你必须取消第一个一行,如果你想显示一个球体与6张面孔——选择第二个变体。
JS CODE
JS的代码分为三部分：主体的代码，网格代码和转换代码
meshes.js
main.js
查看演示：http://www.script-tutorials.com/demos/319/index.html
为了演示,我们准备了简单的三维物体——一个多维数据集和多维领域
HTML CODE
通常我们会在canvas里做一个简单的标记
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Triangle mesh for 3D objects in HTML5 | Script Tutorials</title>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add script -->
<script src="js/meshes.js"></script>
<script src="js/transform.js"></script>
<script>
//var obj = new cube();
//var obj = new sphere(6);
var obj = new sphere(16);
</script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container">
<canvas id="scene" height="500" width="700" tabindex="1"></canvas>
<div class="hint">Please use Up / Down keys to change opacity</div>
</div>
</body>
</html>
我提取一个生成的对象初始化来:
<script>
//var obj = new cube();
//var obj = new sphere(6);
var obj = new sphere(16);
</script>
这意味着如果我们需要显示一个多维数据集——你必须取消第一个一行,如果你想显示一个球体与6张面孔——选择第二个变体。
JS CODE
JS的代码分为三部分：主体的代码，网格代码和转换代码
meshes.js
// get random color
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 15)];
}
return color;
}
// prepare object
function prepareObject(o) {
o.colors = new Array();
// prepare normals
o.normals = new Array();
for (var i = 0; i < o.faces.length; i++) {
o.normals[i] = [0, 0, 0];
o.colors[i] = getRandomColor();
}
// prepare centers: calculate max positions
o.center = [0, 0, 0];
for (var i = 0; i < o.points.length; i++) {
o.center[0] += o.points[i][0];
o.center[1] += o.points[i][1];
o.center[2] += o.points[i][2];
}
// prepare distances
o.distances = new Array();
for (var i = 1; i < o.points.length; i++) {
o.distances[i] = 0;
}
// calculate average center positions
o.points_number = o.points.length;
o.center[0] = o.center[0] / (o.points_number - 1);
o.center[1] = o.center[1] / (o.points_number - 1);
o.center[2] = o.center[2] / (o.points_number - 1);
o.faces_number = o.faces.length;
o.axis_x = [1, 0, 0];
o.axis_y = [0, 1, 0];
o.axis_z = [0, 0, 1];
}
// Cube object
function cube() {
// prepare points and faces for cube
this.points=[
[0,0,0],
[100,0,0],
[100,100,0],
[0,100,0],
[0,0,100],
[100,0,100],
[100,100,100],
[0,100,100],
[50,50,100],
[50,50,0],
];
this.faces=[
[0,4,5],
[0,5,1],
[1,5,6],
[1,6,2],
[2,6,7],
[2,7,3],
[3,7,4],
[3,4,0],
[8,5,4],
[8,6,5],
[8,7,6],
[8,4,7],
[9,5,4],
[9,6,5],
[9,7,6],
[9,4,7],
];
prepareObject(this);
}
// Sphere object
function sphere(n) {
var delta_angle = 2 * Math.PI / n;
// prepare vertices (points) of sphere
var vertices = [];
for (var j = 0; j < n / 2 - 1; j++) {
for (var i = 0; i < n; i++) {
vertices[j * n + i] = [];
vertices[j * n + i][0] = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle);
vertices[j * n + i][1] = 100 * Math.cos((j + 1) * delta_angle);
vertices[j * n + i][2] = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle);
}
}
vertices[(n / 2 - 1) * n] = [];
vertices[(n / 2 - 1) * n + 1] = [];
vertices[(n / 2 - 1) * n][0] = 0;
vertices[(n / 2 - 1) * n][1] = 100;
vertices[(n / 2 - 1) * n][2] = 0;
vertices[(n / 2 - 1) * n + 1][0] = 0;
vertices[(n / 2 - 1) * n + 1][1] = -100;
vertices[(n / 2 - 1) * n + 1][2] = 0;
this.points = vertices;
// prepare faces
var faces = [];
for (var j = 0; j < n / 2 - 2; j++) {
for (var i = 0; i < n - 1; i++) {
faces[j * 2 * n + i] = [];
faces[j * 2 * n + i + n] = [];
faces[j * 2 * n + i][0] = j * n + i;
faces[j * 2 * n + i][1] = j * n + i + 1;
faces[j * 2 * n + i][2] = (j + 1) * n + i + 1;
faces[j * 2 * n + i + n][0] = j * n + i;
faces[j * 2 * n + i + n][1] = (j + 1) * n + i + 1;
faces[j * 2 * n + i + n][2] = (j + 1) * n + i;
}
faces[j * 2 * n + n - 1] = [];
faces[2 * n * (j + 1) - 1] = [];
faces[j * 2 * n + n - 1 ][0] = (j + 1) * n - 1;
faces[j * 2 * n + n - 1 ][1] = (j + 1) * n;
faces[j * 2 * n + n - 1 ][2] = j * n;
faces[2 * n * (j + 1) - 1][0] = (j + 1) * n - 1;
faces[2 * n * (j + 1) - 1][1] = j * n + n;
faces[2 * n * (j + 1) - 1][2] = (j + 2) * n - 1;
}
for (var i = 0; i < n - 1; i++) {
faces[n * (n - 4) + i] = [];
faces[n * (n - 3) + i] = [];
faces[n * (n - 4) + i][0] = (n / 2 - 1) * n;
faces[n * (n - 4) + i][1] = i;
faces[n * (n - 4) + i][2] = i + 1;
faces[n * (n - 3) + i][0] = (n / 2 - 1) * n + 1;
faces[n * (n - 3) + i][1] = (n / 2 - 2) * n + i + 1;
faces[n * (n - 3) + i][2] = (n / 2 - 2) * n + i;
}
faces[n * (n - 3) - 1] = [];
faces[n * (n - 2) - 1] = [];
faces[n * (n - 3) - 1][0] = (n / 2 - 1) * n;
faces[n * (n - 3) - 1][1] = n - 1;
faces[n * (n - 3) - 1][2] = 0;
faces[n * (n - 2) - 1][0] = (n / 2 - 1) * n + 1;
faces[n * (n - 2) - 1][1] = (n / 2 - 2) * n;
faces[n * (n - 2) - 1][2] = (n / 2 - 2) * n + n - 1;
this.faces=faces;
prepareObject(this);
}
main.js
// inner variables
var canvas, ctx;
var vAlpha = 0.5;
var vShiftX = vShiftY = 0;
var distance = -700;
var vMouseSens = 0.05;
var iHalfX, iHalfY;
// initialization
function sceneInit() {
// prepare canvas and context objects
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
iHalfX = canvas.width / 2;
iHalfY = canvas.height / 2;
// initial scale and translate
scaleObj([3, 3, 3], obj);
translateObj([-obj.center[0], -obj.center[1], -obj.center[2]],obj);
translateObj([0, 0, -1000], obj);
// attach event handlers
document.onkeydown = handleKeydown;
canvas.onmousemove = handleMousemove;
// main scene loop
setInterval(drawScene, 25);
}
// onKeyDown event handler
function handleKeydown(e) {
kCode = ((e.which) || (e.keyCode));
switch (kCode) {
case 38: vAlpha = (vAlpha <= 0.9) ? (vAlpha + 0.1) : vAlpha; break; // Up key
case 40: vAlpha = (vAlpha >= 0.2) ? (vAlpha - 0.1) : vAlpha; break; // Down key
}
}
// onMouseMove event handler
function handleMousemove(e) {
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
if ((x > 0) && (x < canvas.width) && (y > 0) && (y < canvas.height)) {
vShiftY = vMouseSens * (x - iHalfX) / iHalfX;
vShiftX = vMouseSens * (y - iHalfY) / iHalfY;
}
}
// draw main scene function
function drawScene() {
// clear canvas
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// set fill color, stroke color, line width and global alpha
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.lineWidth = 0.5;
ctx.globalAlpha= vAlpha;
// vertical and horizontal rotate
var vP1x = getRotationPar([0, 0, -1000], [1, 0, 0], vShiftX);
var vP2x = getRotationPar([0, 0, 0], [1, 0, 0], vShiftX);
var vP1y = getRotationPar([0, 0, -1000], [0, 1, 0], vShiftY);
var vP2y = getRotationPar([0, 0, 0], [0, 1, 0], vShiftY);
rotateObj(vP1x, vP2x, obj);
rotateObj(vP1y, vP2y, obj);
// recalculate distances
for (var i = 0; i < obj.points_number; i++) {
obj.distances[i] = Math.pow(obj.points[i][0],2) + Math.pow(obj.points[i][1],2) + Math.pow(obj.points[i][2], 2);
}
// prepare array with face triangles (with calculation of max distance for every face)
var iCnt = 0;
var aFaceTriangles = new Array();
for (var i = 0; i < obj.faces_number; i++) {
var max = obj.distances[obj.faces[i][0]];
for (var f = 1; f < obj.faces[i].length; f++) {
if (obj.distances[obj.faces[i][f]] > max)
max = obj.distances[obj.faces[i][f]];
}
aFaceTriangles[iCnt++] = {faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max};
}
aFaceTriangles.sort(sortByDistance);
// prepare array with projected points
var aPrjPoints = new Array();
for (var i = 0; i < obj.points.length; i++) {
aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY);
}
// draw an object (surfaces)
for (var i = 0; i < iCnt; i++) {
ctx.fillStyle = aFaceTriangles[i].faceColor;
// begin path
ctx.beginPath();
// face vertex index
var iFaceVertex = aFaceTriangles[i].faceVertex;
// move to initial position
ctx.moveTo(aPrjPoints[iFaceVertex[0]][0], aPrjPoints[iFaceVertex[0]][1]);
// and draw three lines (to build a triangle)
for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) {
ctx.lineTo(aPrjPoints[iFaceVertex[z]][0], aPrjPoints[iFaceVertex[z]][1]);
}
// close path, strole and fill a triangle
ctx.closePath();
ctx.stroke();
ctx.fill();
}
}
// sort function
function sortByDistance(x, y) {
return (y.distance - x.distance);
}
// initialization
if (window.attachEvent) {
window.attachEvent('onload', sceneInit);
} else {
if (window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
sceneInit();
};
window.onload = newonload;
} else {
window.onload = sceneInit;
}
}
查看演示：http://www.script-tutorials.com/demos/319/index.html
相关文章
如何将 HTML5 性能发挥到极致由于实际运行环境是在浏览器中，因此性能还取决于JavaScript解释器的效率，指定的FPS帧速在低性能解释器中可能不会
HTML5 VideoAPI，打造自己的Web视频播放器本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器，需要用到HTML5提供的video标签、以及HTML5提供的对JavascriptAP
HTML5 手势检测原理和实现随着 Hybrid 应用的丰富，HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端，他们觊觎移动原生应用人性化的- 4分钟学会网页样式[译]你想要在自己网站上分享一个产品，或者是一个作品集，又或者仅仅只是一个灵感。在你发布到网上之前，你想让它
巧用HTML5给按钮背景设计不同的动画简单实例下面小编就为大家带来一篇巧用HTML5给按钮背景设计不同的动画简单实例。小编觉得挺不错的，现在就分享给大家，也
使用Html5实现异步上传文件,支持跨域,带有上传进度条下面小编就为大家带来一篇使用Html5实现异步上传文件,支持跨域,带有上传进度条。小编觉得挺不错的，现在就分享给
有关HTML5页面在iPhoneX适配问题这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下
html5中canvas图表实现柱状图的示例本篇文章主要介绍了html5中canvas图表实现柱状图的示例，本文使用canvas来实现一个图表，小编觉得挺不错的，现在分享给大家