Question

我试图使用三个js在每个顶点上制作一个带有图像的旋转二十面体，但图像看起来很模糊。谁能帮帮我吗？ js小提琴链接：https://jsfiddle.net/prisoner849/b2tncLh8/

<div id="container"></div>

var $container = $('#container');
var renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
var camera = new THREE.PerspectiveCamera(80, 1, 0.1, 10000);
var scene = new THREE.Scene();
var Ico;

scene.add(camera);
renderer.setSize(576, 576);

// Making the canvas responsive
function onWindowResize() {

  var screenWidth = $(window).width();
  if (screenWidth <= 479) {
    renderer.setSize(300, 300);
  } else if (screenWidth <= 767) {
    renderer.setSize(400, 400);
  } else if (screenWidth <= 991) {
    renderer.setSize(500, 500);
  } else if (screenWidth <= 1200) {
    renderer.setSize(450, 450);
  } else if (screenWidth <= 1366) {
    renderer.setSize(550, 550);
  }
  camera.updateProjectionMatrix();

}
onWindowResize();
window.addEventListener('resize', onWindowResize, false);


$container.append(renderer.domElement);

// Camera
camera.position.z = 200;

// Material
var greyMat = new THREE.MeshPhongMaterial({
  color: new THREE.Color("rgb(125,127,129)"),
  emissive: new THREE.Color("rgb(125,127,129)"),
  specular: new THREE.Color("rgb(125,127,129)"),
  shininess: "100000000",
  shading: THREE.FlatShading,
  transparent: 1,
  opacity: 1
});

var L2 = new THREE.PointLight();
L2.position.z = 1900;
L2.position.y = 1850;
L2.position.x = 1000;
scene.add(L2);
camera.add(L2);

var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(125, 1), greyMat);
Ico.rotation.z = 0.5;
scene.add(Ico);
var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
trackballControl.rotateSpeed = 1.0; 
trackballControl.noZoom = true;

// sprites
var txtLoader = new THREE.TextureLoader();
txtLoader.setCrossOrigin("");
var textures = [
    "https://threejs.org/examples/textures/UV_Grid_Sm.jpg",
  "https://threejs.org/examples/textures/colors.png",
  "https://threejs.org/examples/textures/metal.jpg"
];
var direction = new THREE.Vector3();
console.log(Ico.geometry.vertices.length);
Ico.geometry.vertices.forEach(function(vertex, index){
    var texture = txtLoader.load(textures[index % 3]);
    var spriteMaterial = new THREE.SpriteMaterial({map: texture});
    var sprite = new THREE.Sprite(spriteMaterial);
  sprite.scale.setScalar(10);
  direction.copy(vertex).normalize();
  sprite.position.copy(vertex).addScaledVector(direction, 10);
  Ico.add(sprite);
});

function update() {
  Ico.rotation.x += 2 / 500;
  Ico.rotation.y += 2 / 500;
}

// Render
function render() {
  trackballControl.update();
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  update();
}
render();

Answer 1

所以我猜测是因为你经常缩放纹理，你想知道如何让它更块状和更模糊？如果是这种情况，对于每个加载的纹理，您应该设置texture.magFilter = THREE.NearestFilter。

magFilter指定当纹理的一部分占用比纹理的原始分辨率更多的像素时的行为。

NearestFilter基本上返回Math.floor（UV.x * width）像素的UV坐标的颜色。因此，如果你的分辨率为64像素，那么它的颜色将分为64个区块和64个区域。很好，像素化。

使用默认的线性滤波器 - 它将在像素完美值之间进行渲染，从而为您提供模糊效果。 The documentation for THREE.Texture can give you more info on things to try if you get stuck.

See in action.

三个Js - 如何修复二十面体顶点上的模糊图像

1 个答案: