![](/img/trans.png)
[英]Render a shader without having to add a Geometry to the scene in ThreeJS
[英]Add text with geometry in threejs
我想將文本附加到環的底部(切口所在的位置),如下圖所示。 你可以看到我用來繪制環的代碼。 我想寫出切口所在的半徑(40m、30m、20m),並且我希望它們被合並,因為我將放大和縮小它們並希望它們保持與環的連接。
// Rings
// 40m ring
const geometry40m = new THREE.RingGeometry(35, 35.6, 30, 8, 4.85, 6);
geometry40m.lookAt(this.CAMERA_POSITION);
const ringMesh40m = new THREE.Mesh(geometry40m, whiteMaterial);
ringMesh40m.updateMatrix();
// geometry40m.mergeMesh(new THREE.Mesh(textGeometry, whiteMaterial));
// 30m ring
const geometry30m = new THREE.RingGeometry(26, 26.6, 30, 8, 4.85, 6);
geometry30m.lookAt(this.CAMERA_POSITION);
geometry30m.mergeMesh(ringMesh40m); // adding 40m and 30m to one mesh
const ringMesh40_30m = new THREE.Mesh(geometry30m, whiteMaterial);
ringMesh40_30m.updateMatrix();
// 20m ring
const geometry20m = new THREE.RingGeometry(16, 16.6, 30, 8, 4.85, 6);
geometry20m.lookAt(this.CAMERA_POSITION);
geometry20m.mergeMesh(ringMesh40_30m); // adding 40m, 30m and 20m to one mesh
const ringMesh40_30_20m = new THREE.Mesh(geometry20m, whiteMaterial);
this.rings = ringMesh40_30_20m;
this.rings.layers.set(15);
this.rings.visible = true;
this.scene.add(this.rings);
您可以添加帶有 PlaneGeometry 的 Mesh 對象和帶有 CanvasTexture 對象紋理的 Basic 材質。 Position 他們在剪裁和更新紋理內容時用文字顯示大小。
如果您希望它們始終面向屏幕,您可以使用 Sprite 對象而不是 Mesh
對於其他尋找答案的人,我最終使用此 function 創建了文本標簽:
createTextMesh(text, font, size, mat) {
var shapes = font.generateShapes(text, size);
var geometry = new THREE.ShapeBufferGeometry(shapes);
geometry.center();
geometry.computeBoundingBox();
return new THREE.Mesh(geometry, mat);
}
這就是我最終要做的,它對我有用:
// Rings
// 40m ring
const geometry40m = new THREE.RingGeometry(
RADIUS_40M,
RADIUS_40M + 0.6,
30,
8,
4.85,
6);
// 30m ring
const geometry30m = new THREE.RingGeometry(
RADIUS_30M,
RADIUS_30M + 0.6,
30,
8,
4.85,
6);
geometry30m.merge(geometry40m);
// 20m ring
const geometry20m = new THREE.RingGeometry(
RADIUS_20M,
RADIUS_20M + 0.6,
30,
8,
4.85,
6
);
geometry20m.merge(geometry30m);
// adding 40m, 30m and 20m to one mesh
const ringMesh40_30_20m = new THREE.Mesh(geometry20m, whiteMaterial);
ringMesh40_30_20m.layers.set(16);
ringMesh40_30_20m.visible = true;
ringMesh40_30_20m.name = "rings";
this.rings = new THREE.Object3D();
this.rings.add(ringMesh40_30_20m);
// Labels
const fontJson = require("../../../assets/helvetiker_regular.typeface.json");
const font = new THREE.Font(fontJson);
let label20m = this.createTextMesh("20m", font, 0.5, whiteMaterial);
label20m.layers.set(16);
label20m.visible = true;
label20m.name = "label20m";
let label30m = this.createTextMesh("30m", font, 2.2, whiteMaterial);
label30m.layers.set(16);
label30m.visible = true;
label30m.name = "label30m";
let label40m = this.createTextMesh("40m", font, 2.5, whiteMaterial);
label40m.layers.set(16);
label40m.visible = true;
label40m.name = "label40m";
this.rings.add(label20m);
this.rings.add(label30m);
this.rings.add(label40m);
this.rings.getObjectByName("label20m").position.y = -RADIUS_20M;
this.rings.getObjectByName("label30m").position.y = -RADIUS_30M;
this.rings.getObjectByName("label40m").position.y = -RADIUS_40M;
this.rings.lookAt(this.CAMERA_POSITION);
this.scene.add(this.rings);
我從three.js 官方 Repo獲得字體
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.