目錄

前言：

?一、騰訊云 Cloud Studio介紹：

1、接近本地 IDE 的開發(fā)體驗(yàn)

2、多環(huán)境可選，或連接到云主機(jī)

3、隨時(shí)分享預(yù)覽效果

4、兼容 VSCode 插件

?5、 AI代碼助手

二、騰訊云Cloud Studio項(xiàng)目實(shí)踐（3D家具個(gè)性化定制應(yīng)用）

1、注冊(cè)并登錄 Cloud Studio

2、進(jìn)入Vue預(yù)置開發(fā)環(huán)境

2.1 登錄成功進(jìn)入 Cloud Studio 主頁(yè)面

?2.2、點(diǎn)擊 Vue.js 模板卡片，即可快速的自動(dòng)生成一個(gè)vue3.0項(xiàng)目

?2.3 等待不到 30s 左右（與帶寬網(wǎng)速差異有區(qū)別），開發(fā)環(huán)境就初始化配好了

?2.4? Cloud Studio 幫助我們初始化好開發(fā) Vue 環(huán)境，并且默認(rèn)有一個(gè)小 Demo

2.5 到這一步，基礎(chǔ)的vue項(xiàng)目已經(jīng)搭建完畢

3、項(xiàng)目開發(fā)

3.1?項(xiàng)目功能點(diǎn)簡(jiǎn)介

3.2?安裝依賴

3.3 三維場(chǎng)景創(chuàng)建

3.4 加載模型

3.5?設(shè)置光影效果

3.6 添加地板

3.7 取得沙發(fā)模型零部件

3.8 給模型替換材質(zhì)或切換顏色

3.9、生成色卡菜單

3.10?視角切換動(dòng)畫

3.11 增加模型加載loading效果

3.12 保存代碼后就可以在內(nèi)置的瀏覽器中看到實(shí)時(shí)修改后的效果：

?4、初始化倉(cāng)庫(kù)

4.1左邊功能菜單區(qū)找到“源代碼管理”。

4.2將輸入需要提交的message信息，再點(diǎn)擊"Commit"進(jìn)行倉(cāng)庫(kù)提交。

4.3可以選擇代碼現(xiàn)在托管到 Coding 上，這里演示如何發(fā)布到 Coding 倉(cāng)庫(kù)中，點(diǎn)擊"Publish Branch" -> 選擇"Publish to CODING"

4.4 輸入Coding 團(tuán)隊(duì)域名前綴，后面發(fā)布代碼就會(huì)發(fā)布到這個(gè)團(tuán)隊(duì)項(xiàng)目下

4.5 選擇對(duì)應(yīng)的賬號(hào)和選擇推送的項(xiàng)目，如果沒有會(huì)創(chuàng)建一個(gè)新項(xiàng)目。

4.7?提交成功后就可以登陸到 Coding 平臺(tái)進(jìn)行查看倉(cāng)庫(kù)代碼。

5、開發(fā)空間

5.1 查看正在使用的開發(fā)空間

5.2 配置升級(jí)?

5.3 停止項(xiàng)目

5.4 刪除項(xiàng)目，即可銷毀這個(gè)工作空間

三、常見問(wèn)題

1、有時(shí)候無(wú)法打開工作空間？

2、有時(shí)候關(guān)閉內(nèi)置瀏覽器之后不知道如何再打開？

四、總結(jié)

前言：

????????作為一名深耕前端開發(fā)多年的程序員，每天打交道最多的就是“代碼編輯器”和“coding”。一款好的代碼編輯器對(duì)于開發(fā)工作效率的提升可謂事半功倍，博主目前開發(fā)項(xiàng)目最常用的幾款前端開發(fā)編輯器有：

（1）vscode：微軟開發(fā)的編輯器，支持前后端多語(yǔ)言，如Vue、JavaScript、Python、React、C/C++等；提供集成終端，可調(diào)試代碼；集成Git版本控制工具。缺點(diǎn)：需要安裝開發(fā)環(huán)境才能運(yùn)行部分插件和功能；不支持小程序開發(fā)；部分項(xiàng)目運(yùn)行時(shí)，消耗內(nèi)存大。

（2）HBuilderX :?一款國(guó)產(chǎn)的編輯器，其良好的支持uni-app、Vue.js等框架，可以快速開發(fā)跨平臺(tái)的移動(dòng)應(yīng)用和小程序，受許多前端開發(fā)者青睞。缺點(diǎn)：其他語(yǔ)言和框架支持不友好，例React、python；不支持Git等版本控制工具，不方便團(tuán)隊(duì)協(xié)作。

（3）WebStorm：一款由JetBrains公司開發(fā)的前端開發(fā)工具，它專注于JavaScript和前端開發(fā)，提供了強(qiáng)大的代碼分析和調(diào)試功能，同時(shí)也支持其他語(yǔ)言和框架，如TypeScript、React等。缺點(diǎn)是占用內(nèi)存較大，正版費(fèi)用高。? ?

????????最近空余時(shí)間在做三維方面的一些技術(shù)調(diào)研和知識(shí)儲(chǔ)備，在查看官方文檔的同時(shí)，也會(huì)編寫一些腳本來(lái)查看實(shí)際效果，所以家中電腦環(huán)境和公司環(huán)境都會(huì)留有一些我開發(fā)的各種腳本demo，用版本控制工具+來(lái)回切換總會(huì)覺得有一些不便捷。所以這次在開發(fā)應(yīng)用的時(shí)候，博主這次放棄使用傳統(tǒng)編輯器，嘗試使用【騰訊云Cloud Studio云編輯器】做開發(fā)，打開瀏覽器就能寫代碼，和原生 IDE 一樣的云端開發(fā)體驗(yàn)，使得博主可以跨空間來(lái)實(shí)現(xiàn)開發(fā)，工作效率自然提升很多，這里也給大家先看看博主使用云編輯器開發(fā)的作品成果：

? ? 那么這次應(yīng)用開發(fā)的親身體驗(yàn)下來(lái)，騰訊云編輯器Cloud Studio與傳統(tǒng)編輯器相比而言，有何優(yōu)勢(shì)和便捷之處，以及我是如何使用Cloud Studio來(lái)進(jìn)行3D家具個(gè)性化定制應(yīng)用開發(fā)的呢，且聽博主接下來(lái)為你娓娓道來(lái)~~~

?一、騰訊云 Cloud Studio介紹：

????????Cloud Studio是一個(gè)基于云端的開發(fā)環(huán)境，項(xiàng)目體驗(yàn)地址：Cloud Studio官網(wǎng)。它可以讓程序員在云端進(jìn)行編寫和運(yùn)行程序。相比傳統(tǒng)的本地IDE，Cloud Studio具有以下優(yōu)勢(shì)。首先，由于Cloud Studio是基于云端的，只要保證網(wǎng)絡(luò)連接正常，即使使用配置較低的電腦也可以編寫和運(yùn)行各種吃內(nèi)存的程序，因?yàn)樗褂玫氖窃贫说馁Y源，與本地電腦的性能無(wú)關(guān)。其次，Cloud Studio提供了在線預(yù)覽功能，可以方便地查看代碼的效果和運(yùn)行結(jié)果，無(wú)需頻繁地切換窗口或啟動(dòng)本地服務(wù)器；集成AI助手，直接在 Cloud Studio 里喚起 AI代碼助手，讓你擁有專業(yè)的研發(fā)伙伴，與您一起更高質(zhì)量的完成編碼工作，事半功倍。Cloud Studio提供了便捷的云端開發(fā)環(huán)境，可以解決一些傳統(tǒng)IDE所面臨的痛點(diǎn)，并且具有一些獨(dú)特的優(yōu)勢(shì)：

1、接近本地 IDE 的開發(fā)體驗(yàn)

它打開瀏覽器就能寫代碼，無(wú)需下載安裝，隨時(shí)隨地打開瀏覽器就能寫代碼，支持代碼高亮、自動(dòng)補(bǔ)全、全功能終端、實(shí)時(shí)保存等功能。擁有和本地 IDE 一樣流暢的編輯體驗(yàn)。

2、多環(huán)境可選，或連接到云主機(jī)

內(nèi)置 Node.js、Java、Python 等常見環(huán)境，為您省去復(fù)雜的配置工作，直接進(jìn)入開發(fā)狀態(tài)。或者您也可以將其連接到自己的云主機(jī)，來(lái)管理云主機(jī)中的資源。

3、隨時(shí)分享預(yù)覽效果

在 Cloud Studio 中快速生成預(yù)覽鏈接，無(wú)論是分享給別人來(lái)展示項(xiàng)目，還是將其作為調(diào)試接口，都極為方便。

4、兼容 VSCode 插件

默認(rèn)的配置無(wú)法滿足需求？您還可以在線安裝 VSCode 的插件來(lái)增強(qiáng)使用體驗(yàn)。目前 Cloud Studio 兼容絕大多數(shù) VSCode 插件。

5、 AI代碼助手

直接在 Cloud Studio 里喚起 AI代碼助手，讓你擁有專業(yè)的研發(fā)伙伴，與您一起更高質(zhì)量的完成編碼工作，事半功倍。

Cloud Studio功能如此強(qiáng)大，不需要裝各種環(huán)境，簡(jiǎn)單易用，開箱即可上手，那么我們?nèi)绾问褂脧?0 到 1 體驗(yàn)云 IDE 給我們帶來(lái)的優(yōu)勢(shì)， 接著博主將以一個(gè)【3D家具個(gè)性化定制應(yīng)用】的實(shí)際開發(fā)案例來(lái)帶大家共同體驗(yàn)~~

二、騰訊云Cloud Studio項(xiàng)目實(shí)踐（3D家具個(gè)性化定制應(yīng)用）

1、注冊(cè)并登錄 Cloud Studio

?注冊(cè)與登錄步驟較為簡(jiǎn)單，Cloud Studio?在線編程平臺(tái)支持 Coding 賬號(hào)、GitHub 賬號(hào)及微信授權(quán)三種方式登錄。這里博主使用的是微信掃碼授權(quán)登錄，登錄成功即注冊(cè)成功；

2、進(jìn)入Vue預(yù)置開發(fā)環(huán)境

2.1 登錄成功進(jìn)入 Cloud Studio 主頁(yè)面

如下空間模板開箱即用，可以快速搭建環(huán)境進(jìn)行代碼開發(fā)，同時(shí) Cloud Studio 也對(duì)所有新老用戶每月贈(zèng)送 3000 分鐘的工作空間免費(fèi)時(shí)長(zhǎng)。

2.2、點(diǎn)擊 Vue.js 模板卡片，即可快速的自動(dòng)生成一個(gè)vue3.0項(xiàng)目

2.3 等待不到 30s 左右（與帶寬網(wǎng)速差異有區(qū)別），開發(fā)環(huán)境就初始化配好了

2.4? Cloud Studio 幫助我們初始化好開發(fā) Vue 環(huán)境，并且默認(rèn)有一個(gè)小 Demo

2.5 到這一步，基礎(chǔ)的vue項(xiàng)目已經(jīng)搭建完畢

而且Cloud Studio 云編輯器的操作界面基本跟我們平時(shí)使用的 VS Code 非常類似，接下來(lái)我們就開始著手準(zhǔn)備應(yīng)用開發(fā)。

3、項(xiàng)目開發(fā)

3.1?項(xiàng)目功能點(diǎn)簡(jiǎn)介

Three.js 是一款運(yùn)行在瀏覽器中的3D 引擎，集成好后，我們就可以使用它提供的強(qiáng)大的webgl圖形學(xué)功能來(lái)構(gòu)建【3D家具個(gè)性化定制應(yīng)用】。包含以下功能：三維場(chǎng)景創(chuàng)建，沙發(fā)模型導(dǎo)入，沙發(fā)模型3D展示，場(chǎng)景中光影效果構(gòu)建，?沙發(fā)零部件實(shí)現(xiàn)切換材質(zhì)顏色，視角切換動(dòng)畫等等。

3.2?安裝依賴

開發(fā)web3d我們常常用的是three.js，這里我們使用npm將它集成進(jìn)項(xiàng)目，在控制臺(tái)中執(zhí)行如下命令：

安裝完成之后，我們看看package.json當(dāng)中是否存在three,存在即表示安裝好了

3.3 三維場(chǎng)景創(chuàng)建

先在html中構(gòu)建一個(gè)canvas元素，?整個(gè)3D體驗(yàn)都將渲染到此元素中

創(chuàng)建一個(gè)場(chǎng)景及背景色，遠(yuǎn)處添加一些相同顏色的霧，這將有助于在添加后隱藏地板的邊緣

創(chuàng)建一個(gè)渲染器，并傳入我們的canvas元素，設(shè)置抗鋸齒，這將在3D模型周圍創(chuàng)建更平滑的邊緣。

接下來(lái)需要做的是一個(gè)更新循環(huán)，這個(gè)函數(shù)默認(rèn)每秒執(zhí)行60次，這樣我們就可以實(shí)時(shí)看到我們的三維場(chǎng)景及更新，?這個(gè)更新函數(shù)是animate()?

我們需要在空間中加入一個(gè)攝像機(jī)，這樣我們就看到場(chǎng)景了

3.4 加載模型

這里我們使用的是glft格式的模型，GLB是GLTF模型的二進(jìn)制文件格式表示,這種格式的模型好處是已經(jīng)包含了模型結(jié)構(gòu)、mesh、材質(zhì)、動(dòng)畫等全部信息。

使用GLTFLoader來(lái)導(dǎo)入模型，轉(zhuǎn)換成瀏覽器能顯示的數(shù)據(jù)格式

方法的第一個(gè)參數(shù)是模型的文件路徑，第二個(gè)參數(shù)是在加載資源后運(yùn)行的函數(shù)，第三個(gè)參數(shù)目前尚未定義，但可用于第二個(gè)在資源加載時(shí)運(yùn)行的函數(shù)，最后一個(gè)參數(shù)用于處理錯(cuò)誤

此時(shí)，你應(yīng)該可以看到在場(chǎng)景中已經(jīng)加入了一張黑色的沙發(fā)。

3.5?設(shè)置光影效果

這邊在場(chǎng)景中加入半球燈和定向燈。 并設(shè)置空間位置和強(qiáng)度。

這里場(chǎng)景中就明亮了許多，你也可以看到沙發(fā)的原本顏色和材質(zhì)。

?3.6 添加地板

為了使得場(chǎng)景中效果更好一些，給場(chǎng)景加了一個(gè)地板

?3.7 取得沙發(fā)模型零部件

使用loader加載完模型后，使用traverse函數(shù)，可以遍歷出模型的各個(gè)子節(jié)點(diǎn)，這里我們就可以得到各個(gè)模型子節(jié)點(diǎn)的名稱，并將其作為唯一標(biāo)識(shí)

?3.8 給模型替換材質(zhì)或切換顏色

模型是什么顏色，是金屬的還是木材的、是嶄新的還是破舊的、這些模型的外觀表現(xiàn)都是由貼圖和顏色決定的。

通過(guò)上一步，我們可以定義出模型的子節(jié)點(diǎn)及其標(biāo)識(shí)，為這一步的切換顏色做鋪墊，這里我們先定義好模型子節(jié)點(diǎn)對(duì)象，并定義好切換顏色方法：

?3.9、生成色卡菜單

3.10?視角切換動(dòng)畫

為了使得切換沙發(fā)不同部位時(shí)候更加靈動(dòng)，這里使用Tween.js庫(kù)實(shí)現(xiàn)視角切換動(dòng)畫

3.11 增加模型加載loading效果

這里開發(fā)一個(gè)小的loding組件，因?yàn)槟Ｐ偷募虞d受網(wǎng)絡(luò)環(huán)境的影響，可能會(huì)有一定慢，這里等待數(shù)據(jù)用加載動(dòng)畫的方式給到用戶一個(gè)良好的體驗(yàn)

3.12 保存代碼后就可以在內(nèi)置的瀏覽器中看到實(shí)時(shí)修改后的效果：

到這里我們的3D家具個(gè)性化定制應(yīng)用基本完成

?4、初始化倉(cāng)庫(kù)

4.1左邊功能菜單區(qū)找到“源代碼管理”。

4.2將輸入需要提交的message信息，再點(diǎn)擊"Commit"進(jìn)行倉(cāng)庫(kù)提交。

4.3可以選擇代碼現(xiàn)在托管到 Coding 上，這里演示如何發(fā)布到 Coding 倉(cāng)庫(kù)中，點(diǎn)擊"Publish Branch" -> 選擇"Publish to CODING"

4.4 輸入Coding 團(tuán)隊(duì)域名前綴，后面發(fā)布代碼就會(huì)發(fā)布到這個(gè)團(tuán)隊(duì)項(xiàng)目下

4.5 選擇對(duì)應(yīng)的賬號(hào)和選擇推送的項(xiàng)目，如果沒有會(huì)創(chuàng)建一個(gè)新項(xiàng)目。

4.7?提交成功后就可以登陸到 Coding 平臺(tái)進(jìn)行查看倉(cāng)庫(kù)代碼。

Coding 一站式研發(fā)管理平臺(tái)

5、開發(fā)空間

5.1 查看正在使用的開發(fā)空間

可以看到我們使用的模板是基于 vue-js創(chuàng)建的模板，還可以在“近期刪除”的空間，進(jìn)行回滾。

5.2 配置升級(jí)?

如果覺得“標(biāo)準(zhǔn)版本”不符合要求，還可以進(jìn)行，不過(guò)，修改需要下次重啟后才能生效。

5.3 停止項(xiàng)目

5.4 刪除項(xiàng)目，即可銷毀這個(gè)工作空間

三、常見問(wèn)題

1、有時(shí)候無(wú)法打開工作空間？

檢查是否已有其它工作空間打開，因?yàn)橥瑫r(shí)只支持開啟運(yùn)行一個(gè)工作空間。

2、有時(shí)候關(guān)閉內(nèi)置瀏覽器之后不知道如何再打開？

使用如下命令，可以開啟

cd ./ && set port=5173 && export PORT=5173 && yarn && yarn run dev --host 0.0.0.0 --port=5173

四、總結(jié)

通過(guò)這次使用騰訊云 Cloud Studio 進(jìn)行3D家具個(gè)性化定制應(yīng)用的開發(fā)，我深刻感受到了Cloud Studio 云開發(fā)環(huán)境對(duì)開發(fā)工作帶來(lái)的高效便捷，概括來(lái)說(shuō)有以下幾點(diǎn)：

1、在瀏覽器中就可以開發(fā)代碼或者查看項(xiàng)目代碼，無(wú)需下載編輯器，就像寫文章一樣方便便捷，而且還有擁有媲美本地 IDE 的流暢編碼體驗(yàn)。

2、不需要在電腦中安裝各種開發(fā)環(huán)境，眾所周知，開發(fā)JAVA需要搭建java環(huán)境，開發(fā)python需要安裝對(duì)應(yīng)的python環(huán)境，開發(fā)前端需要安裝node環(huán)境。而且Cloud Studio內(nèi)置 Node.js、Java、Python 等常見環(huán)境，直接就免去安裝環(huán)境的煩惱。

3、支持在線預(yù)覽快速生成預(yù)覽鏈接，方便分享他人展示項(xiàng)目或在線調(diào)試

4、未來(lái)還會(huì)集成AI開發(fā)助手，借助AI的功能，開發(fā)起來(lái)更是快的飛起。

總而言之，騰訊云 Cloud Studio這次給我的開發(fā)體驗(yàn)非常良好，后續(xù)會(huì)考慮探索 Cloud Studio 更多的功能，為工作中進(jìn)行賦能！