資訊專欄INFORMATION COLUMN
摘要：最近在做一個基于實現(xiàn)立體幾何的項目，碰到一個問題，如何給球體加上文字標(biāo)簽，探索了幾種實現(xiàn)方法。
最近在做一個基于three.js實現(xiàn)立體幾何的項目，碰到一個問題，如何給球體加上文字標(biāo)簽，探索了幾種實現(xiàn)方法。
二維文字標(biāo)簽1.通過CSS2DObject創(chuàng)建二維對象
var earthDiv = document.createElement( "div" );
earthDiv.className = "label";
earthDiv.textContent = "Earth";
earthDiv.style.marginTop = "-1em";
var earthLabel = new CSS2DObject( earthDiv );
earthLabel.position.set( 0, EARTH_RADIUS, 0 );
earth.add( earthLabel );
var moonDiv = document.createElement( "div" );
moonDiv.className = "label";
moonDiv.textContent = "Moon";
moonDiv.style.marginTop = "-1em";
var moonLabel = new CSS2DObject( moonDiv );
moonLabel.position.set( 0, MOON_RADIUS, 0 );
moon.add( moonLabel );
2.利用CSS2DRenderer將二維對象append到dom節(jié)點中，CSS2DRenderer會將所有的CSS2DObject（HTMLELEMENT）包裹在一個div容器，append到dom節(jié)點中
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = "absolute";
labelRenderer.domElement.style.top = 0;
document.body.appendChild( labelRenderer.domElement );
3.效果圖（來源于官網(wǎng)demo, 其中moom和earth為文字標(biāo)簽）
4.使用場景及局限
用于標(biāo)記整個立體幾何，不適用于標(biāo)記立體幾何的局部位置
三維文字標(biāo)簽基于三維空間中物體的靈活性，三維文字標(biāo)簽滿足了標(biāo)記立體幾何局部位置的需求。
實現(xiàn)思路：
由于Sprite是一個總是面朝著攝像機的平面，很貼合標(biāo)簽的使用場景，選擇其作為標(biāo)簽的原形；
文字的實現(xiàn)有兩種方式： textGeometry和canvasTexture貼圖，textGeometry實際上渲染出立體的文字，成本較高；而canvas的方式較輕量，本文采用了后者。
文字和Sprite組合起來則成為三維文字標(biāo)簽，通過position即可定位到標(biāo)記的地方
1.離屏canvas測量文本的width(用于確定實際canvas的寬度)
const offScreenCanvas = document.createElement("canvas");
const offScreenCtx = offScreenCanvas.getContext("2d");
offScreenCtx.font = "14px 黑體";
const txt = "標(biāo)簽";
const textWidth = offScreenCtx.measureText(txt).width;
2.繪制文字到canvas中作為texture
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const txt = "標(biāo)簽";
if (ctx !== null) {
canvas.width = (textWidth + padding 2) pixelRatio;
canvas.height = 18 * pixelRatio;
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
ctx.font = "14px 黑體";
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, textWidth + padding * 2, 18);
ctx.fillStyle = "#000";
ctx.fillText(txt, padding, 14);
}
const texture = new THREE.CanvasTexture(canvas);
3.渲染Sprite
const spriteMaterial = new THREE.SpriteMaterial( { map: texture, sizeAttenuation: false } );
const label = new THREE.Sprite( spriteMaterial );
const scaleY = 0.1;
const scaleX = scaleY * canvas.width / canvas.height;
label.position.copy(vertice);
// sprite默認(rèn)會令canvas變形 需要通過scale調(diào)整比例
label.scale.set(scaleX, scaleY, 1);
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/105591.html
摘要：一般說來，對于制圖建模軟通常使正交投影，這樣不會因為投影而改變物體比例而對于其他大多數(shù)應(yīng)用，通常使用透視投影，因為這更接近人眼的觀察效果。 showImg(https://segmentfault.com/img/remote/1460000012581680?w=1920&h=1080); 1. 概述 1.1 什么是WebGL？ WebGL是在瀏覽器中實現(xiàn)三維效果的一套規(guī)范 想要使用...
摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：創(chuàng)建場景標(biāo)簽本節(jié)目標(biāo)是為做簡介。我們從使用旋轉(zhuǎn)立方體來搭建場景開始。我們現(xiàn)在創(chuàng)建了場景，攝像機和渲染器。我們需要來創(chuàng)建立方體。這會導(dǎo)致攝像機和立方體內(nèi)部重疊。這會創(chuàng)建一個讓渲染器每秒繪制一幀的循環(huán)。結(jié)果恭喜你現(xiàn)在創(chuàng)建好了第一個應(yīng)用。 1.創(chuàng)建場景 標(biāo)簽： three.js 本節(jié)目標(biāo)是為 three.js 做簡介。我們從使用旋轉(zhuǎn)立方體來搭建場景開始。如果遇到困難需要幫助，頁面底部有可參考...
閱讀 1876·2021-11-12 10:36
閱讀 2309·2021-09-01 10:29
閱讀 2337·2019-08-30 15:56
閱讀 1015·2019-08-30 12:56
閱讀 2342·2019-08-26 13:58
閱讀 2264·2019-08-23 18:38
閱讀 1486·2019-08-23 18:32
閱讀 2103·2019-08-23 16:53
