I’m using canvas as a texture to render a plane, but canvasTexutre
on the plane is a little blurry. How can I fix that?
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);
<div class="app" style="display: flex; justify-content: space-between; width: 1200px;">
<div class="item-container">
<div class="item">
<img id='origin-img' src="./origin-texture.png">
</div>
<div class="caption">Origin Image</div>
</div>
<div class="item-container">
<div class="item">
<canvas id="canvas"></canvas>
</div>
<div class="caption">Draw canvas by image</div>
</div>
<div class="item-container">
<div class="item">
<canvas id="webgl"></canvas>
</div>
<div class="caption">In threejs, create a plane which uses canvas as a texture</div>
</div>
</div>
<script type="module" src="./index.js"></script>