animation - THREE.js中的动画 Canvas 广告牌

Question

每个人，

我正在尝试对基于Canvas的纹理进行动画处理，该纹理映射到平面上，如广告牌。我已经指出要包括 material.needsUpdate 和 texture.needsUpdate ，但是我仍然无法使纹理栩栩如生。我还包括一个旋转的立方体，所以我知道动画例程在某种程度上起作用。

这是代码:




如果(window.innerWidth === 0){window.innerWidth = parent.innerWidth; window.innerHeight = parent.innerHeight; }

var相机，场景，渲染器；
可变网格，几何形状， Material ；
var light，sign，animTex；
var canvas，context;

在里面();
animate();

函数init(){

camera = new THREE.PerspectiveCamera(50，window.innerWidth/window.innerHeight，1，1200);
camera.position.z = 700;

场景=新的THREE.Scene();

Material =新的THREE.MeshLambertMaterial(
{颜色:0x885522
，线框:假
， overdraw :假
})；
geometry = new THREE.CubeGeometry(80，120，100，1,1,1);
mesh = new THREE.Mesh(geometry，material);

符号= createSign();

light =新的THREE.DirectionalLight(0xFFFFFF，3.0);
light.position =新的THREE.Vector3(5,10,7);
light.target =新的THREE.Vector3(0,0,0);

scene.add(mesh);
scene.add(sign);
scene.add(light);

renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth，window.innerHeight);
document.body.appendChild(renderer.domElement);

}
函数createSign(){
canvas = document.createElement(“canvas”);
context = canvas.getContext(“2d”);
canvas.width = 200;
canvas.height = 200;
context = canvas.getContext(“2d”);
var texture = new THREE.Texture(canvas);
texture.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);
mesh.doubleSided = true;
返回网格；
}

函数animate(){

var time = Date.now()* 0.01;
var sinTime = Math.sin(time * 0.05)* 100;
var cosTime = Math.cos(time * 0.05)* 100;

mesh.rotation.y = sinTime * 0.01;

requestAnimationFrame(animate);
context.fillStyle =“black”;
context.fillRect(0,0，canvas.width，canvas.height);
context.fillStyle =“white”;
context.fillRect((canvas.width/2)+ sinTime，(canvas.height/2)+ cosTime，20，20)
renderer.render(场景，相机);
}

这可以运行，但是我似乎无法更新Canvas纹理 Material 。我忽略了什么？非常感谢您的指导!

Answer 1

将此放在您的render()调用之前:

sign.material.map.needsUpdate = true;

fiddle :http://jsfiddle.net/pPKVa/