ホームページ > 記事 > ウェブフロントエンド > HTML5 WebGL テクノロジーに基づいて 3D シーンを構築するためのグラフィックおよびテキスト コードの詳細な紹介 (1)
HTML5 WebGL テクノロジーに基づいて 3D シーンを構築するためのグラフィックおよびテキスト コードの詳細な紹介 (1)
- 黄舟オリジナル
- 2018-05-21 11:36:295596ブラウズ
今日私が皆さんと共有するのは、3D シリーズの 3D 事前定義モデルです。
HT for Web は、ユーザーがモデリングに使用できるさまざまな基本タイプを提供します。従来の 3D モデリング手法とは異なり、HT のコア モデリングは、HT の事前定義されたプリミティブ タイプとパラメータ インターフェイスを介して設定された API インターフェイス メソッドに基づいています。 3次元モデルの構築を実現します。次に、事前定義された 3D モデルとパラメータ設定について説明します。
HT 定義済みの 3D モデルは次のとおりです: box、sphere、cone、torus、cylinder、star、rect、roundRect、triangle、tightTriangle、Parallel、trapezoid では、これら 12 種類を設定するにはどうすればよいでしょうか?
ネットワーク トポロジ マップ GraphView の 2D グラフィックスでは、さまざまなグラフィックスの表現は、スタイルの Shape 属性によって決まります。HT は、さまざまな 3D 形状を 3D で事前定義するために、shape3d 属性を提供します。 shape3d属性のデフォルト値は未定義で、プリミティブはshape3dに値を指定すると、shape3dで指定された形状で表示されます。一つずつ。
1. ボックス: 立方体、デフォルトの六面体とは異なり、立方体タイプの 6 つの面は同じ色とテクスチャのみを持つことができ、描画パフォーマンスはデフォルトの六面体よりも高くなります。上の図に示すように、左側は Shape3d がボックスに設定されており、右側はデフォルトの六面体です。どちらのノードも上面にテクスチャが設定されています。この効果では、shape3d がボックスに設定されているノードは、表面のテクスチャ設定を直接無視します。これは、ボックス タイプの 6 つの面の色とテクスチャが同じであることを確認します。 .image とshape3d.color の具体的な設定コードは次のとおりです:
2. 球体: 球体は、shape3d.side.from と Shape3d.side を組み合わせることで複数の部分に分割できます。上図のようにボールの一部が切り取られており、2つの切断面を独立して制御することができます。パラメータのセット、shape3d.from.* とshape3d.to.* を使用すると、両側の表示効果を個別に制御できます。上の図では、shape3d.to.visible によって to サーフェスを非表示にし、新しいテクスチャを設定します。 Shape3d.from.image による from サーフェスの具体的なコードは次のとおりです:node = new ht.Node();
node.s3(80, 80, 80);
node.s({
'shape3d': 'box',
'shape3d.image': 'img11',
'shape3d.top.image': 'img10'});
dm.add(node);
node = new ht.Node();
node.s3(80, 80, 80);
node.p3(100, 0, 0);
node.s({
'all.image': 'img11',
'top.image': 'img10'});
dm.add(node);
3. cone: cone、shape3d.side を使用して三角錐、四角錐、その他の形状を形成できます
上の写真からわかるように、側面の値が大きいほど、円錐体は滑らかになり、円錐と比較できます。設定方法のコードを見てみましょう:
node.s({
'shape3d': 'sphere',
'shape3d.image': 'img11',
'shape3d.side': 100,
'shape3d.side.from': 0,
'shape3d.side.to': 65,
'shape3d.from.image': 'img10',
'shape3d.to.visible': false}); もちろん、円錐を球と同じにすることもできます。shape3d.side.from パラメータとshape3d.side.to パラメータを設定できます。トリミングを制御するには、shape3d を使用することもできます。 .from.* およびshape3d.to.* パラメータは、2 つのサーフェスのパフォーマンスを制御するために使用されます。shape3d.bottom.* スタイルは、円錐のパフォーマンスを制御するためにも使用できます。床。 
ちなみに、上記のコードでは、note.autorotate スタイルがノートの方向を制御するために使用されていることがわかります。これが true に設定されている場合、ノートは常に向きを変えます。シーンがどのように回転されるかに関係なく、目の方向。
4. トーラス:shape3d.side を通じて複数の部分に分割できるトーラス。shape3d.side.from とshape3d.side.to を組み合わせると、半円のリングなどを形成できます。
上の写真からわかるように、リングは実際には円錐と同じです。また、辺の数を設定して三角形のリングや四角形のリングなどを形成することもできます。ある一定の面数に達すると、面が増えるほどリングは滑らかになります。 在上图中可以看到 note 中多加了一个 radius 值的打印，这个值对应的是样式中的 shape3d.torus.radius，那么这个值的作用是什么呢，我想从上图也可以看得出来，radius 值是用来控制圆环的半径，但是为什么 radius 为 0.25 的时候圆环中间就被填上了，没有像其他的圆环中间都漏空呢？我们可以这样理解，一个圆环的切面有两个圆环直径，那就有四个圆环半径，那按百分比去计算的话，一个半径就是占整个图元宽的 1/4，也就是 0.25，所以这个 shape3d.torus.radius 样式的取值范围为 0~0.25。 5. cylinder：圆柱，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 圆柱的参数除了 shape3d.top.* 之外，其他的都和前面提到的圆锥的参数一样，因为圆柱体其实就是比圆锥体多了一个面。 到这里所有的可裁切的基本模型都介绍完了，下面要介绍的几个基本模型就没有 side 的相关属性了，也就意味着，它们将没有 from 和 to 的相关参数，没有裁切的功能。 如果想让不能裁切的基本图元达到裁切的效果，还是有其他方案和方法的，这些，我们就在后续的章节中介绍，还望耐心等待。 6. star：星形体，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 7. rect：矩形体，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 8. roundRect：圆矩形体，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 9. triangle：三角形体，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 10. rightTriangle：直角三角形体，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 11. parallelogram：平行四边形体，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 12. trapezoid：梯形体，可通过 shape3d.top.* 和 shape3d.bottom.* 可控制顶面和底面的参数 上图就是几个还未介绍的基本模型。 仔细观察上图，你会发现，从左算起，第二个和第四个好像在前面的例子中有见过。没错，在形状上是一样的，但是在表现上却是有些差异，到底存在什么差异呢，我们通过图来瞧瞧。 左边是基本模型 rect 和 triangle，右边是通过基本模型 cylinder 模拟出来的 rect 和 triangle，四个图元设置的大小都是一样的，边长都是 80，可以发现基本模型 rect 和 triangle 在表现上会比通过 cylinder 模拟出来的 rect 和 triangle 来的大些，原因很简单，通过 cylinder 模拟出来的 rect 和 triangle 因为其本质还是圆柱体，side 参数是是让图形能够更接近圆形而已，所以绘制出来的图形将会是在一个圆柱体内，也就是 rect 基本模型上表面的内切圆范围内，也就是说通过 cylinder 模拟出来的 rect 上表面的对角线才是图元的变成 80。 以下是相关代码，大家可以尝试下，通过不同角度的观察，可能会更好理解一些。
[3, 4, 5, 6, 10, 20, 40, 80, 100].forEach(function(side, index) {
var x = ((index / 3) >> 0) * 100 - 100,
y = index % 3 * 100 - 100;
radius = (Math.random() * 0.25).toFixed(2);
node = new ht.Node();
node.p3(x, 40, y);
node.s3(80, 80, 80);
node.s({
'shape3d': 'torus',
'shape3d.image': 'img11',
'shape3d.side': side,
'shape3d.torus.radius': radius,
'note': 'side: ' + side + ', radius: ' + radius,
'note.autorotate': true,
'note.position': 17,
'note.face': 'top',
'note.background': '#979EAF'
});
dm.add(node);
});
[3, 4, 5, 6, 10, 20, 40, 80, 100].forEach(function(side, index) {
var x = ((index / 3) >> 0) * 100 - 100,
y = index % 3 * 100 - 100;
node = new ht.Node();
node.p3(x, 40, y);
node.s3(80, 80, 80);
node.s({
'shape3d': 'cylinder',
'shape3d.image': 'img11',
'shape3d.side': side,
'note': 'side: ' + side,
'note.autorotate': true,
'note.position': 17,
'note.face': 'top',
'note.background': '#979EAF'
});
dm.add(node);
});
[ 'star', 'rect', 'roundRect', 'triangle',
'rightTriangle', 'parallelogram', 'trapezoid'].forEach(function(shape, index) {
var x = index * 100 - 300;
node = new ht.Node();
node.p3(x, 40, 0);
node.s3(80, 80, 80);
node.s({
'shape3d': shape,
'shape3d.image': 'img11'
});
dm.add(node);
});
node = new ht.Node();
node.s3(80, 80, 80);
node.p3(-50, 40, 50);
node.s({
'shape3d':
'cylinder',
'shape3d.side': 4,
'shape3d.image': 'img11'});
dm.add(node);
node = new ht.Node();
node.s3(80, 80, 80);
node.p3(50, 40, 50);
node.s({
'shape3d':
'cylinder',
'shape3d.side': 3,
'shape3d.image': 'img11'});
dm.add(node);
node = new ht.Node();
node.s3(80, 80, 80);
node.p3(-50, 40, -50);
node.s({
'shape3d': 'rect',
'shape3d.image': 'img11'});
dm.add(node);
node = new ht.Node();
node.s3(80, 80, 80);
node.p3(50, 40, -50);
node.s({
'shape3d': 'triangle',
'shape3d.image': 'img11'});
dm.add(node);
以上がHTML5 WebGL テクノロジーに基づいて 3D シーンを構築するためのグラフィックおよびテキスト コードの詳細な紹介 (1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。