78 lines
3.1 KiB
HTML
78 lines
3.1 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.14.4.png'
|
|
import blocksStates from '../prismarine-viewer/public/blocksStates/1.14.4.json'
|
|
|
|
// const block = {
|
|
// name: 'oak_sign',
|
|
// variant: 0,
|
|
// elem: 1,
|
|
// face: 'up'
|
|
// }
|
|
const block = {
|
|
name: 'oak_leaves',
|
|
variant: 0,
|
|
elem: 0,
|
|
face: 'north'
|
|
}
|
|
const model = Object.entries(blocksStates[block.name].variants).find((a, i) => typeof block.variant === 'number' ? i === block.variant : a === block.variant)[1]
|
|
console.log(model)
|
|
//@ts-ignore
|
|
const element = model.model.elements[block.elem]
|
|
console.log(element)
|
|
const textureUv = element.faces[block.face].texture
|
|
|
|
const canvas = document.createElement('canvas')
|
|
canvas.style.imageRendering = 'pixelated'
|
|
document.body.appendChild(canvas)
|
|
const factor = 50
|
|
const modelWidth = element.to[0] - element.from[0]
|
|
const modelHeight = element.to[1] - element.from[1]
|
|
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 = () => {
|
|
//@ts-ignore
|
|
// ctx.drawImage(img, img.width * textureUv.u + 350, img.height * textureUv.v, -132, 16, 0, 0, canvas.width, canvas.height)
|
|
ctx.canvas.width = img.width
|
|
ctx.canvas.height = img.height
|
|
ctx.drawImage(img, 0, 0)
|
|
console.log('x', img.width * textureUv.u / 16, 'y', img.height * textureUv.v / 16, 'w', img.width * textureUv.su, 'h', img.height * textureUv.sv)
|
|
// highlight
|
|
ctx.fillStyle = 'rgba(255, 0, 0, 0.9)'
|
|
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>
|