旋转时有三条.js边缘和锯齿状/模糊的文本

Question

我是three.js的初学者。尝试将html画布作为纹理应用于平面几何体。在没有旋转的情况下工作良好。旋转时，a）网格的外部边缘会变得锯齿状（图像中的边缘/线很细），b）文本会变得模糊。

我必须做些什么才能保持外边缘和文本的清晰？

我的纹理是二次幂（128 x 512）。启用抗锯齿没有帮助。

这是一张没有旋转的屏幕截图

这里有旋转。

代码如下：

                    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 );  

            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   

非常感谢您的帮助！

Answer 1

尽管你已经很久没有发布这篇文章了，但我有解决方案，以防其他人遇到同样的问题。

将其添加到渲染器中：

const renderer = new THREE.WebGLRenderer({antialias: true});