在 THREE.js 中为 Canvas 广告牌制作动画答案

【问题标题】：Animating Canvas Billboard in THREE.js在 THREE.js 中为 Canvas 广告牌制作动画
【发布时间】：2012-09-09 03:57:39
【问题描述】：

大家，

我正在尝试对映射到平面（如广告牌）的基于 Canvas 的纹理进行动画处理。我特意加入了 material.needsUpdate 和 texture.needsUpdate，但我仍然无法让纹理栩栩如生。我还加入了一个旋转立方体，只是为了让我知道动画例程在某种程度上发挥了作用。

代码如下：

if ( window.innerWidth === 0 ) { window.innerWidth = parent.innerWidth; window.innerHeight = 父级.innerHeight; } var 相机、场景、渲染器； var 网格、几何、材料； var light、sign、animTex； var 画布，上下文；在里面（）; 动画（）；函数初始化（）{ camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1200); 相机.位置.z = 700; 场景 = 新的三个场景（）；材料=新的三。MeshLambertMaterial（ {颜色：0x885522 ，线框：假，透支：假 }); 几何=新的三立方几何（80、120、100、1、1、1）；网格=新的三。网格（几何，材料）；标志 = 创建标志（）；光 = 新的三。方向光（0xFFFFFF，3.0）； light.position = new THREE.Vector3(5,10,7); light.target = new THREE.Vector3(0,0,0); 场景.add（网格）；场景.add（符号）；场景.添加（灯光）；渲染器 = 新的 THREE.CanvasRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } 函数 createSign() { canvas = document.createElement("canvas"); 上下文 = canvas.getContext("2d"); 画布.宽度 = 200; 画布.高度 = 200; 上下文 = canvas.getContext("2d"); var texture = new THREE.Texture(canvas); 纹理.needsUpdate = true; var material = new THREE.MeshBasicMaterial({ map : texture, overdraw: true }); material.needsUpdate = true; var mesh = new THREE.Mesh(new THREE.PlaneGeometry(200, 200), material); 网格.doubleSided = true; 返回网格； } 函数动画（）{ var time = Date.now()*0.01; var sinTime = Math.sin ( 时间 * 0.05 ) * 100; var cosTime = Math.cos ( 时间 * 0.05 ) * 100; mesh.rotation.y = sinTime*0.01; requestAnimationFrame( 动画 ); context.fillStyle="黑色"; context.fillRect(0,0,canvas.width,canvas.height); context.fillStyle="白色"; context.fillRect ( (canvas.width/2) + sinTime, (canvas.height/2) + cosTime, 20, 20 ) renderer.render（场景，相机）； }

这会运行，但我似乎无法更新 Canvas 纹理材质。我忽略了什么？非常感谢您的任何指点！

【问题讨论】：

标签： animation three.js textures

【解决方案1】：

将其放在您的 render() 呼叫之前：

sign.material.map.needsUpdate = true;

小提琴：http://jsfiddle.net/pPKVa/

【讨论】：

【解决方案2】：

needsUpdate 标志在每次使用纹理时（每个渲染循环）都会重置（为 false），因此需要在渲染循环中将其设置为 true（在渲染调用之前，否则它将成为框架关闭）。所以在你的例子中，把sign.material.map.needsUpdate = true放在renderer.render( scene, camera )之前。不需要texture.needsUpdate = true 和material.needsUpdate = true。

另外，您只需要在纹理上设置needsUpdate 标志，因为材质属性不会改变。

【讨论】：