9

每个人，

我正在尝试对映射到平面（如广告牌）的基于 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 纹理材质。我忽略了什么？非常感谢任何指点！

4

2 回答 2

8

将其放在您的render()电话之前：

sign.material.map.needsUpdate = true;

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

于 2012-09-16T21:24:19.303 回答
3

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

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

于 2017-11-22T23:51:19.087 回答