I need to build figures as in the attachment. I want to use BufferGeometry. The number of vertices is variable and the figure has holes ... Will it be possible to automatically convert vertices, uvs and indices? Maybe someone saw such a solution
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script>
(async () => {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 1;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.zoomSpeed = 0.4;
controls.panSpeed = 0.4;
let itemThickness = 18;
let itemHeight = 50;
let itemDepth = 25;
let itemX = 0;
let itemY = 0;
let itemZ = 0;
var quad_vertices = [itemX,itemY,itemZ,itemX,itemHeight,itemZ,itemDepth,itemHeight,itemZ,itemDepth,itemY,itemZ,
];
var quad_uvs = [0, 0, 0, 1, 1, 1, 1, 0];
var quad_indices = [0, 2, 1, 0, 3, 2];
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array(quad_vertices);
var uvs = new Float32Array(quad_uvs);
var indices = new Uint32Array(quad_indices);
geometry.setAttribute(
"position",
new THREE.BufferAttribute(vertices, 3) //ilosc wierzcholkow
);
geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// Load the texture asynchronously
var textureLoader = new THREE.TextureLoader();
var texture = await textureLoader.loadAsync(
"https://s3.amazonaws.com/duhaime/blog/tsne-webgl/assets/cat.jpg"
);
var material = new THREE.MeshBasicMaterial({
map: texture,
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -100;
scene.add(mesh);
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
}
render();
})();
</script>
</body>
</html>BufferGeometry automatic creation of vertices, uvs and indices