地下的管线错综复杂如何,图纸并不能完全满足实际需求,我们就用ThingJS平台来模拟一个小区水,电,天然气管线演示。
第一步,利用CampusBuilder搭建模拟场景。CampusBuilder的模型库有各种各样的模型,使我们搭建出的场景更逼真。使用CampusBuilde创建层级,之后再给层级加外立面就出现了当前的效果。详情移步:CampusBuilder3D场景制作工具
演示地址:http://www.thingjs.com/guide/sampleindex.html?name=/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/水电燃气管线演示.js?n=0.968666194169896
//加载场景代码
var app = new THING.App({
// 场景地址
"url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/管线演示2",
//背景设置
"skyBox": "BlueSky"
});
第二步, 初始化摄像机位置,添加四个按钮,并创建四个方法。
app.on('load', function () {
//摄像机位置初始化
app.camera.position = [0.4374202706634094, 101.92917348318593, 97.06808820543526];
app.camera.target = [52.75056074670042, -18.885239034825123, -20.619558480451797];
new THING.widget.Button('水管演示', water);
new THING.widget.Button('电线演示', electric);
new THING.widget.Button('燃气演示', gas);
});
function water() {
}
function electric() {
}
function gas() {
}
第三步,创建管线,我们这里写水管线以后的电线,燃气管线同理。这里简单说一下PolygonLine,它继承THING.LineBase,同样有贴图属性,可以自己从本地上传图片至页面资源后使用。
var line = null;
function buildLine(points, color) {
line = app.create({
type: 'PolygonLine',
points: points,
style: {
color: color,
}
});
line.scrollUV = true;
}
function water() {
var waterUnderPoints = [];
buildingOpacity(0.3);
app.query(/building_0/).forEach(
function (parentObj) {
var points = [];
points.push(parentObj.selfToWorld([5, -0.8, 0]));
waterUnderPoints.push(points[0]);
for (var i = 3; i <= 24; i += 3) {
points.push(parentObj.selfToWorld([5, i, 0]));
points.push(parentObj.selfToWorld([5, i, 3]));
points.push(parentObj.selfToWorld([-5, i, 3]));
points.push(parentObj.selfToWorld([-5, i, -3]));
points.push(parentObj.selfToWorld([5, i, -3]));
points.push(pa