javascript - Canvas and SpriteMaterial - Stack Overflow

admin管理员组

文章数量:1328987

Sorry if this is a Noob question.

I've been trying to add labels to a timeline created in three.js using dynamically generated canvas elements as sprites. The timeline part is rendering great, but I am having difficulty getting the canvas sprites to render. This is what i'm using for the sprites (taken out of the context of the larger scene):

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

You can see a fuller set of example code here: /.

Any help at all is appreciated.

Thanks, peter

Sorry if this is a Noob question.

I've been trying to add labels to a timeline created in three.js using dynamically generated canvas elements as sprites. The timeline part is rendering great, but I am having difficulty getting the canvas sprites to render. This is what i'm using for the sprites (taken out of the context of the larger scene):

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

You can see a fuller set of example code here: http://jsfiddle/rgE2j/2/.

Any help at all is appreciated.

Thanks, peter

• javascript
• three.js

Share Improve this question Follow edited Dec 31, 2012 at 17:01 Henrik Andersson 47.2k1616 gold badges100100 silver badges9494 bronze badges asked Dec 31, 2012 at 16:41 dethtron5000dethtron5000 10.8k11 gold badge3232 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Well, you have several mistakes. I moved the camera closer and made some other changes, which are noted. Also, the fiddle was using an old version of the library.

Updated fiddle: http://jsfiddle/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);    

本文标签： javascriptCanvas and SpriteMaterialStack Overflow