2017-07-19 5 views
0

私は現在、このサイトの例をhttps://examples.x3dom.org/example/RadarVolumeStyle/にしてメモ帳に複製して、自分の端に使用しようとしています。私はほとんどすべての作業をしていますが、何らかの理由でボリュームの色が正しく表示されず、スライダが動作していないようです。私はコードを見て、それが間違っているものを実際に見つけ出すことはできないので、スライダーをリンク上で行うのと同じようにボリュームをカットする方法を知りたいと思います。私が持っているソースコードは以下の通りです:飛行機を使用して音量データをカットするX3D

<html xmlns='http://www.w3.org/1999/xhtml'> 
    <head> 
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'></meta> 
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"></meta> 
    <link rel="stylesheet" type="text/css" href="x3dom-1.7.2/x3dom.css"> 
    <script type="text/javascript" src="x3dom-1.7.2/x3dom-full.js"></script> 
    </head> 

    <script type="text/javascript"> 
    function start() { 
     var xhr = new XMLHttpRequest(); 
      xhr.addEventListener('load', function(evt) { 
       var s = (evt.target.response || evt.target.responseText).split("\n"); 
       var heights = ""; 
       for(var i = 0; i < 256; i++) { 
        var s2 = s[i].split(","); 
        for(var j = 0; j < 256; j++) 
         heights += s2[j]/15.0 + " "; 
       } 
       var elem = document.getElementById("dem_elevation_grid"); 
       elem.setAttribute("height", heights); 
       elem.setAttribute("xDimension", 256); 
       elem.setAttribute("zDimension", 256); 
       elem.setAttribute("xSpacing", 0.0156863); 
       elem.setAttribute("zSpacing", 0.0156863); 
      }); 

      xhr.open('GET', 'data/dem.csv', true); 
      xhr.send(null); 

      var w = document.getElementById("x3d").getAttribute("width"); 
      var h = document.getElementById("x3d").getAttribute("height"); 

      document.getElementById("deptex").setAttribute("dimensions", w.substring(0, w.length-2) + " " + h.substring(0, h.length-2) + " 4"); 

      document.getElementById("iso").oninput = (function() { 
       document.getElementById("vs").setAttribute("isoSurfaceCutoffValue", this.value); 
      }); 

      document.getElementById("mcp").oninput = (function() { 
       document.getElementById("cut_plane_translation").setAttribute("translation", "0.0 0.0 " + 2.0*(this.value - 0.5)); 
       document.getElementById("vs").setAttribute("xSectionPosition", this.value); 
      }); 
    } 
    </script> 

    <body style="background:white" onload="start();"> 
    <div id="x3d_container" style="position:relative;"> 
     <X3D id="x3d" xmlns='http://www.web3d.org/specifications/x3d-namespace' 
      showStat='false' showLog='false' width='800px' height='600px'> 
      <Scene> 
       <Background DEF="bg" transparency ='0.0' skyColor='0.9 0.9 1.0'></Background> 
       <Viewpoint DEF="vp" description='Default' orientation="1 0 0 -0.4" position="0 2.535 6" zNear='0.1' zFar='100.0' fieldOfView="0.5"></Viewpoint> 
       <navigationInfo type='turntable' typeParams="0 0 -0.4 1.57" id="navType"></navigationInfo> 
       <Group> 
        <Group DEF="cut"> 
         <SphereSensor id="SPHSENSOR" DEF='SPHSENSOR' autoOffset='true' description='click and drag to rotate'></SphereSensor> 
         <Transform rotation="0.0 1.0 0.0 0.0"> 
          <Transform DEF="SPHROT" id="cut_plane_rotation"> 
           <Transform DEF="SPHTRANS" id="cut_plane_translation" translation="0.0 0.0 0.0"> 
            <Shape DEF="cut_plane"> 
             <Appearance> 
              <BlendMode></BlendMode> 
              <Material id="x3hprycjk" emissiveColor='0.2 0.2 0.2'></Material> 
             </Appearance> 
             <IndexedLineSet onmouseover='document.getElementById("x3hprycjk").setAttribute("emissiveColor", "0.1 0.1 0.9");' onmouseout='document.getElementById("x3hprycjk").setAttribute("emissiveColor", "0.2 0.2 0.2");' coordIndex='0 1 2 3 0 -1'> 
              <Coordinate DEF='TurnPoints_2' point='-1 -1 0 1 -1 0 1 1 0 -1 1 0'></Coordinate> 
             </IndexedLineSet> 
            </Shape> 
            <Transform rotation="0 0 1 1.57"><Shape use="cut_plane"></Transform> 
            <Transform rotation="0 0 1 3.142"><Shape use="cut_plane"></Transform> 
            <Transform rotation="0 0 1 -1.57"><Shape use="cut_plane"></Transform> 
           </Transform> 
          </Transform> 
         </Transform> 
         <ROUTE fromField='rotation_changed' fromNode='SPHSENSOR' toField='set_rotation' toNode='SPHROT'></ROUTE> 
        </Group> 

        <Group DEF="dem"> 
         <Transform translation='-2.0 -1.0 -2.0'> 
          <shape> 
           <appearance sortType="opaque"> 
            <ImageTexture url='data/dem.jpg'></ImageTexture> 
           </appearance> 
           <ElevationGrid id="dem_elevation_grid" height='0 0 0 0' creaseAngle='0.8' xDimension='2' zDimension='2' xSpacing='4.0' zSpacing='4.0'></ElevationGrid> 
          </shape> 
         </Transform> 
        </Group> 

        <VolumeData dimensions='2.0 2.0 2.0'> 
         <ImageTextureAtlas id="ita" containerField="voxels" url="data/kansai_pawr_20120726175907.png" numberOfSlices="64" slicesOverX="8" slicesOverY="8"> 
         </ImageTextureAtlas> 
         <RadarVolumeStyle id="vs" DEF="VOLREN3D" isoSurfaceCutoffValue="0.3" transparency="1.0" intensityLimits="0.1 0.6" renderMode="2" xSectionPosition="0.5"> 
          <ImageTexture containerField='transferFunction' url='data/rainbow.png'></ImageTexture> 
          <RenderedTexture id="deptex" containerField='depthTexture' update="always" dimensions="800 600 4" depthMap="true"> 
           <Viewpoint USE="vp"></Viewpoint> 
           <Background USE="bg"></Background> 
           <Transform> 
            <group USE="cut"></group> 
            <group USE="dem"></group> 
           </Transform> 
          </RenderedTexture> 
         </RadarVolumeStyle> 
        </VolumeData> 
        <ROUTE fromField='rotation_changed' fromNode='SPHSENSOR' toField='xSectionOrientation' toNode='VOLREN3D'></ROUTE> 
       </Group> 
      </Scene> 
     </X3D> 
    </div> 

    <div style="float:left;font-family:verdana; margin-left: 10px"> 
     <p>Threshold:</p> 
     <input id="iso" type="range" min="0" max="1" step="0.01" ></input> 

     <p>Move Plane:</p> 
     <input id="mcp" type="range" min="0" max="1" step="0.01" ></input> 
    </div> 

    <div style="clear:left; float:left; font-family:verdana; font-size: 12px">This achievement is part of “research and development of next-generation Doppler radar technology” contract research from National<br/> Institute of Information and Communications Technology Japan. (c) 2015 Toshiba Corporation</div> 
    </body> 
</html> 

助けていただければ幸いです。

答えて

0

私はあなたのコードをコピーしました。結果のページはよく見えます - 例のように色が変わり、両方のスライダが何をするのでしょうか。だから私の推測は、使用されている他のファイルに何か間違っているということです。 kansai_pawr_20120726175907.pngとrainbow.pngがあり、適切な場所にありますか?

更新:x3dom-full.jsのバージョンが異なるため、同じような問題が発生したようです。 https://examples.x3dom.org/example/RadarVolumeStyle/で使用されている同じx3dom-full.jsファイルを使用してあなたの例を試してみませんか?これは約5 MBですが、1.7.2のディストリビューションからのx3dom-full.jsはわずか1,2 MBです。

関連する問題