基于WEBGL架構(gòu)的3D可視化平臺(tái)—家居城3D展示

libin19890520 發(fā)布于2019-08-23 14:22 / 3540人閱讀

摘要：本文將模擬一個(gè)歐派，讓大家足不出戶在家里就能更加直觀立體的挑選家具。創(chuàng)建廣告牌寬度高度深度寬度上的節(jié)數(shù)高度上的節(jié)數(shù)深度上的節(jié)數(shù)中心點(diǎn)家具展銷歐派這里給我們給整個(gè)場(chǎng)景用抽象物體圍起來了，以免第一人稱控件開啟時(shí)會(huì)造成無碰撞體系墜落出場(chǎng)景。

本文將模擬一個(gè)“歐派”，讓大家足不出戶在家里就能更加直觀立體的挑選家具。

第一步，利用CampusBuilder搭建模擬場(chǎng)景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場(chǎng)景更逼真。使用CampusBuilde創(chuàng)建層級(jí)，之后再給層級(jí)加外立面就出現(xiàn)了當(dāng)前的效果。這次我們其實(shí)只是需要一個(gè)樓層，所以我們就把上次使用的過的場(chǎng)景拿來改造一下。詳情移步：CampusBuilder3D場(chǎng)景制作工具

演示地址：EXAMPLE

/加載場(chǎng)景代碼
var app = new THING.App({
    // 場(chǎng)景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/家具城",
    //背景設(shè)置
    "skyBox": "BlueSky"
});

第二步，開啟層級(jí)切換。因?yàn)槲覀兡M的“宜家”是某建筑中的一層，所以這里要開啟層級(jí)切換以便進(jìn)入家具城。

app.on("load", function (ev) {
    //開啟層級(jí)切換
    app.level.change(ev.campus);
});

同時(shí)給家具城創(chuàng)建一個(gè)廣告牌，防止我們?cè)诘谝蝗朔Q下行走會(huì)“迷路”。貼圖可以自行上傳。

//創(chuàng)建廣告牌
var advertisingSign = app.create({
    type: "Box",
    width: 15.0, // 寬度 
    height: 5.0, // 高度 
    depth: 0.5, // 深度 
    widthSegments: 1.0, //寬度上的節(jié)數(shù) 
    heightSegments: 1.0, // 高度上的節(jié)數(shù) 
    depthSegments: 1.0, // 深度上的節(jié)數(shù) 
    center: "Bottom", // 中心點(diǎn) 
    style: {
        color: "#ffffff",
        opacity: 2,
        image: "/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/家具展銷/歐派.jpg"
    },
    parent: app.query("building_01")[0],
});
advertisingSign.position = [50.957, 15.883, -16];

這里給我們給整個(gè)場(chǎng)景用抽象物體圍起來了，以免第一人稱控件開啟時(shí)會(huì)造成無碰撞體系墜落出場(chǎng)景。記得要給他們組合并命名為‘碰撞盒’，在場(chǎng)景加載完成后將他們“隱藏”起來。

app.on("load", function (ev) {
    //開啟層級(jí)切換
    app.level.change(ev.campus);
    //將碰撞盒的透明度設(shè)置為0，并且將他們的pickable屬性設(shè)置為false，不可被選中。
    var crashBox = app.query("碰撞盒")[0];
    crashBox.style.opacity = 0;
    crashBox.pickable = false;
});

第三步，添加第一人稱控件。

先創(chuàng)建兩個(gè)按鈕來控制第一人稱控件。

new THING.widget.Button("第一人稱", add_control);
    new THING.widget.Button("自由視角", remove_control);

添加第一人稱控件

//第一人稱組件
var ctrl = null;
function add_control() {
    if (app.level.current.name == "Campus") {
        app.camera.position = [75.28812158204005, 1.8016147124541857, 29.699063489018236];
        app.camera.target = [53.32909358623788, 4.541642332131091, -9.470748625431646];

    }
    if (app.level.current.name != "Campus") {
        app.level.change(app.query("新樓層")[0]);
        app.camera.flyTo({
            "position": [41.05650213795261, 1.3469938677565356, -18.6143831867287],
            "target": [38.982251559488404, 0.7081383467333933, -23.867802267306008],
            "time": 2000,
            "complete": function () {
            }
        });
    }
    if (ctrl) return;
    ctrl = app.addControl(
        new THING.WalkControl({
            walkSpeed: 0.02,
            turnSpeed: 0.25,
            gravity: 30,
            eyeHeight: 1.7,
            jumpSpeed: 0,
            enableKeyRotate: false,
            useCollision: true,//app.scene
            useGravity: true,
            groundObjects: [app.scene] //把整個(gè)場(chǎng)景都添加,可把樓層或其他需要檢測(cè)的添加進(jìn)入碰撞體系里 | 默認(rèn)值 園區(qū)地板
        })
    );
}

移除第一人稱控件

function remove_control() {
    if (!ctrl)
        return;
    app.removeControl(ctrl);
    ctrl = null;
}

第四步，創(chuàng)建界面panel用于顯示家居的詳細(xì)信息。

添加界面

var panel = null;
function add_panel(title, total, goodsInfo) {
    panel = new THING.widget.Panel({
        titleText: "商品名稱：" + title,
        closeIcon: true, // 是否有關(guān)閉按鈕 
        dragable: false, // 是否可以拖拽 
        retractable: true,
        opacity: 0.9, // 透明度 
        hasTitle: true
    });
    panel.position = [1000, 0];
    var dataObj = {
        total: total,
        goodsInfo: goodsInfo
    };
    var total = panel.addString(dataObj, "total").caption("總價(jià)");
    var goodsInfo = panel.addString(dataObj, "goodsInfo").caption("商品介紹");

}

移除界面

    function remove_panel() {
    if (panel) {
        panel.destroy();
        panel = null;
    }
}

最后一步，為商品和大樓添加點(diǎn)擊事件。這里我們也要卸載雙擊事件，因?yàn)槭髽?biāo)雙擊時(shí)會(huì)聚焦當(dāng)前物體，與我們的業(yè)務(wù)邏輯有沖突所以這里給他卸載掉。首先是普通的點(diǎn)擊事件，鼠標(biāo)左鍵點(diǎn)擊時(shí)會(huì)出現(xiàn)商品的信息。右鍵點(diǎn)擊時(shí)，會(huì)移除第一人稱控件。

    //鼠標(biāo)點(diǎn)擊事件
app.on("click", function (ev) {
    if (ev.button == 2) {
        remove_control();
        return;
    }
    remove_panel();
    switch (ev.object.name) {
        case "桌椅組合1": add_panel("自然風(fēng)格餐桌系列", "2598.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "桌椅組合2": add_panel("線代都市餐桌系列", "2198.00", "　　利落線條，刻畫幾何形底座。自然致簡的淺木色橡木拼花，帶有淡淡的手工白蠟處理，搭配內(nèi)斂的深灰色線條，形成微妙平衡，線代感呼之欲出。");
            break;
        case "桌椅組合3": add_panel("緊湊家庭餐桌系列", "1998.00", "　　緊湊家庭餐廳，享四人圍坐的寬適與愜意。精巧的尺寸，圓融包容的圓桌設(shè)計(jì)，即便是緊湊的客餐廳一體空間，也能歡暢小談。");
            break;
        case "沙發(fā)組合1": add_panel("本色筆記組合沙發(fā)", "2598.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "沙發(fā)組合2": add_panel("云海闌珊組合沙發(fā)", "8888.00", "　　全家人圍坐的恬淡時(shí)刻，更多一份舒適。借一抹海天的藍(lán)，再偷來云朵的舒軟，只為全家圍坐的時(shí)刻，盡享舒適怡然。");
            break;
        case "沙發(fā)組合3": add_panel("商務(wù)舒適組合沙發(fā)", "8598.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "沙發(fā)組合4": add_panel("自然風(fēng)格餐桌系列", "5508.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "沙發(fā)組合5": add_panel("自然風(fēng)格餐桌系列", "2578.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
    }
});
app.off("dblclick");

代碼塊 => 層級(jí) => 觸發(fā) => 修改進(jìn)入層級(jí)操作

這里我們將進(jìn)入層級(jí)的操作改為直接進(jìn)入我們的家具城這一層“新樓層”。

//修改singleClick點(diǎn)擊之后進(jìn)入級(jí)的操作
app.on(THING.EventType.SingleClick, function (ev) {
    var object = ev.object;
    if (object.name == "building_01") {
        app.level.change(app.query("新樓層")[0]);
        app.camera.flyTo({
            "position": [41.05650213795261, 1.3469938677565356, -18.6143831867287],
            "target": [38.982251559488404, 0.7081383467333933, -23.867802267306008],
            "time": 2000,
            complete: function () {
                console.log("我已經(jīng)進(jìn)來了" + app.level.current.name);
            }
        });
    }
    return;
}, "customLevelEnterMethod");

小結(jié)：

第一人稱控件的問題，Campus => 新樓層，如果不設(shè)置攝像機(jī)飛到一合理位置，攝像機(jī)將脫離樓層，因?yàn)檫M(jìn)入樓層的時(shí)候攝像機(jī)的默認(rèn)位置不在樓層上，所以每次在樓層內(nèi)添加第一人稱控件時(shí)我們必須要將攝像機(jī)放到一個(gè)合理的位置。

全部代碼

//加載場(chǎng)景代碼
var app = new THING.App({
    // 場(chǎng)景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/家具城",
    //背景設(shè)置
    "skyBox": "BlueSky"
});

app.on("load", function (ev) {
    app.level.change(ev.campus);
    var crashBox = app.query("碰撞盒")[0];
    crashBox.style.opacity = 0;
    crashBox.pickable = false;
    new THING.widget.Button("第一人稱", add_control);
    new THING.widget.Button("自由視角", remove_control);

});

//修改singleClick點(diǎn)擊之后進(jìn)入級(jí)的操作
app.on(THING.EventType.SingleClick, function (ev) {
    var object = ev.object;
    if (object.name == "building_01") {
        app.level.change(app.query("新樓層")[0]);
        app.camera.flyTo({
            "position": [41.05650213795261, 1.3469938677565356, -18.6143831867287],
            "target": [38.982251559488404, 0.7081383467333933, -23.867802267306008],
            "time": 2000,
            complete: function () {
                console.log("我已經(jīng)進(jìn)來了" + app.level.current.name);
            }
        });
    }
    return;
}, "customLevelEnterMethod");

//鼠標(biāo)點(diǎn)擊事件
app.on("click", function (ev) {
    if (ev.button == 2) {
        remove_control();
    }
    if (typeof (ev.object) == undefined)
        return;
    remove_panel();
    switch (ev.object.name) {
        case "桌椅組合1": add_panel("自然風(fēng)格餐桌系列", "2598.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "桌椅組合2": add_panel("線代都市餐桌系列", "2198.00", "　　利落線條，刻畫幾何形底座。自然致簡的淺木色橡木拼花，帶有淡淡的手工白蠟處理，搭配內(nèi)斂的深灰色線條，形成微妙平衡，線代感呼之欲出。");
            break;
        case "桌椅組合3": add_panel("緊湊家庭餐桌系列", "1998.00", "　　緊湊家庭餐廳，享四人圍坐的寬適與愜意。精巧的尺寸，圓融包容的圓桌設(shè)計(jì)，即便是緊湊的客餐廳一體空間，也能歡暢小談。");
            break;
        case "沙發(fā)組合1": add_panel("本色筆記組合沙發(fā)", "2598.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "沙發(fā)組合2": add_panel("云海闌珊組合沙發(fā)", "8888.00", "　　全家人圍坐的恬淡時(shí)刻，更多一份舒適。借一抹海天的藍(lán)，再偷來云朵的舒軟，只為全家圍坐的時(shí)刻，盡享舒適怡然。");
            break;
        case "沙發(fā)組合3": add_panel("商務(wù)舒適組合沙發(fā)", "8598.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "沙發(fā)組合4": add_panel("自然風(fēng)格餐桌系列", "5508.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
        case "沙發(fā)組合5": add_panel("自然風(fēng)格餐桌系列", "2578.00", "　　簡約的圓桌設(shè)計(jì)，微冷的現(xiàn)代居室圍成一桌大自然的感覺。自然本色，簡介的設(shè)計(jì)，彰顯質(zhì)樸、實(shí)用、少即是多的線代生活哲學(xué)。");
            break;
    }
});
//卸載雙擊事件
app.off("dblclick");

// 界面組件 
var panel = null;
function add_panel(title, total, goodsInfo) {
    panel = new THING.widget.Panel({
        titleText: "商品名稱：" + title,
        closeIcon: true, // 是否有關(guān)閉按鈕 
        dragable: false, // 是否可以拖拽 
        retractable: true,
        opacity: 0.9, // 透明度 
        hasTitle: true
    });
    panel.position = [1000, 0];
    var dataObj = {
        total: total,
        goodsInfo: goodsInfo
    };
    var total = panel.addString(dataObj, "total").caption("總價(jià)");
    var goodsInfo = panel.addString(dataObj, "goodsInfo").caption("商品介紹");

}
function remove_panel() {
    if (panel) {
        panel.destroy();
        panel = null;
    }
}

//創(chuàng)建廣告牌
var advertisingSign = app.create({
    type: "Box",
    width: 15.0, // 寬度 
    height: 5.0, // 高度 
    depth: 0.5, // 深度 
    widthSegments: 1.0, //寬度上的節(jié)數(shù) 
    heightSegments: 1.0, // 高度上的節(jié)數(shù) 
    depthSegments: 1.0, // 深度上的節(jié)數(shù) 
    center: "Bottom", // 中心點(diǎn) 
    style: {
        color: "#ffffff",
        opacity: 2,
        image: "/uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/file/家具展銷/歐派.jpg"
    },
    parent: app.query("building_01")[0],
});
advertisingSign.position = [50.957, 15.883, -16];

//第一人稱組件
var ctrl = null;
function add_control() {
    if (app.level.current.name == "Campus") {
        app.camera.position = [75.28812158204005, 1.8016147124541857, 29.699063489018236];
        app.camera.target = [53.32909358623788, 4.541642332131091, -9.470748625431646];

    }
    if (app.level.current.name != "Campus") {
        app.level.change(app.query("新樓層")[0]);
        app.camera.flyTo({
            "position": [41.05650213795261, 1.3469938677565356, -18.6143831867287],
            "target": [38.982251559488404, 0.7081383467333933, -23.867802267306008],
            "time": 2000,
            "complete": function () {
            }
        });
    }
    if (ctrl) return;
    ctrl = app.addControl(
        new THING.WalkControl({
            walkSpeed: 0.02,
            turnSpeed: 0.25,
            gravity: 30,
            eyeHeight: 1.7,
            jumpSpeed: 0,
            enableKeyRotate: false,
            useCollision: true,//app.scene
            useGravity: true,
            groundObjects: [app.scene] //把整個(gè)場(chǎng)景都添加,可把樓層或其他需要檢測(cè)的添加進(jìn)入碰撞體系里 | 默認(rèn)值 園區(qū)地板
        })
    );
}
function remove_control() {
    if (!ctrl)
        return;
    app.removeControl(ctrl);
    ctrl = null;
}

云服務(wù)器 GPU云服務(wù)器 3d可視化 3d數(shù)據(jù)可視化微軟的3D python的3d庫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100512.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

libin19890520

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow.python.framework.ops.tensor

閱讀 2938·2023-04-25 19:08
Android 00后應(yīng)屆生進(jìn)阿里薪資：猛補(bǔ)了這個(gè)，真香...

閱讀 1426·2021-11-16 11:45
曲鳥全棧UI自動(dòng)化教學(xué)(四)：Selenium工作原理及Webdriver對(duì)瀏覽器的配置和操作

閱讀 1988·2021-10-13 09:40
LE Audio 藍(lán)牙協(xié)議規(guī)范(2)--物理信道及PDU

閱讀 4153·2021-09-30 09:47
前端這幾個(gè)webApi你都知道嗎

閱讀 2425·2019-08-30 15:44
border、outline、boxshadow那些事以及如何做內(nèi)凹圓

閱讀 2295·2019-08-30 13:03
Boostrap Tutorial

閱讀 1399·2019-08-30 12:56
React源碼解析之RootFiber

閱讀 1899·2019-08-26 14:04

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于WEBGL架構(gòu)的3D可視化平臺(tái)—家居城3D展示

相關(guān)文章

IOTE 2019國際物聯(lián)網(wǎng)博覽會(huì)—優(yōu)锘科技受邀參展，ThingJS提供最佳產(chǎn)品體驗(yàn)

從“智能”樓宇到“智慧”樓宇—ThingJS助力“智慧”升級(jí)

**ThingJS物聯(lián)網(wǎng)3D可視化平臺(tái)——智慧城市的應(yīng)用**

數(shù)字孿生——思考IoT未來，UINO2019展會(huì)邀您蒞臨！

發(fā)表評(píng)論

0條評(píng)論

libin19890520

男|高級(jí)講師

TA的文章

tensorflow.python.framework.ops.tensor

Android 00后應(yīng)屆生進(jìn)阿里薪資：猛補(bǔ)了這個(gè)，真香...

曲鳥全棧UI自動(dòng)化教學(xué)(四)：Selenium工作原理及Webdriver對(duì)瀏覽器的配置和操作

LE Audio 藍(lán)牙協(xié)議規(guī)范(2)--物理信道及PDU

前端這幾個(gè)webApi你都知道嗎

border、outline、boxshadow那些事以及如何做內(nèi)凹圓

Boostrap Tutorial

React源碼解析之RootFiber

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

基于WEBGL架構(gòu)的3D可視化平臺(tái)—家居城3D展示

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！