Canvas 渲染一次后纹理不更新

Canvas 渲染一次后纹理不更新,canvas,three.js,Canvas,Three.js,我试图按照[1]中给出的示例创建鼠标工具提示。但纹理在第一次渲染后似乎不会更新。我使用的是r73,示例使用的是r60。我似乎无法得到一个类似的代码工作可能有一个修订之间的变化 我已经附上下面的代码。drawLabel创建元素。我试图在鼠标移动时更新工具提示的文本。在鼠标移动事件中,我尝试更新画布的文本,但它不更新。我只得到工具提示“0”(计数初始化为)。我是否遗漏了什么,或者r73有什么变化。几天来,我一直在努力解决这个问题,但运气不佳:( } [1] 我找到了问题所在。似乎r73中的此功能已被

我试图按照[1]中给出的示例创建鼠标工具提示。但纹理在第一次渲染后似乎不会更新。我使用的是r73,示例使用的是r60。我似乎无法得到一个类似的代码工作可能有一个修订之间的变化

我已经附上下面的代码。drawLabel创建元素。我试图在鼠标移动时更新工具提示的文本。在鼠标移动事件中,我尝试更新画布的文本,但它不更新。我只得到工具提示“0”(计数初始化为)。我是否遗漏了什么,或者r73有什么变化。几天来,我一直在努力解决这个问题,但运气不佳:(

}


[1]

我找到了问题所在。似乎r73中的此功能已被破坏。我将修订版更新为r74,并开始工作。添加了一个答案供其他人参考

function drawLabel(){
// create a canvas element
canvas1 = document.createElement('canvas');
context1 = canvas1.getContext('2d');
context1.font = "Bold 20px Arial";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText('x', 0, 20);

// canvas contents will be used for a texture
texture1 = new THREE.Texture(canvas1)
////////////////////////////////////////

var spriteMaterial = new THREE.SpriteMaterial( { map: texture1 } )  ;

sprite1 = new THREE.Sprite( spriteMaterial );
sprite1.scale.set(1,1,1);
sprite1.position.set( 0.05, 0.3,-0.12 );
scene3d.add(sprite1);
}

function onDocumentMouseMove( event ) {
// update sprite position
sprite1.position.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.2 );
context1.clearRect(0,0,640,480);
context1.fillStyle = "rgba(0,0,0,0.95)"; // black border
context1.fillRect( 0,0,88,20+8);
context1.fillStyle = "rgba(255,255,255,0.95)"; // white filler
context1.fillRect( 2,2, 94,20+4 );
context1.fillStyle = "rgba(0,0,0,1)"; // text color
context1.fillText(count, 4,20 );
count = count + 1;
texture1.needsUpdate = true;
// update the mouse variable
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
renderer.render( scene3d, camera );