I just started to learn PixiJs and exploring the MeshGeometry but unable to make it work.
I need to use an image as texture on a triangle. Please advice me on what should I do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/8.3.0/pixi.min.js"></script>
</head>
<body>
<script>
(async () => {
// Create the PixiJS application
const app = new PIXI.Application();
// Initialize the application
await app.init({
width: 800,
height: 600,
backgroundColor: 0x1099bb,
});
// Append the canvas to the DOM
document.body.appendChild(app.canvas);
// Load the texture
const texture = await PIXI.Assets.load('../images/pimple.png');
// Define triangle vertices
const vertices = new Float32Array([
400, 0, // Vertex 1 (x, y)
0, 600, // Vertex 2 (x, y)
800, 600, // Vertex 3 (x, y)
]);
// Define texture coordinates (UV mapping)
const uvs = new Float32Array([
0.5, 0, // UV for Vertex 1
0, 1, // UV for Vertex 2
1, 1, // UV for Vertex 3
]);
// Define the indices for the triangle
const indices = new Uint16Array([0, 1, 2]);
// Create the geometry (simplified in v8)
const geometry = new PIXI.MeshGeometry({indices:indices,positions:vertices,uvs:uvs});
console.log(geometry)
// Create the mesh using the geometry and texture
const mesh = new PIXI.Mesh(geometry, texture);
console.log(mesh)
// Add the mesh to the stage
app.stage.addChild(mesh);
})();
</script>
</body>
</html>
I’m expecting a triangle with a pimple texture on it. Thank you.
New contributor
Shah Hafiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.