threejs中的纹理未更新

Question

我正在使用threejs编辑器作为某些threejs工作的基础。 当用户将鼠标悬停在某些元素上时，我试图显示一些工具提示。 为了达到这个目的，我使用了在精灵上作为纹理渲染的画布。

// create a canvas element
var canvas1 = document.createElement('canvas');
var context1 = canvas1.getContext('2d');
context1.font = "Bold 20px Arial";
context1.fillStyle = "rgba(0,0,0,0.95)";
context1.fillText('Hello, world!', 0, 20);

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

// use the texture as material
var spriteMaterial = new THREE.SpriteMaterial({
    map: texture1,
    useScreenCoordinates: false
});

// create the sprite and add it tho the scene
var sprite1 = new THREE.Sprite(spriteMaterial);
sprite1.scale.set(1000, 500, 1.0);
sprite1.position.set(50, 50, 0);
scene.add(sprite1);

var i = 0;
// change the canvas' content
setInterval(function () {
    context1.clearRect(0, 0, canvas1.width, canvas1.height);
    var message = 'test' + i++;
    context1.fillText(message, 4, 20);
    texture1.needsUpdate = true;
}, 1000)

显示“ test0”，但精灵不会更新。 如何更新精灵上的文字？ 我在这里缺少缓存无效吗？

Answer 1

为什么在3D画布上渲染文本框？ 通过将3D对象的位置投影到页面的2D上下文中，将IMO定位到2D html对象会更好。

好处是不会降低任何渲染性能，并且您可以在信息框中使用普通的CSS / HTML样式。

在此处查看一个很好的示例，说明如何实现此目的 。

属于该堆栈的 另一个 溢出答案 。 这样简单：

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

但是，如果您进行谷歌搜索，则可以轻松找到更多示例...

这是个摆弄的小提琴 。

Answer 2

我认为这是行不通的，因为您尚未设置画布的高度和宽度。

canvas1.width = 256;
canvas1.height = 256;

这行也是一个问题： context1.fillStyle = "rgba(0.0,0,0,0.95)";
我将其更改为： context1.fillStyle = '#ff0000'; 为了我的工作

这是实现代码的小提琴 ，只是在画布上增加了高度和宽度并更改了fillStyle

如果满足您的需求，Wilt的答案可能是更好的选择。

Answer 3

编辑：我是个白痴。 这个问题2岁了。

似乎对我有用...确定不忽略控制台中的某些错误吗？ 您是否在setInterval中设置了断点以确保它被调用？

我确实必须将更新移至renderloop，因为似乎没有为SO片段定义setInterval，但请在此处查看：

 var renderer = new THREE.WebGLRenderer(); var w = 300; var h = 200; renderer.setSize(w, h); document.body.appendChild(renderer.domElement); var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 45, // Field of view w / h, // Aspect ratio 0.1, // Near 10000 // Far ); camera.position.set(15, 10, 15); camera.lookAt(scene.position); controls = new THREE.OrbitControls(camera, renderer.domElement); var light = new THREE.PointLight(0xFFFF00); light.position.set(20, 20, 20); scene.add(light); var light1 = new THREE.AmbientLight(0x808080); light1.position.set(20, 20, 20); scene.add(light1); var sphereGeom = new THREE.SphereGeometry(5, 16, 16); for (var i = 0; i < sphereGeom.vertices.length; i++) { var v = sphereGeom.vertices[i]; if (vy < 0) vy = 0; } sphereGeom.verticesNeedUpdate = true; sphereGeom.computeFaceNormals(); sphereGeom.computeVertexNormals(); var material = new THREE.MeshLambertMaterial({ color: 0x808080 }); var mesh = new THREE.Mesh(sphereGeom, material); scene.add(mesh); renderer.setClearColor(0xdddddd, 1); // create a canvas element var canvas1 = document.createElement('canvas'); var context1 = canvas1.getContext('2d'); context1.font = "Bold 20px Arial"; context1.fillStyle = "rgba(0,0,0,0.95)"; context1.fillText('Hello, world!', 0, 20); // canvas contents will be used for a texture var texture1 = new THREE.Texture(canvas1) texture1.needsUpdate = true; // use the texture as material var spriteMaterial = new THREE.SpriteMaterial({ map: texture1, useScreenCoordinates: false }); // create the sprite and add it tho the scene var sprite1 = new THREE.Sprite(spriteMaterial); sprite1.scale.set(40, 20, 1.0); sprite1.position.set(-5, 0, -5); scene.add(sprite1); var i = 0; (function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); context1.clearRect(0, 0, canvas1.width, canvas1.height); var message = 'test' + i++; context1.fillText(message, 4, 20); texture1.needsUpdate = true; })(); 

 <script src="https://threejs.org/build/three.min.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>