用HTML5画一个3D的三角形网格

May 17, 2016 am 09:08 AM
ht

本教程的主题是利用HTML5技术在2D和3D图形之间搭一座互通的桥梁(通过WebGL方式)。今天我将展示如何使用一个多边形网格绘制一个三维对象。 一个多边形网格或非结构化网格是一个集合的顶点,边缘和面孔,在3 d电脑图像和实体建模定义了一个多面体的对象的形状。通常由三角形的面孔,四边形或其他简单凸多边形,因为这样可以简化渲染,但也可能是由更一般的凹多边 形,或多边形的洞。

为了演示,我们准备了简单的三维物体——一个多维数据集和多维领域

HTML CODE

通常我们会在canvas里做一个简单的标记






Triangle mesh for 3D objects in HTML5 | Script Tutorials







<script><br> //var obj = new cube();<br> //var obj = new sphere(6);<br> var obj = new sphere(16);<br> </script>





Please use Up / Down keys to change opacity





我提取一个生成的对象初始化来:

<script><br> //var obj = new cube();<br> //var obj = new sphere(6);<br> var obj = new sphere(16);<br></script>

这意味着如果我们需要显示一个多维数据集——你必须取消第一个一行,如果你想显示一个球体与6张面孔——选择第二个变体。


JS CODE

JS的代码分为三部分:主体的代码,网格代码和转换代码

meshes.js

// get random color
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; 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.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.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.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 for (var i = 0; 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 for (var i = 0; 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 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 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 0) && (y 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.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 var max = obj.distances[obj.faces[i][0]];
for (var f = 1; 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 aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY);
}

// draw an object (surfaces)
for (var i = 0; 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 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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML5 Webサイトにオーディオを追加する方法は? HTML5 Webサイトにオーディオを追加する方法は? Mar 10, 2025 pm 03:01 PM

HTML5 Webサイトにオーディオを追加する方法は?

HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか? HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか? Mar 13, 2025 pm 07:51 PM

HTML5ページの可視性APIを使用して、ページが表示されたときに検出するにはどうすればよいですか?

ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか? ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか? Mar 13, 2025 pm 08:00 PM

ViewPortメタタグを使用して、モバイルデバイスのページスケーリングを制御するにはどうすればよいですか?

ユーザー入力にHTML5フォームを使用する方法は? ユーザー入力にHTML5フォームを使用する方法は? Mar 10, 2025 pm 02:59 PM

ユーザー入力にHTML5フォームを使用する方法は?

HTML5通知APIを使用してデスクトップ通知を表示するにはどうすればよいですか? HTML5通知APIを使用してデスクトップ通知を表示するにはどうすればよいですか? Mar 13, 2025 pm 07:57 PM

HTML5通知APIを使用してデスクトップ通知を表示するにはどうすればよいですか?

Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか? Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか? Mar 18, 2025 pm 02:16 PM

Geolocation APIでユーザーの場所のプライバシーと許可を処理するにはどうすればよいですか?

インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか? インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか? Mar 18, 2025 pm 02:17 PM

インタラクティブなユーザーインターフェイスにHTML5ドラッグアンドドロップAPIを使用するにはどうすればよいですか?

クライアントとサーバー間の双方向通信にHTML5 WebSockets APIを使用するにはどうすればよいですか? クライアントとサーバー間の双方向通信にHTML5 WebSockets APIを使用するにはどうすればよいですか? Mar 12, 2025 pm 03:20 PM

クライアントとサーバー間の双方向通信にHTML5 WebSockets APIを使用するにはどうすればよいですか?

See all articles