構成ソリッドジオメトリには多くの実用的な用途があります。これは、単純なジオメトリオブジェクトが必要な場合、または数学的精度が重要な場合に使用されます。ほとんどすべてのエンジニアリングCADソフトウェアパッケージはCSGを使用します。一緒に合う機能）。CSGは、Constructive Solid Geometryモデリングテクノロジーの略語です。これは、カットカット、ユニオンの融合、交差操作による複雑なモデル効果を組み合わせたものです。HTは、ht.CSGNodeやht.CSGShapeなどのプリミティブ型をカプセル化して、CSGの組み合わせ機能をサポートします。壁のドアや窓の穴や穴をくり抜くアプリケーションシナリオで一般的に使用されます。
CSGオブジェクトはバイナリツリーで表すことができます。リーフはプリミティブを表し、ノードは操作を表します。このグラフでは、ノードはintersection交差、,ユニオン、および-差としてマークされています。CSGによって提供されるモデルまたはサーフェスは非常に複雑に見えますが、実際には、オブジェクトの巧妙な組み合わせまたは分解にすぎません。
ht.CSGNodeはht.Nodeを継承します。スタイルのshape3d属性が空の場合、六面体効果として表示されます。setHostを介してCSGNodeがホストCSGNodeまたはCSGShapeに吸着されている場合、吸着されたCSGNodeプリミティブとホストCSGNodeまたはCSGShapeを組み合わせてCSGを構築できます。死ぬ。詳細については、HT for Web Modeling ManualのCSGNodeの章を参照してください。ここでは、CSGの概念を使用して例を書きました。これにより、誰もが概念をよりよく理解できるようになります。
この例のデモアドレス： hightopo.com/guide/guide ...
最初にレンダリングを確認します。
上記のレンダリングからわかるように、インターフェースを3つの部分に分割します。3つの部分は上下に分割され、次にインターフェース全体が左右に分割されます。HTはカプセル化されたht.widget.SplitViewを使用してインターフェースを分割し、次に分割コンポーネントを下部のdivに追加します。
dm = new ht.DataModel();// 数据模型
treeView = new ht.widget.TreeView(dm); //树组件
gv1 = new ht.graph3d.Graph3dView(dm); //3D 组件
gv2 = new ht.graph3d.Graph3dView(dm);
splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件
mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);
view = mainSplit.getView();
view.className = 'main';
document.body.appendChild(view);
window.addEventListener('resize', function (e) {
mainSplit.invalidate();
}, false); 上記のコードは、HTMLにHTコンポーネントを追加するための非常に一般的な方法です。詳細については、HT for Web Getting Startedのコンポーネントのセクションを参照してください。HTコンポーネントを追加するこの方法には注意すべき点が1つあります。HTは通常、位置を絶対絶対位置に設定し、左、右、上、下などの基本的なCSSスタイルを次のように設定する必要があるためです。
.main {
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}したがって、ウィンドウを満たすための最も外側のコンポーネントのロードを容易にするために、HTのすべてのコンポーネントにはaddToDOM関数があり、そのロジックは次のとおりです。ここで、ivはinvalidateの省略形です。
addToDOM = function(){
var self = this,
view = self.getView(),
style = view.style;
document.body.appendChild(view);
style.left = '0';
style.right = '0';
style.top = '0';
style.bottom = '0';
window.addEventListener('resize', function () { self.iv(); }, false);
}将来的には、大量のコードを記述することなく、コード内でaddToDOM関数を直接呼び出すことができます。上記のコードでは、次のコードの代わりにaddToDOMを使用しているため、CSSスタイルを表す必要はありません。
dm = new ht.DataModel();// 数据模型
treeView = new ht.widget.TreeView(dm); //树组件
gv1 = new ht.graph3d.Graph3dView(dm); //3D 组件
gv2 = new ht.graph3d.Graph3dView(dm);
splitView = new ht.widget.SplitView(gv1, gv2, 'v', 0.6);//分割组件
mainSplit = new ht.widget.SplitView(treeView, splitView, 'h', 0.27);
mainSplit.addToDOM();インターフェイスが割り当てられたら、コンテンツを追加します。インターフェイスの左側はHTでカプセル化されたツリーコンポーネントです。前の記事で書いたように、ツリーコンポーネントはツリー関係を描画するのに非常に便利なコンポーネントです。開発者はデータモデルDataModelからデータとノードの関係を簡単に取得し、ツリーに配置します。対応するデータモデルDataModelをツリーコンポーネントのパラメーターに挿入する必要があるのは、ツリーコンポーネントの宣言時だけです。もちろん、ツリーコンポーネントに関連する多くの関数は非常に便利で実用的です。ここでは、すべてのオブジェクトを展開するために、expandAll関数のみを使用しています。
treeView = new ht.widget.TreeView(dm); //树组件
treeView.expandAll();右側の部分は上下に2つに分かれており、すべて3Dシーンです。つまり、設定は少し異なって表示され、その他はまったく同じです。上記の3DシーンはgetVisibleFunc関数をオーバーロードします。要素のshowMe属性がtrueの場合、ノードはhtです。 CSGNodeタイプとノードのgetHost関数のパラメーターは空であり、表示されません。他の条件はすべて表示されます。
gv1.setVisibleFunc(function(data){
if(data.showMe){
return true;
}
if(data instanceof ht.CSGNode && data.getHost()){
return false;
}
return true;
});最初に3Dシーンに要素オブジェクトを追加し、最初に本棚を説明し、次に両側の本棚を補足します。まず、本棚のメインノードとしてht.CSGNodeノードシェルフを追加し、他のノードをこのノードに接続し、このノードの6つの面の場所、サイズ、名前、色を設定してから、データモデルに追加しますDataModel：
var shelf = new ht.CSGNode();
shelf.s3(500, 400, 120);
shelf.p3(0, 200, 0);
shelf.setName('shelf1');
shelf.s({
'all.color': '#E5BB77'
});
dm.add(shelf);次に、シェルフに10個のノードを追加して本棚のグリッド効果を作成し、依存関係と親子関係を設定してデータモデルに追加します。
for(var i=0; i<2; i++){
for(var j=0; j<5; j++){
var clipNode = new ht.CSGNode();
clipNode.setHost(shelf);
clipNode.s3(80, 100, 120);
clipNode.p3(-200+j*100, 340-i*120, 20);
clipNode.setName('substract-'+i+'-'+j);
clipNode.s('batch', 'tt');
clipNode.setParent(shelf);
dm.add(clipNode);
}
}本棚をより美しくするために、本棚の上下左右にht.CSGNodeを追加しました。最後に、より具体的にするために、本も追加しました。実装方法も同様で、非常に簡単です。
var book = new ht.Node();
book.setName('CSS3: The Missing Manual');
book.s3(60, 80, 8);
book.p3(-100, 210, 20);
book.r3(-Math.PI/6, Math.PI/5, 0);
book.setIcon('book');
book.s({
'front.image': 'book',
'back.color': 'white',
'left.color': 'white',
'all.color': 'gray'
});
book.setHost(shelf);
book.setParent(shelf);
dm.add(book); 次に、左側の本棚も同様の作成方法です。1つの違いは、ht.CSGNodeから継承されたht.CSGBoxタイプがあることです。親CSGNodeをくり抜く機能に加えて、6つの面に面することもできます。回転、拡張、閉じる操作を実行するために、ここでのノードは、回転と拡張が可能な以前のものだけを設定し、一連のスタイルを設定します。
clipNode = new ht.CSGBox();
clipNode.setName('CSGBox-Expand-Left');
clipNode.s3(100, 100, 120);
clipNode.p3(0, 65, 0.1);
clipNode.setHost(shelf);
clipNode.showMe = true;
clipNode.s({
'all.visible': false,//6面均不可见
'front.visible': true,//前面可见
'front.toggleable': true,//允许前面双击展开
'front.reverse.flip': true,//前面的反面显示正面的内容
'front.transparent': true,//前面透明
'front.end': Math.PI * 0.7,//前面展开状态的结束旋转弧度
'front.color': 'rgba(0, 50, 50, 0.7)'//前面颜色
});多分あなたはまだ下の地球がどのように行われるのか知りたいですか？以前の記事では、shape3dプロパティがHTで設定されたことを思い出してください。このプロパティを設定すると、実際にはsetShape3dModel（名前、モデル）とgetShape3dModel（名前）が動作します。これらは、このプロパティを介してボックス|球|円柱|円錐|トーラスに設定できます| star | rect | roundRect | triangle | rightTriangle | parallelogram |台形およびその他のモデル、これらのモデルもHTパッケージ化されており、この例のように、shape3dを使用する場合は、いずれかの値に直接shape3dを設定する必要があります。 ：sphere "は球に設定されます。この球の外側で地図画像をラップするだけです。もちろん、この地図画像は最初にht.Default.setImageを通じて登録され、次に画像がshape3d.imageを通じてこのノードにアタッチされます。
earth = new ht.Node();
earth.setName('earth');
earth.s3(70, 70, 70);
earth.p3(0, 50, 0);
earth.s({
'shape3d': 'sphere',
'shape3d.image': 'earth'
});
earth.setHost(shelf);
earth.setParent(shelf);
dm.add(earth);右側の本棚にもマスターノードがあり、他のノードが接続されていますが、ここでは新しいノードタイプht.DoorWindowが置き換えられています。Ht.DoorWindowは、ht.CSGNodeを継承していますが、くり抜きやその他の機能に加えて、全体的な回転の拡大や閉鎖の操作も実行できます。ドアや窓のビジネスオブジェクトとしてよく使用され、壁のグラフィック要素としてCSGNodeまたはCSGShapeのホストに吸着されます。このノードタイプはht.CSGNodeの拡張です。相対的に言えば、実際のアプリケーションを区別し、さまざまなスタイルパラメータを追加します。その他の属性については、HT for Web Modeling ManualのDoorWindowセクションを確認し、ノードに追加して再生してください。
photos = new ht.DoorWindow();
photos.setName('DoorWindow-Photos');
photos.setIcon('ben12');
photos.s3(110, 100, 130);
photos.p3(5, 180, 0);
photos.setHost(shelf);
photos.showMe = true;
photos.s({
'bottom.uv': [1,1, 1,0, 0,0, 0,1],
'bottom.uv.scale': [1, 1],
'left.uv.scale': [3, 3],
'top.uv.scale': [2, 2],
'dw.s3': [0.8, 0.9, 0.05],
'dw.t3': [0, -5, 0],
'dw.axis': 'v',
'dw.toggleable': false,
'front.image': 'ben1',
'back.image': 'ben2',
'all.color': '#F8CE8B'
});
photos.setParent(shelf);
dm.add(photos);最後に、左の地球と右の写真の写真を回転させます。
var angle = 0;
setInterval(function(){
angle += Math.PI/40;
earth.r3(0, angle, 0);
photos.s('dw.angle', angle);
}, 50);実際、HTは多くの異なるCSGノードタイプをカプセル化しますが、実際のアプリケーションは類似しており、内容は特に異なりません。違いはスタイルパラメータですが、実際の開発では、この違いは結局のところ、名前が一目でわかり、使用したいスタイル属性がわかります。
