Canvas and SpriteMaterial

Question

죄송합니다. 멍청한 질문입니다.

동적으로 생성 된 캔버스 요소를 스프라이트로 사용하여 three.js에서 만든 타임 라인에 레이블을 추가하려고했습니다. 타임 라인 부분이 멋지게 렌더링되었지만 캔버스 스프라이트를 렌더링하는 데 어려움을 겪고 있습니다. http://jsfiddle.net/rgE2j/2/ :

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);  

당신은 여기 예제 코드의 풀러 세트를 볼 수 있습니다 : 이것은 내가 (큰 장면의 맥락에서 촬영) 스프라이트를 위해 사용하고 있습니다 것입니다.

아무런 도움이 필요하지 않습니다.

감사합니다, 피터

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);