2. 程式人生 > >基於WebGL（ThingJS）的家具城 商場 3D展示 3D可視化 DEMO

基於WebGL（ThingJS）的家具城 商場 3D展示 3D可視化 DEMO

阿新 • • 發佈：2018-12-28
ott 移除 設計 ane 餐廳 控件 wal ont 技術分享

本文將模擬一個家具城，讓大家足不出戶在家裏就能更加直觀立體的挑選家具。

技術分享圖片

技術分享圖片

第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真。使用CampusBuilde創建層級，之後再給層級加外立面就出現了當前的效果。這次我們其實只是需要一個樓層，所以我們就把上次使用的過的場景拿來改造一下。詳情移步：CampusBuilder3D場景制作工具
點擊查看demo

技術分享圖片

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

　　第二步，開啟層級切換。因為我們模擬的“宜家”是某建築中的一層，所以這裏要開啟層級切換以便進入家具城。

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

　　同時給家具城創建一個廣告牌，防止我們在第一人稱下行走會“迷路”。貼圖可以自行上傳。

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

　　這裏給我們給整個場景用抽象物體圍起來了，以免第一人稱控件開啟時會造成無碰撞體系墜落出場景。記得要給他們組合並命名為‘碰撞盒’，在場景加載完成後將他們“隱藏”起來。

技術分享圖片

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

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

先創建兩個按鈕來控制第一人稱控件。

	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] //把整個場景都添加,可把樓層或其他需要檢測的添加進入碰撞體系裏 | 默認值 園區地板
        })
    );
}

　　移除第一人稱控件

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

　　第四步，創建界面panel用於顯示家居的詳細信息。
添加界面

	var panel = null;
function add_panel(title, total, goodsInfo) {
    panel = new THING.widget.Panel({
        titleText: ‘商品名稱：‘ + title,
        closeIcon: true, // 是否有關閉按鈕 
        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(‘總價‘);
    var goodsInfo = panel.addString(dataObj, ‘goodsInfo‘).caption(‘商品介紹‘);

}

　　

移除界面

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

　　

最後一步，為商品和大樓添加點擊事件。這裏我們也要卸載雙擊事件，因為鼠標雙擊時會聚焦當前物體，與我們的業務邏輯有沖突所以這裏給他卸載掉。首先是普通的點擊事件，鼠標左鍵點擊時會出現商品的信息。右鍵點擊時，會移除第一人稱控件。

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

　　代碼塊 => 層級 => 觸發 => 修改進入層級操作

技術分享圖片

這裏我們將進入層級的操作改為直接進入我們的家具城這一層“新樓層”。

//修改singleClick點擊之後進入級的操作
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("我已經進來了" + app.level.current.name);
            }
        });
    }
    return;
}, ‘customLevelEnterMethod‘);

　　小結：
第一人稱控件的問題，Campus => 新樓層 ，如果不設置攝像機飛到一合理位置，攝像機將脫離樓層，因為進入樓層的時候攝像機的默認位置不在樓層上，所以每次在樓層內添加第一人稱控件時我們必須要將攝像機放到一個合理的位置。

全部代碼：

//加載場景代碼
var app = new THING.App({
    // 場景地址
    "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/家具城",
    //背景設置
    "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點擊之後進入級的操作
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("我已經進來了" + app.level.current.name);
            }
        });
    }
    return;
}, ‘customLevelEnterMethod‘);

//鼠標點擊事件
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(‘自然風格餐桌系列‘, "2598.00", "　　簡約的圓桌設計，微冷的現代居室圍成一桌大自然的感覺。自然本色，簡介的設計，彰顯質樸、實用、少即是多的線代生活哲學。");
            break;
        case "桌椅組合2": add_panel(‘線代都市餐桌系列‘, "2198.00", "　　利落線條，刻畫幾何形底座。自然致簡的淺木色橡木拼花，帶有淡淡的手工白蠟處理，搭配內斂的深灰色線條，形成微妙平衡，線代感呼之欲出。");
            break;
        case "桌椅組合3": add_panel(‘緊湊家庭餐桌系列‘, "1998.00", "　　緊湊家庭餐廳，享四人圍坐的寬適與愜意。精巧的尺寸，圓融包容的圓桌設計，即便是緊湊的客餐廳一體空間，也能歡暢小談。");
            break;
        case "沙發組合1": add_panel(‘本色筆記組合沙發‘, "2598.00", "　　簡約的圓桌設計，微冷的現代居室圍成一桌大自然的感覺。自然本色，簡介的設計，彰顯質樸、實用、少即是多的線代生活哲學。");
            break;
        case "沙發組合2": add_panel(‘雲海闌珊組合沙發‘, "8888.00", "　　全家人圍坐的恬淡時刻，更多一份舒適。借一抹海天的藍，再偷來雲朵的舒軟，只為全家圍坐的時刻，盡享舒適怡然。");
            break;
        case "沙發組合3": add_panel(‘商務舒適組合沙發‘, "8598.00", "　　簡約的圓桌設計，微冷的現代居室圍成一桌大自然的感覺。自然本色，簡介的設計，彰顯質樸、實用、少即是多的線代生活哲學。");
            break;
        case "沙發組合4": add_panel(‘自然風格餐桌系列‘, "5508.00", "　　簡約的圓桌設計，微冷的現代居室圍成一桌大自然的感覺。自然本色，簡介的設計，彰顯質樸、實用、少即是多的線代生活哲學。");
            break;
        case "沙發組合5": add_panel(‘自然風格餐桌系列‘, "2578.00", "　　簡約的圓桌設計，微冷的現代居室圍成一桌大自然的感覺。自然本色，簡介的設計，彰顯質樸、實用、少即是多的線代生活哲學。");
            break;
    }
});
//卸載雙擊事件
app.off(‘dblclick‘);

// 界面組件 
var panel = null;
function add_panel(title, total, goodsInfo) {
    panel = new THING.widget.Panel({
        titleText: ‘商品名稱：‘ + title,
        closeIcon: true, // 是否有關閉按鈕 
        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(‘總價‘);
    var goodsInfo = panel.addString(dataObj, ‘goodsInfo‘).caption(‘商品介紹‘);

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

//創建廣告牌
var advertisingSign = app.create({
    type: ‘Box‘,
    width: 15.0, // 寬度 
    height: 5.0, // 高度 
    depth: 0.5, // 深度 
    widthSegments: 1.0, //寬度上的節數 
    heightSegments: 1.0, // 高度上的節數 
    depthSegments: 1.0, // 深度上的節數 
    center: ‘Bottom‘, // 中心點 
    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] //把整個場景都添加,可把樓層或其他需要檢測的添加進入碰撞體系裏 | 默認值 園區地板
        })
    );
}
function remove_control() {
    if (!ctrl)
        return;
    app.removeControl(ctrl);
    ctrl = null;
}

　　

基於WebGL（ThingJS）的家具城 商場 3D展示 3D可視化 DEMO

相關推薦

基於WebGL（ThingJS）的家具城 商場 3D展示 3D可視化 DEMO

ott 移除 設計 ane 餐廳 控件 wal ont 技術分享 本文將模擬一個家具城，讓大家足不出戶在家裏就能更加直觀立體的挑選家具。 第一步，利用CampusBuilder搭建模擬場景。CampusBuilder的模型庫有各種各樣的模型，使我們搭建出的場景更逼真

基於WebGL（ThingJS）的平面圖導航,室內導航,3D聚焦 （二）

title init aps 能夠 繼承 posit children inverse total 前言 基於WebGL架構的3D可視化平臺—平面圖導航（一）中已經完成了iframe面板與我們的3D場景的簡單交互，下面我們繼續完善並給iframe頁加上鼠標懸停事件讓ifra

Spring Data Redis入門示例:基於RedisTemplate （三）

gem per 例子 基於 接口 image 安全 redist 工作 使用底層API：RedisConnection操作Redis，需要對數據進行手動轉換(String <---->byte)，需要進行多數重復性工作，效率低下；org.springframew

逛蠡口家具城，買金絲柚木家具必備鑒別小妙招！裝成高逼格的HOME

shadow ffffff com size 家裏 耐心 風格 ima 紅木 一磚一瓦盡顯清雅，最美不過金絲柚木家具。從門廳開始，一花一草一木一山水，無不是，一方安靜，一片祥和。金絲柚木在理論上講是屬於和紅木一樣十分名貴的硬木種類，但因為咱們中國不產金絲柚木，所以對金絲柚木

『計算機視覺』SSD源碼學習_基於TensorFlow（待續）

ID 使用 結構 odi AS pap pts blank sets 原項目地址：SSD-Tensorflow 根據README的介紹，該項目收到了tf-slim項目中包含了多種經典網絡結構（分類用）的啟發，使用了模塊化的編程思想，可以替換檢查網絡的結構，其模塊組織如下：

基於目錄（dir）的 KVM 存儲池

span tro bar sta ash img 通過 -s 3-9 一、通過 virt-manager 創建1. 準備工作[root@k-node2 ~]# mkdir /guest_images [root@k-node2 ~]# chown root.root /gu

【GCN】圖卷積網路初探——基於圖（Graph）的傅立葉變換和卷積

本文為從CNN到GCN的聯絡與區別——GCN從入門到精（fang）通（qi）的閱讀筆記，文中絕大部分公式和圖片摘自原文。 文章目錄 一、CNN（卷積神經網路）中的離散卷積 二、GCN基本概念介紹 （一）圖Grap

Top-N Recommendation 基於電影（Item）的推薦

轉：https://blog.csdn.net/woshimalingyi/article/details/50801682 注:  1. 資料集來源MovieLens  2. 原始碼在末尾附上 一、Introduction 無論是在實體商店還是在網路上，都會有Top-N

構建虛擬Web主機 —— 基於域名（主機）

目的和準備 構建2個虛擬Web站點： 網站：www.yeslab.com，IP地址為 192.168.2.77 網站：www.ren.com，IP地址為 192.168.2.77 確認安裝httpd軟體 關閉防火牆和沙盒 步驟 1.編輯httpd主配置檔案

MongoDB基於Morphia （二）demo 包含聚合彙總 多條件查詢

MongoDB基礎語句 注：新增欄位 也是用其中的set 但是確保實體類中有新增的屬性（使用morphia） 例如：： books是表名 “book_serial_num” : “B1013687616857538560” 為篩選條件 mongo中語句 新

基於CI（codeigniter）的通用許可權管理系統（擁有完整RBAC許可權模型，php開發）

大概利用一個月時間吧，把RBAC許可權模型熟悉了一遍，開發了一套通用系統，主要模組包括以下：1、機構管理：可多級新增、刪除等2、使用者管理：可批量新增、刪除等3、模組管理：配置功能目錄樹形顯示4、角色管

基於Sentinel（哨兵）搭建實現Redis高可用叢集

概述 Redis哨兵為Redis提供了高可用性。實際上這意味著你可以使用哨兵模式建立一個可以不用人為干預而應對各種故障的Redis部署。 哨兵模式還提供了其他的附加功能，如監控，通知，為客戶端提供配置。 下面是在巨集觀層面上哨兵模式的功能列表： 監控：哨兵不斷的檢查mast

基於哨兵（Sentinel）模式搭建Redis叢集搭建

這篇文章主要是想把自己搭建Redis哨兵模式叢集的過程記下來，方便後面搭建的重複性工作。 首先一點，學習任何知識都要學會看官網，所以，可以參考官網進行配置。我為了省事兒，參照了公司的規範來搭建的。官網地址：https://redis.io/ 有個官方下載地址，可以直接下載各

樂視雲基於Kubernetes（k8s）的PaaS平臺建設_Kubernetes中文社群

本次分享主要介紹樂視雲兩代PaaS平臺的變遷過程，著重介紹第二代PaaS平臺LeEngine的架構設計和遇到的問題。 背景 2014年樂視雲開始嘗試Docker的推廣和使用，我們的團隊開始開發第一代容器雲平臺Harbor （分享網址：http://dockone.io/article/1091

基於Kubernetes（k8s）的RabbitMQ 叢集_Kubernetes中文社群

目前，有很多種基於Kubernetes搭建RabbitMQ叢集的解決方案。今天筆者今天將要討論我們在Fuel CCP專案當中所採用的方式。這種方式加以轉變也適用於搭建RabbitMQ叢集的一般方法。所以如果你想要設計自己的解決方案，你應該收集一些更符合你定製化需求的文章。 命名你的叢集 在Ku

唯品會基於Kubernetes（k8s）網路方案演進_Kubernetes中文社群

VIP PaaS在接近兩年時間裡，基於kubernetes主要經歷四次網路方案的變遷： 1. kubernetes + flannel 2. 基於Docker libnetwork的網路定製 3. kubernetes + contiv + kube-haproxy 4. 應用容器IP固定 先

基於WinForms（C#）的使用者登入介面（VisualStudio2013）

1.介面設計 其中包含驗證碼、找回密碼、註冊賬號、登陸系統等基本功能 使用者登陸介面程式碼如下： using System; using System.Collections.Generic; using System.ComponentModel; using Syst

使用poi實現Excel匯入功能，資料庫基於oracle（下）

上次我們說了匯入的service以及controller，jsp的一些程式碼的實現，這回趁著有時間，把最後的匯入Util類實現給大家。 1、util類：ReadExcel.java public class ReadExcel { //總行

基於RIP（OSPF）協議的ACL應用

實驗拓撲圖：注意事項1。實驗時，應該先看到所有路由條目都能學習到，之後再執行ACL做過濾2。實驗最終結果在R2上不能看到192.168.3.0的路由資訊。3。從全域性模式退回到特權模式，不顯示提示資訊   R4(config)#no logging console配置過程R1

驗證碼識別處理--基於java（二）

先給出要處理的驗證碼地址(地址後面為隨機數字，便於生成不同的驗證碼)http://vote.sun0769.com/include/ ... 1025&rid=866359 (圖示應該為bmp的，因為論壇限制，給存為jpg格式上傳了)看到此驗證碼，開始想到的步驟就