Three.js 最佳 3D Dotted Globe 渲染

如何解决Three.js 最佳 3D Dotted Globe 渲染

我正在尝试在 React Web 应用程序上使用 Three.js 版本 r.125 实现 3D 点状地球仪。 我遵循了 mapping a 3D Dotted Globe using Three.js 指南，但问题是代码是在 Three.js 的先前版本上编写的。尽管如此，我确实通过遵循 CodePen Example 设法完成了我想要的，但是在渲染 3D Globe 时，与上述示例的性能相比，它非常慢。这是我的代码：

convertFlatCoordsToSphereCoords( x,y ) {
    let latitude = ( ( x - globeWidth ) / globeWidth ) * -180;
    let longitude = ( ( y - globeHeight ) / globeHeight ) * -90;
    latitude = ( latitude * Math.PI ) / 180;
    longitude = ( longitude * Math.PI ) / 180;
    const radius = Math.cos( longitude ) * globeRadius;

    return {
        x: Math.cos( latitude ) * radius,y: Math.sin( longitude ) * globeRadius,z: Math.sin( latitude ) * radius
    };
}

componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 45,480 / 450,0.1,1000 );
    camera.position.set( 0,250 );
    var renderer = new THREE.Webglrenderer();
    renderer.setSize( 480,450 );
    this.mount.appendChild( renderer.domElement );
    const mergedGeometry = new THREE.BufferGeometry();
    var group = new THREE.Object3D();

    const light = new THREE.HemisphereLight( 0xffffb0,0x080820,1 );
    scene.add( light );
    const points = jsonf.points

    for ( let point of points ) {
        let width = 180
        let height = 150
        const { x,y,z } = this.convertFlatCoordsToSphereCoords(
            point.x,point.y,width,height
        );

        var geometry = new THREE.SphereGeometry( 0.1,1,1 );
        const material = new THREE.MeshStandardMaterial( { color: 0xffff00,wireframe: true } );
        const mesh = new THREE.Mesh( geometry,material );
        mesh.position.x = x;
        mesh.position.y = y;
        mesh.position.z = z;
        group.add( mesh );
    }
    scene.add( group );
    var animate = function () {
        requestAnimationFrame( animate );
        var rotateX = group.rotation.x + 0.00;
        var rotateY = group.rotation.y + 0.01;
        var rotateZ = group.rotation.z + 0.00;
        group.rotation.set( rotateX,rotateY,rotateZ );
        renderer.render( scene,camera );
        camera.lookAt( scene.position );
    };
    animate();
}

非常欢迎任何有关如何实施的建议。我相信Trhee.js类BufferGeometry可以渲染出更快的3D Globe，但我仍然不知道如何实现。