9

みんな、

ビルボードのように平面にマッピングされた Canvas ベースのテクスチャをアニメーション化しようとしています。material.needsUpdateとtexture.needsUpdateを含めることを強調しましたが、テクスチャを生き生きとさせることはまだできません。アニメーション ルーチンがある程度機能していることがわかるように、回転キューブも含めました。

コードは次のとおりです。

    
      
      
        if ( window.innerWidth === 0 ) { window.innerWidth = 親.innerWidth; window.innerHeight = 親.innerHeight; }

            var カメラ、シーン、レンダラー;
            var メッシュ、ジオメトリ、マテリアル。
            var light, sign, animTex;
            var キャンバス、コンテキスト;

            初期化（）;
            アニメイト();

            関数init() {

                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1200 );
                カメラの位置.z = 700;

                シーン = 新しい THREE.Scene();

                material = 新しい THREE.MeshLambertMaterial(
                    { 色: 0x885522
                    、ワイヤーフレーム: false
                     、オーバードロー: false
                    } );
                ジオメトリ = 新しい THREE.CubeGeometry( 80, 120, 100, 1,1,1);
                メッシュ = 新しい THREE.Mesh( ジオメトリ、マテリアル );

                サイン = createSign();

                光 = 新しい THREE.DirectionalLight(0xFFFFFF, 3.0);
                light.position = 新しい THREE.Vector3(5,10,7);
                light.target = 新しい THREE.Vector3(0,0,0);

                scene.add(メッシュ);
                scene.add(サイン);
                scene.add(ライト);

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

            }
            関数 createSign() {
                canvas = document.createElement("canvas");
                context = canvas.getContext("2d");
                キャンバス幅 = 200;
                キャンバスの高さ = 200;
                context = canvas.getContext("2d");              
                var texture = new THREE.Texture(キャンバス);
                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;
                メッシュを返します。
            }

            関数アニメーション（）{

                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 に答える