Question

我是一名三人初学者。尝试将html画布作为纹理应用于平面几何体。没有旋转时工作正常。旋转时，a）网格的外边缘变得锯齿状（图像中的边/线很好），b）文字变得模糊。

我需要做些什么来保持外边和文字清晰？

我的纹理是2的幂（128 x 512）。转动抗锯齿并没有帮助。

代码如下所示：

＆＃13;

                    var eltTexture = toTexture2(d, this, go.w, go.Res.ow[0]);
                    
                    // map texture to material
                    var material = new THREE.MeshBasicMaterial(
                        { map : eltTexture } );
                    
                    //define sub image of texture to be applied to mesh
                    var cutout = [
                        new THREE.Vector2(0, (128 - go.Res.ow[0])/128),
                        new THREE.Vector2(go.w/512, (128 - go.Res.ow[0])/128),
                        new THREE.Vector2(go.w/512, 1),
                        new THREE.Vector2(0, 1)];                                  

                    // geometry and UV mapping              
                    var geometry = new THREE.PlaneGeometry (go.w, go.Res.ow[0]);
                    geometry.faceVertexUvs[0] = [];  // initialize
                    geometry.faceVertexUvs[0][0] = 
                        [cutout[3], cutout[0], cutout[2]];
                    geometry.faceVertexUvs[0][1] = 
                        [cutout[0], cutout[1], cutout[2]];
                    
                    var mesh = new THREE.Mesh( geometry, material );
                    mesh.position.set(d.threeX, d.threeY, d.threeX);
                    mesh.rotation.set(0,0.6,0);                
                    scene.add( mesh );

                });
                
                renderer.render( scene, camera );

＆＃13;

            function toTexture2 (d, svgNode, svgWidth, svgHeight){

                // step 1: serialize eltSVG to xml 
                var eltXML = new XMLSerializer().serializeToString(svgNode);
                eltXML = 'data:image/svg+xml;charset = utf8,' + eltXML;

                // step 2: draw eltXML to image
                var eltImage = document.body.appendChild(
                    document.createElement("img"));
                eltImage.id = "eltImage";
                eltImage.style.display = "none";
                eltImage.width = svgWidth;
                eltImage.height = svgHeight;
                eltImage.src = eltXML; 

                // step 3: draw image to canvas
                // NOTE: define canvas parameters position, width and 
                // height in html, NOT IN CSS, otherwise image
                // will become blurry - don't ask why!
                var eltCanvas = document.body.appendChild(
                    document.createElement("canvas"));
                eltCanvas.id = "eltCanv";
                eltCanvas.style.display = "none";
                eltCanvas.width = 512;
                eltCanvas.height = 128;
 
                // get context
                var ctx = eltCanvas.getContext("2d", {alpha: false}); 

                // draw svg element to canvas, not including portrait image
                ctx.drawImage(eltImage, parseInt(0), parseInt(0), 
                    svgWidth, svgHeight); 

                // draw portrait image to canvas
                var portrait = document.getElementById(d.nameConcat + "Img");
                ctx.globalAlpha = 0.6;  // opacity of portrait image
                ctx.drawImage(portrait, go.Res.strw[0], go.Res.strw[0], 
                    go.Res.iw[0], go.Res.iw[0]);

                var texture = new THREE.Texture(eltCanvas);
                texture.needsUpdate = true;  
                
                return texture;

            } // function toTexture2

＆＃13;

非常感谢您的帮助！

旋转时{three}的边缘和文字锯齿状/模糊

0 个答案: