javascript - three.js 边缘和文本在旋转时呈锯齿状/模糊

我是 three.js 初学者。尝试将 html Canvas 用作平面几何体的纹理。没有旋转时工作正常。旋转时,a) 网格的外边缘变得参差不齐(图像中的边缘/线条很好)和 b) 文本变得模糊。

我必须怎么做才能使外边缘和文本保持清晰?

我的纹理是二次方 (128 x 512)。打开抗锯齿没有帮助。

Here is a screenshot without rotation

And here with rotation .

代码如下所示:

                    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   

非常感谢您的帮助!

最佳答案

尽管您发布这篇文章已经有很长时间了,但我有解决方案,以防其他人遇到同样的问题。

将此添加到您的渲染器:

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

https://stackoverflow.com/questions/33376874/

相关文章:

r - Shiny 应用程序的初始加载没有更新

php - Wordpress 如何向所有 SETCOOKIE() 函数添加 httponly 和安

ios - AVSampleBufferDisplayLayer : change videoGra

android - 哪个平台支持BLE数据包长度扩展功能?

Java - 系统进程监听器

python - 没有名为 csv 的模块

multithreading - 每个连接的 Netty 多线程

python - 我们如何使用 SQL-esque "LIKE"标准连接两个 Spark SQL 数

java - 如何为 Selenium Grid 中的 session 提供无限空闲时间,但清理断开

nginx - Kong 拒绝将自定义插件识别为已启用