Question

我正在尝试按照[1]中给出的示例创建鼠标工具提示。但是第一次渲染后纹理似乎没有更新。我使用r73，例子使用r60。我似乎无法获得类似的代码，也许修订版之间有变化。

我已附上以下代码。 drawLabel创建元素。我试图在鼠标移动时更新工具提示的文本。在鼠标移动事件我尝试更新画布的文本，但它不会更新。我只得到工具提示为＆＃34; 0＆＃34; （将计数初始化为）。我错过了什么或r73有一些变化。我一直试图弄清楚这几天没有运气:(。

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

}

[1] http://stemkoski.github.io/Three.js/Mouse-Tooltip.html

Answer 1

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

纹理渲染一次后不更新

1 个答案: