畫布和SpriteMaterial

Question

對不起，如果這是一個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/。

任何幫助都是值得讚賞的。

感謝， 彼得

Answer 1

好了，你有幾個錯誤。我將攝像頭移近了一些，並做了一些其他的改變，這些改變都被注意到另外，小提琴使用舊版本的圖書館。

更新小提琴：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);