使用three.js在不同坐标处显示文本 [英] Display texts at different-different coordinates using three.js
本文介绍了使用three.js在不同坐标处显示文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用三个js
在不同的不同坐标处显示不同的文本.我想在不同的位置显示如下图文件中的文本.
I want to display different texts at different-different coordinates using three js
. And I want to show the text like in the following image file at different-different location.
我希望该函数应该在不同的位置显示文本,就像在链接的图像文件中一样
I want that function should display text at different-different location as like in linked image file
Javascript
var container, camera, scene, renderer, controls;
var text2;
init();
animate();
function init(){
camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 1 ;
scene = new THREE.Scene();
text2 = createLabel("Tower",30,90,30,10,50,"blue","white");
text3 = createLabel("Hello",30,90,50,60,50,"black","white");
text4 = createLabel("Tower",30,90,120,100,50,"red","white");
console.log( text2 );
scene.add( text2 );
scene.add( text3 );
scene.add( text4 );
text2.lookAt( camera.position );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.append( renderer.domElement );
}
function createLabel(text, x, y, canvasPosition_x,canvasPosition_y, size, color, backGroundColor, backgroundMargin) {
var canvas = document.createElement("canvas");
// set resolution
canvas.width = 512;
canvas.height = 512;
var context = canvas.getContext("2d");
context.font = size + "pt Arial";
context.font = size + "pt Calibri";
context.fillStyle = "white";
canvas.position = "absolute";
context.fillRect( 0, 0, canvas.width, canvas.height );
context.fillStyle = color;
context.fillText( text, x, y );
context.position = "absolute";
var texture = new THREE.CanvasTexture( canvas );
var material = new THREE.MeshBasicMaterial({
map: texture,
// color: 0xff0000 // useful for debugging. in this way you see, how much are of the plane is used for the text
});
var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry(), material);
mesh.position.x = canvasPosition_x;
mesh.position.y = canvasPosition_y;
return mesh;
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
推荐答案
您可以使用网格的位置属性来更改位置.所以例如 mesh.position.x = 0.5;
.
You can use the position-attribute of the mesh to change the location. So for instance mesh.position.x = 0.5;
.
这篇关于使用three.js在不同坐标处显示文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文