uniapp與Cesium及Mars3D開發(fā)指南（四）

通過npm便捷引入Cesium

在uniapp開發(fā)中，引入Cesium和Mars3D技術(shù)時(shí)，采用npm包管理方式被認(rèn)為是最便捷的途徑。動(dòng)態(tài)引入方式不僅可以提高編譯速度，還得到了uni官方的推薦。直接從`node_modules`導(dǎo)入時(shí)可能會遇到控制臺報(bào)錯(cuò)的情況。盡管理論上可以正常運(yùn)作，但在實(shí)際操作中需解決此問題。

通過命令`npm install cesium --save`安裝Cesium包。按照npm上的示例進(jìn)行項(xiàng)目引入后，嘗試運(yùn)行項(xiàng)目時(shí)可能會遇到報(bào)錯(cuò)。查看源碼發(fā)現(xiàn)，報(bào)錯(cuò)可能與缺少`CESIUM_BASE_URL`這個(gè)全局變量有關(guān)。由于uniapp自動(dòng)獲取路徑的語法存在問題，我們需要手動(dòng)設(shè)置這個(gè)變量，指向Cesium的靜態(tài)資源文件夾。

源碼中提供了`setBaseUrl`這個(gè)API，用于設(shè)置靜態(tài)資源路徑。我們需要根據(jù)Cesium的邏輯，設(shè)定一個(gè)指向?qū)隒esium源碼文件夾的路徑。這樣，即使uniapp自動(dòng)獲取路徑功能出現(xiàn)問題，也能確保Cesium正確加載所需的資源。

實(shí)際測試發(fā)現(xiàn)，有兩種導(dǎo)入方式可以成功：一是直接import引入并設(shè)置Cesium的跨域和replaceAll的polyfill。這樣，Cesium就能在uniapp的app端正常渲染和運(yùn)行。

雖然直接import引入Cesium需要額外注意跨域和polyfill的設(shè)置，但通過正確的路徑配置，這種方式在uniapp app端開發(fā)中是完全可行的。

在Cesium中點(diǎn)擊自定義按鈕展開2D圖層

ThingJS是一個(gè)先進(jìn)的PaaS開發(fā)平臺，為開發(fā)者提供了一個(gè)方便、安全的云端開發(fā)環(huán)境，可隨時(shí)隨地基于各種工具組件進(jìn)行開發(fā)。

ThingJS界面概述

ThingJS提供了清晰的界面體系結(jié)構(gòu)，以便于開發(fā)者進(jìn)行界面開發(fā)。其中，用于3D場景可視化的區(qū)域被稱為3D容器。

3D容器內(nèi)的界面展示

在3D容器內(nèi)，ThingJS提供了3D和2D的界面展示能力。具體來說，可以利用Marker功能將圖標(biāo)或Canvas繪制的圖片展示在3D場景中，或綁定到3D物體上。通過WebView功能，可以將頁面嵌入到3D場景中。

2D界面的展示與操作

ThingJS的通欄組件

在3D容器外，ThingJS提供了通欄組件，如上下側(cè)通欄。如果用戶希望基于ThingJS構(gòu)建一套獨(dú)立的應(yīng)用系統(tǒng)，可以使用通欄組件作為系統(tǒng)級別的菜單。這樣一來，用戶可以基于ThingJS強(qiáng)大的功能構(gòu)建豐富多樣的用戶界面和交互體驗(yàn)。Marker物體：圖片放置與動(dòng)態(tài)創(chuàng)建

一、引言

Marker物體是一種強(qiáng)大的工具，它允許你在虛擬場景中放置圖片，并根據(jù)需求調(diào)整其位置、大小和距離。想象一下，你正在為一個(gè)虛擬現(xiàn)實(shí)應(yīng)用或游戲添加環(huán)境元素，Marker物體將是一個(gè)不可或缺的助手。接下來，我們將深入了解如何使用Marker物體及其相關(guān)參數(shù)。

二、創(chuàng)建Marker物體

當(dāng)你想要?jiǎng)?chuàng)建一個(gè)Marker物體時(shí)，你需要指定一些關(guān)鍵參數(shù)。這些參數(shù)包括：類型（type）、偏移量（offset）、大小（size）、圖片的URL（url）以及父物體（parent）。下面是一個(gè)基本的創(chuàng)建示例：

```javascript

app.create({

type: "Marker",

offset: [0, 2, 0],

size: [4, 4],

url: "",

parent: app.query("car01")[0]

});

```

在這個(gè)例子中：

我們指定了要?jiǎng)?chuàng)建的物體類型為“Marker”。

通過offset參數(shù)，我們設(shè)置了Marker物體在自身坐標(biāo)系下的偏移量。

通過size參數(shù)，我們設(shè)定了Marker物體的大小，這個(gè)大小是以米為單位的。

url參數(shù)用于指定圖片的URL。

parent參數(shù)用于指定Marker物體的父物體。

三、3D效果與距離

Marker物體默認(rèn)是受到距離遠(yuǎn)近影響的，呈現(xiàn)出近大遠(yuǎn)小的3D效果。這意味著隨著觀察者的移動(dòng)，Marker物體的大小會相應(yīng)地變化，以模擬真實(shí)的視覺體驗(yàn)。Marker物體還能夠在3D空間中實(shí)現(xiàn)前后遮擋，使得場景更加真實(shí)和動(dòng)態(tài)。

四、更多參數(shù)選項(xiàng)

除了之前提到的參數(shù)，還有一些額外的參數(shù)可以幫助你更好地控制Marker物體。例如，“keepSize”參數(shù)，它可以控制Marker物體是否受距離遠(yuǎn)近影響而呈現(xiàn)近大遠(yuǎn)小的3D效果。如果設(shè)置為true，則Marker物體的大小將保持恒定，不受距離的影響，此時(shí)大小的單位將是屏幕的像素點(diǎn)。

五、使用canvas手動(dòng)創(chuàng)建動(dòng)態(tài)圖

除了使用上述參數(shù)在代碼中創(chuàng)建Marker物體，我們還可以利用H5的canvas來手動(dòng)創(chuàng)建動(dòng)態(tài)圖。通過canvas，我們可以繪制出更加復(fù)雜和動(dòng)態(tài)的圖像，將其添加到場景中，增強(qiáng)用戶體驗(yàn)。這需要一些額外的編程技巧，但一旦掌握，將為你帶來無限創(chuàng)意可能。

Marker物體是一個(gè)強(qiáng)大而靈活的工具，它允許你在虛擬場景中添加圖片元素，并根據(jù)需要進(jìn)行定制和調(diào)整。通過深入了解其參數(shù)和功能，你可以創(chuàng)造出令人驚嘆的虛擬世界。創(chuàng)建文本畫布功能

一、功能概述

在數(shù)字交互應(yīng)用中，我們經(jīng)常需要展示動(dòng)態(tài)文本信息。本次功能旨在創(chuàng)建一個(gè)文本畫布，用戶可以在特定的標(biāo)記上點(diǎn)擊，從而改變標(biāo)記上的數(shù)字顯示。該功能適用于各種場景，如游戲、導(dǎo)航等。

二、代碼實(shí)現(xiàn)

我們需要?jiǎng)?chuàng)建一個(gè)函數(shù)`createTextCanvas`，用于生成帶有文本的canvas元素。

```javascript

function createTextCanvas(text, canvas) {

// 如果未傳入canvas，則創(chuàng)建一個(gè)新的canvas元素

if (!canvas) {

canvas = document.createElement("canvas");

canvas.width = 64;

canvas.height = 64;

}

const ctx = canvas.getContext("2D");

// 設(shè)置背景色和邊框樣式

ctx.fillStyle = "rgb(32, 32, 256)";

ctx.beginPath();

ctx.arc(32, 32, 30, 0, Math.PI 2);

ctx.fill();

ctx.strokeStyle = "rgb(255, 255, 255)";

ctx.lineWidth = 4;

ctx.beginPath();

ctx.arc(32, 32, 30, 0, Math.PI 2);

ctx.stroke();

// 設(shè)置文本樣式并填充文本

ctx.fillStyle = "rgb(255, 255, 255)";

ctx.font = "32px sans-serif";

ctx.textAlign = "center";

ctx.textBaseline = "middle";

ctx.fillText(text, 32, 32);

return canvas;

}

```

接下來，在應(yīng)用的加載中，創(chuàng)建一個(gè)Marker類型的對象，并將其附加到car02元素上。為Marker對象添加點(diǎn)擊監(jiān)聽器，當(dāng)點(diǎn)擊時(shí)，更新其canvas上的文本內(nèi)容。

三、參數(shù)說明

canvas參數(shù)用于接收canvas元素作為貼圖顯示。用戶可以通過修改該參數(shù)來自定義顯示內(nèi)容。還可以根據(jù)需要調(diào)整canvas的尺寸、樣式等屬性。

四、運(yùn)行效果

運(yùn)行應(yīng)用后，將在界面上顯示一個(gè)Marker對象。點(diǎn)擊Marker時(shí)，其上的數(shù)字將隨機(jī)變化。用戶可以通過點(diǎn)擊來實(shí)時(shí)更新顯示的數(shù)字。此功能適用于需要?jiǎng)討B(tài)展示文本信息的場景。

五、總結(jié)與展望

本次功能實(shí)現(xiàn)了一個(gè)簡單的文本畫布功能，用戶可以通過點(diǎn)擊來更新顯示的文本內(nèi)容。未來，我們可以進(jìn)一步優(yōu)化性能，支持更復(fù)雜的文本格式和樣式，以及實(shí)現(xiàn)更多的交互功能。還可以將該功能應(yīng)用于其他場景，如游戲、地圖等，為用戶提供更豐富、便捷的交互體驗(yàn)。