69 lines
2.5 KiB
HTML
69 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<script type="module">
|
|
//@ts-check
|
|
import blockImg from '../prismarine-viewer/public/textures/1.20.2.png'
|
|
|
|
|
|
const canvas = document.createElement('canvas')
|
|
canvas.style.imageRendering = 'pixelated'
|
|
document.body.appendChild(canvas)
|
|
const factor = 50
|
|
const modelWidth = 16
|
|
const modelHeight = 16
|
|
canvas.width = modelWidth * factor
|
|
canvas.height = modelHeight * factor
|
|
// canvas.width = 16 * factor
|
|
// canvas.height = 16 * factor * 2
|
|
|
|
|
|
const ctx = canvas.getContext('2d')
|
|
//@ts-ignore
|
|
ctx.imageSmoothingEnabled = false
|
|
const img = new Image()
|
|
const img2 = new Image()
|
|
img.src = blockImg
|
|
img.onload = () => {
|
|
const textureIndex = 38
|
|
const texturesPerRow = img.width / 16
|
|
console.log('texturesPerRow', texturesPerRow)
|
|
const u = textureIndex % texturesPerRow
|
|
const v = Math.floor(textureIndex / texturesPerRow)
|
|
const textureUv = {
|
|
u: (u * 16) / img.width,
|
|
v: v * 16 / img.height,
|
|
su: 16 / img.width,
|
|
sv: 16 / img.height
|
|
}
|
|
//@ts-ignore
|
|
ctx.canvas.width = img.width
|
|
ctx.canvas.height = img.height
|
|
ctx.drawImage(img, 0, 0)
|
|
// highlight
|
|
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)'
|
|
ctx.fillRect(img.width * textureUv.u, img.height * textureUv.v, img.width * textureUv.su, img.height * textureUv.sv)
|
|
console.log('pos', img.width * textureUv.u - 16)
|
|
// ctx.drawImage(img, 0, 0, canvas.width, canvas.height / 2)
|
|
console.log('width;height texture', img.width * textureUv.su, img.height * textureUv.sv)
|
|
console.log('base su=sv', 16 / img.width)
|
|
}
|
|
let prev = 0
|
|
// setInterval(() => {
|
|
// ctx.clearRect(0, 0, canvas.width, canvas.height)
|
|
// ctx.drawImage(img, 0, 0)
|
|
// ctx.fillStyle = prev % 2 === 0 ? 'rgba(255, 0, 0, 0.9)' : 'rgba(0, 255, 0, 0)'
|
|
// prev += 1
|
|
// ctx.fillRect(img.width * textureUv.u, img.height * textureUv.v, img.width * textureUv.su, img.height * textureUv.sv)
|
|
// }, 500)
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|