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

[Anonymous]

Я использую холст в качестве текстуры для рендеринга плоскости, но CanvasTexutre на плоскости немного размыт. Как это исправить?


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






Origin Image





Draw canvas by image





In threejs, create a plane which uses canvas as a texture





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