专栏首页代码编写世界three.js中场景模糊、纹理失真的问题

three.js中场景模糊、纹理失真的问题

目录

  • 1. 概述
  • 2. 方案
    • 2.1. 开启反走样
    • 2.2. 开启HiDPI设置
  • 3. 结果
  • 4. 参考

1. 概述

在three.js场景中,有时会遇到场景模糊,纹理失真的现象,似乎three.js并没有用到纹理图片应有的分辨率。可以通过相关设置来解决这个问题。

2. 方案

2.1. 开启反走样

three.js创建的WebGLRenderer对象有抗锯齿选项的支持:

var renderer = new THREE.WebGLRenderer({
    antialias: true,     //抗锯齿
});

这个选项默认是关闭的,所以需要显式开启一下。

2.2. 开启HiDPI设置

如果开启抗锯齿后仍然显示比较模糊,那么可能就是使用的是HiDPI (High Dots Per Inch) 设备显示造成的,HiDPI设备能在较小尺寸下显示出较高分辨率,也就是每一个屏幕上的物理像素其实是由多个像素显示出来的,所以需要设置一下设备像素比率:

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

其实关于HiDPI的讨论还是挺多的,比如说有个缩放与布局设置:

这个设置会更改window.devicePixelRatio的值,如果程序不做相关的设置,那么程序的UI显示出来就会是模糊的。现代程序组件一般都会自动做出相关的调整,在WebGL中则需要显式设置一下。

3. 结果

测试代码:

'use strict';

function init() {
    //console.log("Using Three.js version: " + THREE.REVISION);   

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    var scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);

    // create a render and set the size
    var renderer = new THREE.WebGLRenderer({
        antialias: true,     //抗锯齿
    });
    renderer.setClearColor(new THREE.Color(0x000000));    
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    // add the output of the renderer to the html element
    document.getElementById("webgl-output").appendChild(renderer.domElement);


    var loader = new THREE.TextureLoader();
    loader.setCrossOrigin('Anonymous');
    var basePath = "1.jpg";
    loader.load(basePath, function (texture) {
        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(2, 2);
        // var planeMaterial = new THREE.MeshBasicMaterial({
        //     color: 0xAAAAAA
        // });
        var planeMaterial = new THREE.MeshBasicMaterial({
            map: texture
        });

        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // add the plane to the scene
        scene.add(plane);

        renderer.render(scene, camera);
    });
}

关闭反走样以及HiDPI:

开启反走样以及HiDPI之后显示效果有所改善:

4. 参考

  1. 关于ThreeJS场景失真的问题
  2. 关于three.js 抗锯齿
  3. HiDPI (简体中文)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • three.js中的矩阵变换(模型视图投影变换)

    我在《WebGL简易教程(五):图形变换(模型、视图、投影变换)》这篇博文里详细讲解了OpenGL\WebGL关于绘制场景的图形变换过程,并推导了相应的模型变换...

    charlee44
  • three.js中帧缓存的使用

    在网上查阅了一下three.js关于帧缓存的使用,感觉很多都是关于three.js中后处理通道的使用的。后处理通道确实使用FBO实现的,但其实我就是想获取某个时...

    charlee44
  • WebGL简易教程(九):综合实例:地形的绘制

    在上一篇教程《WebGL简易教程(八):三维场景交互》中,给三维场景加入了简单的交互,通过鼠标实现场景的旋转和缩放。那么在这一篇教程中,综合前面的知识,可以做出...

    charlee44
  • 3d弹弹球(加强版)

    上篇文章带读者完成了一个3d弹弹球,本文我们来继续看看这个3d弹弹球的一个增强版,即给弹弹球添加上光线和阴影。

    江南一点雨
  • 如何一步一步用DDD设计一个电商网站(七)—— 实现售价上下文

    上一篇我们已经确立的购买上下文和销售上下文的交互方式,传送门在此:http://www.cnblogs.com/Zachary-Fan/p/DDD_6.htm...

    Zachary_ZF
  • 打造属于自己的支持版本迭代的Asp.Net Web Api Route

        在目前的主流架构中,我们越来越多的看到web Api的存在,小巧,灵活,基于Http协议,使它在越来越多的微服务项目或者移动项目充当很好的service...

    脑洞的蜂蜜
  • 前端图片主题色提取

    对于需要根据用户“定制”、“生成”的图片,这样的方式就有了一个上传图片---->后端计算---->返回结果的时间,等待时间也许就比较长了。由此,我尝试着利用 c...

    QQ音乐前端团队
  • javascript dom学习笔记

    http://blog.csdn.net/zhoulenihao/article/details/11099455

    bear_fish
  • JUnit 4 与 JUnit 3

    JUnit 由 Kent Beck 和 Erich Gamma 开发,几乎毫无疑问是迄今所开发的最重要的第三方 Java 库。正如 Martin Fowler ...

    py3study
  • JS 变量作用域导致的一个坑

    路过君

扫码关注云+社区

领取腾讯云代金券