在THREE.js动画画布广告牌-Java 学习之路

大家，

我已经提到了 material.needsUpdate ＆ texture.needsUpdate ，但我还包括一个旋转的立方体，所以我知道动画例程在某种程度上起作用 .

这是代码：

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

            var camera, scene, renderer;
            var mesh, geometry, material;
            var light, sign, animTex;
            var canvas, context;

            init();
            animate();

            function init() {

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

                scene = new THREE.Scene();

                material = new THREE.MeshLambertMaterial(
                    { color: 0x885522
                    , wireframe: false
                     , overdraw: false
                    } );
                geometry = new THREE.CubeGeometry( 80, 120, 100, 1,1,1);
                mesh = new THREE.Mesh( geometry, material );

                sign = createSign();

                light = new THREE.DirectionalLight(0xFFFFFF, 3.0);
                light.position = new THREE.Vector3(5,10,7);
                light.target = new 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 );

            }
            function 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;
                return mesh;
            }

            function 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( scene, camera );
            }

这运行，但我似乎无法让Canvas纹理材质更新 . 我忽略了什么？非常感谢任何指针！

2 回答

7
在 render() 电话之前放置此权限：
```
sign.material.map.needsUpdate = true;
```
小提琴：http://jsfiddle.net/pPKVa/
回复于 2024-04-28T08:52:07+08:00
2

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

此外，您只需在纹理上设置 needsUpdate 标志，因为材料属性不会更改 .

回复于 2024-04-28T08:52:07+08:00

在THREE.js动画画布广告牌

2 回答

相关问题