知識回顧：
Node#getHost()和Node#setHost(node)獲取和設(shè)置吸附的圖元對象
Node#getAttaches()返回目前吸附到該圖元的所有對象义黎，返回ht.List鏈表對象族檬，無吸附對象時返回空
Node#isHostOn(node)判斷該圖元是否吸附到指定圖元對象上
Node#isLoopedHostOn(node)判斷該圖元是否與指定圖元相互形成環(huán)狀吸附聚至，例如A吸附B，B吸附C戴已，C又吸附回A固该，則A，B和C圖元相互環(huán)狀吸附
參看代碼解釋:
效果圖：
Paste_Image.png
var createInsideWall = function(dataModel) {
ht.Default.setImage('door', 'images/door_left.png');
ht.Default.setImage('ldoor', 'images/ldoor.jpg');
ht.Default.setImage('rdoor', 'images/rdoor.jpg');
ht.Default.setImage('winImage', 'images/chuang.jpg');
ht.Default.setImage('ceramic_tile', 'images/ceramic_tile.png');
// wall.setPoints({})里面的左邊點要按順序繪制
//在2d平面圖上糖儡，正方向是向右伐坏、向下
//setPoints結(jié)合setTall方法類似于s3的作用
//內(nèi)墻相關(guān)參數(shù)
var wall = new ht.CSGShape();
//參數(shù)對應(yīng)關(guān)系x：width、y：height;
var x1=-2000,x2=2000,x3=2000,x4=-2000,y1=-1500,y2=-1500,y3=1500,y4=1500;
wall.setPoints([{
x: x1,
y: y1
}, {
x: x2,
y: y2
}, {
x: x3,
y: y3
}, {
x: x4,
y: y4
}]);
wall.setPosition(0,-1500);
wall.setTall(500); //設(shè)置墻體高度
wall.setElevation(wall.getTall() / 2); //把墻體往地板上部上移tall的一半高度
wall.setClosePath(true);
wall.setThickness(50);
wall.s({
'shape.border.width': 20,
'shape.border.color': '#898989',
'all.color':'white',
'back.image': 'ceramic_tile',
'back.uv.scale': [1, 10],
'repeat.uv.length': 80,//改變圖片重復(fù)問題握联，同樣可以解決機器區(qū)域的圖片問題--重復(fù)貼墻紙
'front.color': 'lightgray',
'csg.color': '#DDDDDD'
});
dataModel.add(wall);
/**************************挖空一半正前方的墻體***************************/
var frontWall = new ht.CSGNode();
frontWall.setHost(wall);
frontWall.setParent(wall);
frontWall.setWidth(4000);
frontWall.setHeight(40);
frontWall.setTall(wall.getTall()/2);
frontWall.setElevation(wall.getTall()*0.75);
frontWall.s({
'attach.index':2,
'attach.offset.relative':true,
'attach.offset':0.5,
'all.visible':false
});
dataModel.add(frontWall);
/*
* 因為ht.CSGNode繼承于ht.Node,
* 因為ht.DoorWindow繼承于ht.CSGNode,
* 所以ht.DoorWindow具有前兩者的所有屬性方法桦沉，包括挖空墻的方法，
* 所以在創(chuàng)建窗戶時拴疤，不需要再進行挖空的操作永部。
*
* */
// //挖空門
// var HollowDoor = new ht.CSGNode();
// HollowDoor.setHost(wall);
// HollowDoor.setParent(wall);
// HollowDoor.setWidth(240);
// HollowDoor.setHeight(30);
// HollowDoor.setTall(200);
//// HollowDoor.s3(240,200,30)
// HollowDoor.setElevation(70);
// HollowDoor.s({
// 'attach.index': 2,
// 'attach.offset.relative': true,
// 'attach.offset': 0.864,
// 'all.visible': false
// });
// dataModel.add(HollowDoor);
var door_left = new ht.DoorWindow();
door_left.setHost(wall);
// doorleft.setParent(wall);
door_left.setWidth(120);
door_left.setTall(200);
door_left.setElevation(door_left.getTall() / 2+10);
door_left.s({
'attach.index': 2,//根據(jù)setPoints的左邊點的順序來確定index的值
'attach.offset.relative': true,
'attach.offset': 0.864,//根據(jù)繪制的順序，距離上一個點的距離（0~1）
'front.image': 'ldoor',
'back.image': 'ldoor',
'all.color': 'white',
// 'all.blend': '#A95A10',
'front.uv': [1, 0, 1, 1, 0, 1, 0, 0],
'back.transparent': true,
'dw.axis': 'right',
'dw.s3': [1, 1, 0.1]
})
dataModel.add(door_left);
var door_right = new ht.DoorWindow();
door_right.setHost(wall);
// doorleft.setParent(wall);
door_right.setWidth(120);
door_right.setTall(200);
door_right.setElevation(door_right.getTall()/2+10);
door_right.s({
'attach.index': 2,
'attach.offset.relative': true,//相對定位
'attach.offset': 0.81,
'front.image': 'rdoor',
'back.image': 'rdoor',
'all.color': 'white',
'front.uv': [0,1, 0,0, 1,0, 1,1],
'back.uv': [1,0, 1,1, 0,1, 0,0],
'dw.axis': 'right',//右手邊打開門
'dw.s3': [1, 1, 0.1]//窗戶的透明度的參數(shù)
})
dataModel.add(door_right);
/***************************************創(chuàng)建窗戶和窗臺相關(guān)操作*********************/
//挖空窗
for(i=0;i<3;i++){
var offset=0.17, offsetX=0.32;
offset+=offsetX*i;
createWindowOnWall(offset);
}
function createWindowOnWall(offset){
var windowH=400;
var windowW=600;
var insideWindow =new ht.CSGNode();
insideWindow.setHost(wall);
insideWindow.setParent(wall);
insideWindow.setWidth(windowW);
insideWindow.setHeight(30);
insideWindow.setTall(windowH);
insideWindow.setElevation(insideWindow.getTall()/2+25);
insideWindow.s({
'attach.index':0,
'attach.offset.relative':true,
'attach.offset':offset,
'all.visible':false
})
dataModel.add(insideWindow);
//創(chuàng)建窗臺
var table =new ht.Node();
noteStyle = {
'note': '英雄聯(lián)盟',
'note.position': 17,
'note.offset.x': 0,
'note.offset.y': 0
};
table.setHost(wall);
table.setParent(wall);
table.s3(windowW,10,40);
table.setElevation(20);
table.s(noteStyle);
table.s({
'attach.index':0,
'attach.offset.relative':true,
'attach.offset':offset,
'all.color':'white',
'attach.gap': -20//z軸偏移
})
dataModel.add(table);
//創(chuàng)建玻璃
var windowInside =new ht.Node();
windowInside.setHost(wall);
windowInside.setParent(wall);
// windowInside.setImage('winImage');//注意區(qū)分setImage方法與all.image之間的區(qū)別
windowInside.setWidth(windowW);
windowInside.setHeight(15);
windowInside.setTall(windowH);
windowInside.open = false;
//旋轉(zhuǎn)角度
windowInside.angle = Math.PI / 4;
windowInside.window = true; //旋轉(zhuǎn)方向
windowInside.setElevation(windowInside.getTall()/2+25);
windowInside.s({
'attach.index': 0,
'attach.offset.relative': true,//相對定位
'attach.offset':offset,
'front.image':'winImage',
'back.image':'winImage',
'dw.s3': [1, 1, 0.1],//窗戶的透明度的參數(shù)
})
dataModel.add(windowInside);
}
/************************************************************/
//************************創(chuàng)建柱子*************************
for(i=0;i<4;i++){
var pillarX=-1925,pillar=1280,pillarZ=-2970;
pillarX+=pillar*i;
createPillar(pillarX,250,pillarZ);
}
function createPillar(x,y,z){
var node=new ht.Node();
node.setHost(wall);
node.setParent(wall);
node.p3(x,y,z);
node.s3(150,495,100);
node.s({
'all.color':'white'
});
dataModel.add(node);
}
/****************************************************************************/
/*****************************創(chuàng)建左右兩側(cè)的大門**********************/
var index_l=3,index_r=1;
for(i=0;i<2;i++){
if(i==0){
createBigGate(index_r);
}
if(i==1){
createBigGate(index_l);
}
}
function createBigGate(index){
var bigGate1 =new ht.DoorWindow();
bigGate1.setHost(wall);
bigGate1.setParent(wall);
bigGate1.setWidth(300);
bigGate1.setHeight(30);
bigGate1.setTall(380);
bigGate1.setToolTip('Double click to open the window');
bigGate1.setElevation(bigGate1.getTall()/2+15);
bigGate1.s({
'attach.index': index,
'attach.offset.relative': true,//相對定位
'attach.offset': 0.2,
'front.image': 'ldoor',
'back.image': 'ldoor',
'all.color': 'white',
'front.uv': [0,1, 0,0, 1,0, 1,1],
'back.uv': [1,0, 1,1, 0,1, 0,0],
'dw.axis': 'left',
'dw.s3': [1, 1, 0.1]//窗戶的透明度的參數(shù)
});
dataModel.add(bigGate1);
var bigGate2 =new ht.DoorWindow();
bigGate2.setHost(wall);
bigGate2.setParent(wall);
bigGate2.setWidth(300);
bigGate2.setHeight(30);
bigGate2.setTall(380);
bigGate2.setElevation(bigGate2.getTall()/2+15);
bigGate2.s({
'attach.index': index,
'attach.offset.relative': true,
'attach.offset': 0.3,
'front.image': 'rdoor',
'back.image': 'rdoor',
'all.color': 'white',
'front.uv': [0,1, 0,0, 1,0, 1,1],
'back.uv': [1,0, 1,1, 0,1, 0,0],
'dw.axis': 'right',
'dw.s3': [1, 1, 0.1]
});
dataModel.add(bigGate2);
var bigGate3 =new ht.DoorWindow();
bigGate3.setHost(wall);
bigGate3.setParent(wall);
bigGate3.setWidth(300);
bigGate3.setHeight(30);
bigGate3.setTall(380);
bigGate3.setElevation(bigGate3.getTall()/2+15);
bigGate3.s({
'attach.index': index,
'attach.offset.relative': true,//相對定位
'attach.offset': 0.7,
'front.image': 'ldoor',
'back.image': 'ldoor',
'all.color': 'white',
'front.uv': [0,1, 0,0, 1,0, 1,1],
'back.uv': [1,0, 1,1, 0,1, 0,0],
'dw.axis': 'left',
'dw.s3': [1, 1, 0.1]//窗戶的透明度的參數(shù)
});
dataModel.add(bigGate3);
var bigGate4 =new ht.DoorWindow();
bigGate4.setHost(wall);
bigGate4.setParent(wall);
bigGate4.setWidth(300);
bigGate4.setHeight(30);
bigGate4.setTall(380);
bigGate4.setElevation(bigGate4.getTall()/2+15);
bigGate4.s({
'attach.index': index,
'attach.offset.relative': true,
'attach.offset': 0.8,
'front.image': 'rdoor',
'back.image': 'rdoor',
'all.color': 'white',
// 'all.blend': '#A95A10',
'front.uv': [0,1, 0,0, 1,0, 1,1],
'back.uv': [1,0, 1,1, 0,1, 0,0],
// 'back.transparent': true,
// 'front.transparent': true,
// 'all.reverse.cull': true,
'dw.axis': 'right',
'dw.s3': [1, 1, 0.1]
});
dataModel.add(bigGate4);
}
}
把host作為參數(shù)傳遞的使用案例;
host = createNode([0, 51, 0], [100, 100, 100]).s({
'label': 'Cube',
'label.visible': false,
'all.image': 'dice',
'front.uv': [0.25, 0.75, 0.25, 1, 0.5, 1, 0.5, 0.75],
'back.uv': [0.25, 0.25, 0.25, 0.5, 0.5, 0.5, 0.5, 0.25],
'bottom.uv': [0.25, 0, 0.25, 0.25, 0.5, 0.25, 0.5, 0],
'left.uv': [0, 0.75, 0, 1, 0.25, 1, 0.25, 0.75],
'right.uv': [0.5, 0.75, 0.5, 1, 0.75, 1, 0.75, 0.75],
'front.opacity': 0.5,
'front.transparent': true,
'front.blend': 'red',
'top.visible': false,
'all.reverse.flip': true,
'note': 'A good example about customizing uv',
'note.face': 'right',
'note.autorotate': true,
'note2': 'A fixed note',
'note2.face': 'front',
'note2.position': 6,
'icons': {
ICONS1: {
names: ['node_icon', 'group_icon', 'subGraph_icon', 'grid_icon', 'shape_icon', 'edge_icon'],
position: 5
},
ICONS2: {
names: ['earth', 'colors', 'fab', 'dice'],
position: 26,
width: 30,
height: 30,
gap: 5,
direction: 'north',
face: 'left',
r3: [Math.PI/2, Math.PI/2, 0],
rotationMode: 'yxz',
t3: [-15, 15, 0]
}
}
});
createNode([0, 51, -50], [50, 50, 50], host).s({
'shape3d': 'sphere',
'shape3d.image': 'earth',
'body.color': 'red',
'label': 'Sphere',
'label.background': 'yellow',
'label2': 'Sphere',
'label2.background': 'blue',
'label2.position': 3,
'label2.face': 'back'
});
function createNode(p3, s3, host){
var node = new ht.Node();
node.p3(p3);
node.s3(s3);
node.setHost(host);
dataModel.add(node);
return node;
}
