Three.js模型標籤

Three.js模型標籤

在不少的實際的項目中，你可能須要給一個Three.js的模型添加標籤，標籤能夠經過一個包含文字圖形信息的HTML元素或者一個three.js的精靈模型來表示。

常見問題

• three.js三維模型如何添加註釋文字？
• Three.js模型對象如何設置標籤？
• three.js如何用HTML元素設置顯示熱點
• 如何把模型的世界座標轉化爲屏幕座標？

每一個人的基礎不一樣，雖然知識點區別不大，可能描述的時候會有很大區別。

視頻講解和源碼

下面對知識點簡單介紹，關於視頻講解能夠關注我博客發佈可的相關課程，我的WebGL/Three.js技術博客。

層級模型

複雜的項目，一個three.js場景每每包含包含多個模型對象，模型對象也會有一些父對象，這樣就會造成一個層級模型，從數據結構的角度來看就是樹結構。
一個模型相對世界座標系原點的位置是世界座標，相對父對象的位置是局部座標。

獲取模型位置

你若是想給一個模型設置標籤，首先須要得到模型在世界座標系中所在的位置，若是你但願標註一個模型的某個局部位置，那就要得到該局部區域的一個頂點座標。

• .position屬性是一個模型的局部位置，相對父對象的位置，若是一個網格模型Mesh直接屬於場景Scene，沒有除了Scene意外的父對象
• .vertices若是幾何體是Geometry類型，能夠經過.vertices屬性訪問頂點，經過下標能夠訪問具體的頂點位置座標。
• .attributes.position若是幾何體是BufferGeometry類型，能夠經過.attributes.position屬性訪問頂點位置數據。
• .getWorldPosition()實際項目中一個模型對象能夠有多個父對象，這個時候想得到該模型對象的世界座標，就不能經過.position屬性，應該經過.getWorldPosition()方法實現，該方法的使用參考基類Object3D。

實際項目中得到一個模型，多是經過點擊得到，或者遍歷對象根據屬性值找到某個或某些模型，等等這裏不展開說，這不是本節課的重點，關於遞歸遍歷模型或者鼠標點擊選中某個模型能夠關注課程的其它部分。

精靈模型Sprite做爲標籤

在使用精靈模型表示標籤以前，你應該先了解精靈模型Sprite有什麼特色。使用精靈模型表示一個模型對象的標籤，那麼精靈模型就要位於模型對象的附近。能夠得到要標註模型的世界座標，而後來設置精靈標籤的位置，適當偏移一點就能夠，固然也能夠把精靈對象插入到模型對象的父對象中，和模型對象同樣做爲父對象的子對象，這樣的話若是模型父對象的位置變化，精靈模型能夠跟着一塊兒變化。

標籤的樣式可讓美術設計好直接做爲精靈的貼圖就能夠，若是標籤不是特定的，好比用戶輸入文字，平臺自動生成模型標籤，能夠經過程序自動化合成一個紋理做爲精靈模型的貼圖，關於如何自動合成紋理貼圖這裏不詳細闡述。

/**
 * 建立點精靈模型
 */
// 建立精靈材質對象SpriteMaterial
var spriteMaterial = new THREE.SpriteMaterial({
  map:  new THREE.TextureLoader().load("立方體.png"), //設置精靈紋理貼圖
  transparent: true,//開啓透明(紋理圖片png有透明信息)
});
// 建立精靈模型對象，不須要幾何體geometry參數
var sprite = new THREE.Sprite(spriteMaterial);
sprite.scale.set(30, 30, 1); //精靈大小
// 把精靈模型插入到模型對象的父對象下面
group.add( sprite);
// 父對象group位置變化,網格模型及其對象的標籤一樣發生變化
group.position.set(10, 0, -80);
// 表示標籤信息的精靈模型對象相對父對象設置必定的偏移
sprite.translateY(30);

div等html元素做爲標籤(世界座標轉屏幕座標)

經過html元素表示標籤相比較使用精靈來講比較麻煩，須要進行座標變換，一個模型顯示在Canvas畫布上，通過了相機的視圖、投影變換，若是想把一個div元素標註在一個模型附近，就須要計算模型渲染到畫布上的具體位置，也就是所謂的屏幕座標。使用html元素的好處是能夠直接輸入漢字，利用css來設置一下標籤的樣式，固然也能夠直接加載美術設計的標籤。

世界座標轉WebGL標準設備座標

• 世界座標：世界座標簡單說就是模型在three.js三維空間中的位置，可是注意不是局部位置屬性.position，你能夠經過.getWorldPosition()方法得到世界座標，每一個子對象都有一個相對父對象的位置，把一個對象的全部父對象相對Scene座標原點的位置加起來就是一個模型的世界座標
• 屏幕座標：你能夠理解爲Canvas畫布上的位置，單位是像素px，這和HTML說的像素是同樣的。

//建立一個三維向量做爲世界座標
var worldVector = new THREE.Vector3();
//獲取網格模型boxMesh的世界座標，賦值給worldVector
boxMesh.getWorldPosition(worldVector);
//世界座標轉標準設備座標，standardVector是WebGL設備座標
var standardVector = worldVector.project(camera);

.project()是向量Vector3的方法，一個表示位置的向量Vector3把相機做爲參數執行該方法能夠獲得通過相機變換後的座標。通常threejs渲染器渲染的時候，會自動從相機對象讀取視圖和投影矩陣對模型的頂點進行變換。

WebGL標準設備座標轉屏幕座標

Canvas全屏顯示的時候複合下面的計算規則，若是不是全屏要注意修改計算規則。若是不是全屏，計算a和b的值，不能使用window.innerWidth，而應該使用canvas的具體寬高。若是canvas是局部顯示相對body區域的左上角有偏移，那麼div元素也要設置必定的偏移。

// 根據WebGL標準設備座標standardVector計算div標籤在瀏覽器頁面的座標
var a = window.innerWidth / 2;
var b = window.innerHeight / 2;
var x = Math.round(standardVector.x * a + a); //標準設備座標轉屏幕座標
var y = Math.round(-standardVector.y * b + b); //標準設備座標轉屏幕座標
/**
 * 設置標籤元素的位置
 */
div.style.left = x + 'px';
//這裏的130px主要是爲了標籤和模型有必定偏移，固然也能夠不設置，二者疊加在一塊兒
div.style.top = y - 130 + 'px';