为什么此网格无法在可绘制的javascript中正确显示？

问题描述

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

部分起作用：我使一个球体halph！但是所有需要的点都在那里，如果我选择“ 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,zaxis: {range: [-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。

解决方法

我在某处找到了球体点定义（我不记得了），我得到了一个工作代码；这是我代码的一小段摘录，但它缺乏基本数据，不适合这个空间，请查看 JSfiddle 或 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)"
    };             
         

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

mesh plotly

为什么此网格无法在可绘制的javascript中正确显示？

问题描述

解决方法

相关问答