使用Three.js和JSON在三维散点图中导入数据图

Question

我制作了一个带有Three.js的3D散点图。页面是这样的：

<script>

    // global variables
    var renderer;
    var scene;
    var camera;
    var cameraControl;
    var geometry;
    var material;
    var plotMesh;
    var dataplot;
    var plot;

    function init() {

    // create a scene, that will hold all our elements such as objects, cameras and lights.
    scene = new THREE.Scene();

    // create a camera, which defines where we're looking at.
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(200, 0, 75);

    // create a render, sets the background color and the size
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xffffff, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMapEnabled = true;

    // add controls
    cameraControl = new THREE.OrbitControls(camera);

    // Scatter plot
    scatterPlot = new THREE.Object3D();
    scene.add(scatterPlot);

    // Make grid
    xzColor = 'red';
    xyColor = '0x33CCFF';
    yzColor = 'yellow';

    var gridXZ = new THREE.GridHelper(600, 50);
    gridXZ.setColors(new THREE.Color(xzColor), new THREE.Color(xzColor));
    gridXZ.position.set(0, 00, 0);
    scatterPlot.add(gridXZ);

    var gridXY = new THREE.GridHelper(600, 50);
    gridXY.position.set(0, 0, 00);
    gridXY.rotation.x = Math.PI / 2;
    gridXY.setColors(new THREE.Color(xyColor), new THREE.Color(xyColor));
    scatterPlot.add(gridXY);

    var gridYZ = new THREE.GridHelper(600, 50);
    gridYZ.position.set(00, 0, 0);
    gridYZ.rotation.z = Math.PI / 2;
    gridYZ.setColors(new THREE.Color(yzColor), new THREE.Color(yzColor));
    scatterPlot.add(gridYZ);

    // Make Plot
    geometry = new THREE.SphereGeometry(15, 30, 30);
    material = new THREE.MeshNormalMaterial();
    plotMesh = new THREE.Mesh(geometry, material);
    plotMesh.name = 'plot';
    scene.add(plotMesh);

    plot = [i];

    for (var i = 0; i < 100; i++) {
        var vertex = new THREE.Vector3();

        var max = 500;
        var min = -500;

        vertex.x = Math.random() * (max - min) + min;
        vertex.y = Math.random() * (max - min) + min;
        vertex.z = Math.random() * (max - min) + min;

        geometry.vertices.push(vertex);
    }

    dataplot = new THREE.Mesh(geometry, material);
    scatterPlot.add(dataplot);

    document.body.appendChild(renderer.domElement);

    render();

    }

    function render() {

    // update the camera
    cameraControl.update();

    // and render the scene
    renderer.render(scene, camera);

    // render using requestAnimationFrame
    requestAnimationFrame(render);
    }

/**
 * Function handles the resize event. This make sure the camera and the renderer
 * are updated at the correct moment.
 */
    function handleResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    // calls the init function when the window is done loading.
    window.onload = init;
    // calls the handleResize function when the window is resized
    window.addEventListener('resize', handleResize, false);


</script>

在“制作情节”部分中，我试图在散点图上生成许多不同的图。但是，在（0,0,0）中只生成一个图。我正在努力将球体几何学替换为点。

如果它有用，我也试图用JSON文件中的数据列表替换该图。我可以问我该怎么办？