3

これがNoobの質問である場合は申し訳ありません。

動的に生成されたキャンバス要素をスプライトとして使用して、three.jsで作成されたタイムラインにラベルを追加しようとしています。タイムライン部分は素晴らしいレンダリングですが、キャンバススプライトをレンダリングするのに苦労しています。これは私がスプライトに使用しているものです（より大きなシーンのコンテキストから取り出されました）：

var canvas = document.createElement('canvas');
var size = 250;
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
context.fillStyle = '#990000';
context.textAlign = 'center';
context.font = '24px Arial';
context.fillText("some text", size / 2, size / 2);

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

var mat = new THREE.SpriteMaterial({
    map: amap,
    transparent: false,
    useScreenCoordinates: false,
    color: 0x000000
});

var sp = new THREE.Sprite(mat);
scene.add(sp);

サンプルコードの完全なセットは、http：//jsfiddle.net/rgE2j/2/で確認できます。

どんな助けでも大歓迎です。

ありがとう、ピーター

4

1 に答える 1

7

さて、あなたはいくつかの間違いを持っ​​ています。私はカメラを近づけて、他のいくつかの変更を加えました。また、フィドルは古いバージョンのライブラリを使用していました。

更新されたフィドル：http：//jsfiddle.net/rgE2j/141/

three.js r.54

var canvas = document.createElement('canvas');
var size = 256; // CHANGED
canvas.width = size;
canvas.height = size;
var context = canvas.getContext('2d');
context.fillStyle = '#ff0000'; // CHANGED
context.textAlign = 'center';
context.font = '24px Arial';
context.fillText("some text", size / 2, size / 2);

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

var mat = new THREE.SpriteMaterial({
    map: amap,
    transparent: false,
    useScreenCoordinates: false,
    color: 0xffffff // CHANGED
});

var sp = new THREE.Sprite(mat);
sp.scale.set( 10, 10, 1 ); // CHANGED
scene.add(sp);
于 2012-12-31T23:10:46.823 に答える