Threejs CanvasTexture размыт, а исходный холст - нет ⇐ Javascript

[Anonymous]

Я использую холст в качестве текстуры для рендеринга плоскости, но CanvasTexture на плоскости немного размыт. Как исправить размытую часть?
отобразить полученное изображение
Вот код JS:
html-код картинка
картинка кода js

Код: Выделить всё

import * as THREE from "three";

const image = document.getElementById('origin-img')

/* --- draw 【canvas】 by image--- */
const canvas = document.getElementById('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height)

/* --- threejs scene --- */
const itemWidth = 300
const itemHeight = 300

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(itemWidth / - 2, itemWidth / 2, itemHeight / 2, itemHeight / - 2, 0, 1000);
camera.position.z = 100;

const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('webgl'), antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(itemWidth, itemHeight);

// create a plane which uses 【canvas】 as texture
const geometry = new THREE.PlaneGeometry(image.width, image.height, 64, 64);
const material = new THREE.MeshBasicMaterial({ map: new THREE.CanvasTexture(
canvas,
THREE.Texture.DEFAULT_MAPPING,
THREE.ClampToEdgeWrapping,
THREE.ClampToEdgeWrapping,
THREE.LinearFilter,
THREE.LinearMipmapLinearFilter,
THREE.RGBAFormat,
THREE.UnsignedByteType,
1
)
});
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

renderer.render(scene, camera);

Пытался изменить параметры THREE.CanvasTexture, но все равно немного размыто.


Подробнее здесь: https://stackoverflow.com/questions/793 ... vas-is-not