Three.js中BufferGeometry的setFromPoints方法未找到错误求助

你遇到的setFromPoints方法不存在的问题，是因为**Three.js r157及以后的版本已经移除了BufferGeometry.setFromPoints()**这个方法，若参考的是旧版官方示例或未及时更新的文档，就会出现这个情况。

修复步骤 #

把原来创建BufferGeometry的代码替换成以下逻辑：

1. 先获取曲线生成的点数组
2. 将点数组转换为适合BufferGeometry的浮点数组
3. 手动为BufferGeometry添加position属性

修改后的核心代码片段：

// 获取曲线点数组
const points = curve.getPoints(100);
// 转换为Float32Array格式（每个点包含x/y/z三个坐标）
const positionData = new Float32Array(points.flatMap(point => [point.x, point.y, point.z]));
// 创建BufferGeometry并设置位置属性
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionData, 3));

完整修改后的组件代码 #

<script lang="ts">
    import { onMount } from 'svelte';
    import * as THREE from 'three';

    var scene: THREE.Scene;
    var camera: THREE.Camera;
    var renderer: THREE.Renderer;
    let canvasElement: HTMLCanvasElement;

    const curve = new THREE.EllipseCurve(0, 0, 10, 5, 0, 2 * Math.PI, false, 0);

    onMount(() => {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvasElement });
        renderer.setSize(window.innerWidth, window.innerHeight);

        // 修复后的BufferGeometry创建逻辑
        const points = curve.getPoints(100);
        const positionData = new Float32Array(points.flatMap(point => [point.x, point.y, point.z]));
        const geometry = new THREE.BufferGeometry();
        geometry.setAttribute('position', new THREE.Float32BufferAttribute(positionData, 3));

        const material = new THREE.LineBasicMaterial({ color: 0x3f3f46 });
        const ellipse = new THREE.Line(geometry, material);

        scene.add(ellipse);

        camera.position.z = 10;

        animate();
    });

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }
</script>

<canvas bind:this={canvasElement} />

额外说明 #

如果暂时不想适配新API，也可以将Three.js降级到r156版本，但更推荐使用上述新写法，因为新版本的BufferGeometry API更贴近底层，性能更优。

内容的提问来源于stack exchange，提问作者ashwin sharma