为什么这个网格在 plotly javascript 中不能正确显示？

Question

我创建了这个奇怪的来源，因为我没有找到更好更快的方法来获取球体的顶点，在 3d 图表的中心绘制球体的网格。

部分有效：我得到了半个球体！但是所有需要的点都在那里，如果我选择“scatter3d”作为图表类型，我可以看到整个球体。那么为什么我在 mesh3d 中看不到它们？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
    <!-- Plotly.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r120/three.min.js"></script>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script src="js/jquery.js"></script>
  <script>
  

  sphereGeometry = null;  // For THREE results
  
    
    function THREE2PLOTLY(ThreeGeometry) {
        console.log("ThreeGeometry",ThreeGeometry);
        xcoord = [];
        ycoord = [];
        zcoord = [];
        
        for (index=0; index < ThreeGeometry.vertices.length; index++) {
            xcoord.push(ThreeGeometry.vertices[index].x);   
            ycoord.push(ThreeGeometry.vertices[index].y);   
            zcoord.push(ThreeGeometry.vertices[index].z);   
        }
        
        return {
            type: "isosurface",
            x: xcoord,
            y: ycoord,
            z: zcoord,
            value: [1,2,3,4,5,6,7,8],
            isomin: 2,
            isomax: 6,
            colorscale: "Reds"
        }
    }

    function init() {
        // sphere object
        var radius = 50,
            segments = 10,
            rings = 10;
        sphereGeometry = new THREE.SphereGeometry(radius, segments, rings);
    }

    
                
    $( document ).ready(
     function() {
            
        init();     
        planet3Ddata = THREE2PLOTLY(sphereGeometry);        
          
        var layout = {
            margin: {t:0, l:0, b:0},
            scene: {
                xaxis: {range: [-120, 120]},
                yaxis: {range: [-120, 120]},
                zaxis: {range: [-120, 120]},
                camera: {
                    eye: {
                        x: 1.88,
                        y: -2.12,
                        z: 0.96
                    }
                }
            }
        };        
        

        var planetFullData=[
            {
              opacity:1,
              color:'rgb(300,100,200)',
              type: 'scatter3d',
              x: planet3Ddata.x,
              y: planet3Ddata.y,
              z: planet3Ddata.z,
            }
            ];
            
        Plotly.newPlot('myDiv2', planetFullData, layout);  
        
    }
    );
  

  </script>
  </head>
  <body>
  <div name="status" id="status">-</div><br>
  qui:<br>
<div name="myDiv" id="myDiv"></div>
  qui:<br>
<div name="myDiv2" id="myDiv2"></div>
  </body>
</html>

绘制给定半径球体的其他想法？我在 python 中找到了导入 .OBJ 网格的来源，但我无法将 python 转换为 javascript。

Answer 1

我在某处找到了球体点定义（我不记得了），并且我得到了一个工作代码；这是我的代码的一小段摘录，但它缺少基础数据，不适合space，请查看JSfiddle or at full source。

    layout = {
            scene:{
                hoverinfo: "text",
                aspectmode: "data",
                aspectratio: {
                    x: 1, y: 1, z: 1,
                },
                xaxis: {
                    nticks: 10,
                    autorange: true
                },
                yaxis: {
                    nticks: 10,
                    autorange: true 
                },
                zaxis: {
                    nticks: 10,
                    autorange: true
                }                   
            }
      };


a = []; // See JSfiddle
b = []; // See JSfiddle
c = []; // See JSfiddle

sphereMeshData =  {
        "i": [],  // See JSfiddle
        "j": [],  // See JSfiddle
        "k": [],  // See JSfiddle
        "name": "", 
        "type": "mesh3d", 
        x: a.map(x => x * factor),  // multiply by "factor" to enlarge the sphere
        y: b.map(x => x * factor),
        z: c.map(x => x * factor),
        "color": "rgb(200,0,0)"
    };             
         

chart3d = Plotly.newPlot('myDiv', [sphereMeshData], layout);

为什么这个网格在 plotly javascript 中不能正确显示？

Why doesn't this mesh show properly in plotly javascript?

mesh

plotly