ThreeJS 캔버스에 텍스트를 텍스처로 렌더링 한 다음 평면에 적용 하시겠습니까?

Question

저는 하루 종일 질감이있는 평면에 적용 할 수 있도록 텍스트가 포함 된 2 차원 텍스처를 절차 적으로 생성하는 방법을 찾고있었습니다. 기본적으로 이미지 편집 프로그램에서 만든 텍스처를 사용하지 않고 WebGL 페이지에서 어떤 텍스트가 나타나는지 변경할 수 있기를 원합니다. 나는 완전히 2 차원 페이지처럼 쉽게 페이지의 내용을 편집 할 수 있도록 목표를 설정하고 코드와 빵을 편집하면됩니다.

내가 이것을 달성하는 데 가장 눈을 뜨는 방법은 텍스트를 빈 캔버스에 CSS로 렌더링하고 그 캔버스를 ThreeJS가 매우 쉽게 만들 수있는 질감으로 사용하고 그 텍스처를 내가 할 수있는 평면에 적용하는 것입니다 어디서든 3D 환경에서 작업 할 수 있습니다. 이 예를 내 필요에 맞게 조정하여이 작업을 시도했습니다. http://jsfiddle.net/sSD65/28/

그러나 어딘가에 오류가 있음을 나타내는 완전히 검은 색 페이지로 끝납니다. 내 삶을 위해 내가 할 수없는 오류가 찾아서 고쳐줍니다. ThreeJS에 대한 경험이 부족하고 사실 Javascript로 인해 뭔가를 놓친 것 같은 느낌이 들었습니다. 그래서 여기 당신의 도움을 요청하기 위해 왔습니다.

정말 도움을 주셔서 감사합니다. 여기에 링크가 있습니다. 폴더에서 이미지를로드하고 있기 때문에 로컬로 호스팅하지 않고 제대로 볼 수 있다고 생각하지 않지만, 파이썬은 훌륭합니다. 해당 폴더를 탐색 한 후 콘솔에서 Python -m SimpleHTTPServer를 사용하면 "http : // localhost : 8000/homepage.html"에서 액세스 할 수 있습니다. https://dl.dropbox.com/u/40043006/WebGLTest.zip

Answer 1

This 이 캔버스 '크기로 출력 텍스트 크기를 설정처럼 ... 몇 가지 작업을 필요로

//create image 
var bitmap = document.createElement('canvas'); 
var g = bitmap.getContext('2d'); 
bitmap.width = 100; 
bitmap.height = 100; 
g.font = 'Bold 20px Arial'; 

g.fillStyle = 'white'; 
g.fillText(text, 0, 20); 
g.strokeStyle = 'black'; 
g.strokeText(text, 0, 20); 

// canvas contents will be used for a texture 
var texture = new THREE.Texture(bitmap) 
texture.needsUpdate = true; 

: 텍스처로 캔버스에서 텍스트를 추가하는 간단한 코드입니다.