缩放时,Three.js缩放画布文本

时间:2013-11-04 22:49:15

标签: javascript canvas three.js

在Three.js中,我使用canvas将文本添加到WebGLRenderer中。我不确定这是否是添加文本的最佳方法,但是当我使用PerspectiveCamera进行缩放并使用OrbitControls控制它时,文本的比例不会改变。在放大和缩小时如何进行文本缩放?

以下是我在场景中添加文字的方法:

var canvas = document.createElement('canvas'),
    context = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 400;

canvas.style.width = canvas.width + 'px';
canvas.style.height = canvas.height + 'px';

var half_canvas_width = canvas.width / 2;

context.fillStyle = '#fff';
context.textAlign = 'center';
context.fillText('Hello World', half_canvas_width, 14);

var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;

var material = new THREE.SpriteMaterial({
    map: texture,
    transparent: true,
    useScreenCoordinates: false
});

sprite = new THREE.Sprite(material);
sprite.scale.set(300, 250, 0.5);

scene.add(sprite);

0 个答案:

没有答案