画布和精灵材质 [英] Canvas and SpriteMaterial
问题描述
对不起,如果这是一个菜鸟问题.
Sorry if this is a Noob question.
我一直在尝试使用动态生成的画布元素作为精灵为在three.js 中创建的时间线添加标签.时间线部分渲染得很好,但我很难让画布精灵渲染.这是我用于精灵的内容(从更大场景的上下文中取出):
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);
您可以在此处查看更完整的示例代码集:http://jsfiddle.net/rgE2j/2/.
You can see a fuller set of example code here: http://jsfiddle.net/rgE2j/2/.
感谢任何帮助.
谢谢,彼得
推荐答案
好吧,你有几个错误.我将相机移近并进行了一些其他更改,请注意.此外,小提琴使用的是旧版本的库.
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.
更新小提琴:http://jsfiddle.net/rgE2j/141/
three.js r.54
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);
这篇关于画布和精灵材质的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!