Question

很抱歉，如果这是Noob问题。

我一直在尝试使用动态生成的canvas元素作为精灵为使用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);

Canvas和SpriteMaterial

1 个答案: