I'm trying to render 2D polygons onto a canvas using BufferGeometry in three.js (I need the extra performance compared to using Shape). However, when I run this code (I'm using Svelte but I tried to make this example standalone so it works using vanilla html, css, js), I get an error in my browser console: Uncaught TypeError: geometry.setFromPoints is not a function. This is weird because it definitely exists in the documentation. Am I using it wrong?
const imageWidth = 30000;const imageHeight = 60000;const CANVAS_WIDTH = 10000;const CANVAS_HEIGHT = CANVAS_WIDTH * (imageHeight / imageWidth);const layer = { fill: '#32a852', stroke: '#000000', opacity: 0.5, annotations: [ [ [0, 0], [0, 10000.23], [10000.012, 10000.3894], [10000.783, 0] ] ]};function draw() { const canvas = document.getElementById('canvas'); if (!canvas) return; canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; const scene = new THREE.Scene(); const camera = new THREE.OrthographicCamera(0, imageWidth, 0, -1 * imageHeight, 0.1, 10); camera.position.z = 1; // Create a renderer with a transparent canvas. const renderer = new THREE.WebGLRenderer({ canvas, alpha: true }); // Materials for this layer. const fill_material = new THREE.MeshBasicMaterial({ color: layer.fill, transparent: true, opacity: layer.opacity }); for (const annotation of layer.annotations) { const points = annotation.map((point) => new THREE.Vector2(point[0], -1 * point[1])); // Duplicate the first point to close the shape. points.push(new THREE.Vector2(annotation[0][0], -1 * annotation[0][1])); const geometry = new THREE.BufferGeometry(); geometry.setFromPoints(points); // Create a mesh with the geometry and materials. const mesh = new THREE.Mesh(geometry, fill_material); // Add the shape to the scene. scene.add(mesh); } // Clear annotations. layer.annotations = []; // Render the scene. renderer.render(scene, camera);}draw()canvas { position: absolute; z-index: 1; width: 100%;}<canvas id='canvas' />