Javascript 使用平面剪切体积数据X3D
因此，我目前正试图在这个网站上举一个例子，并将其复制到记事本中，然后将其用于我自己的目的。我几乎所有的东西都能正常工作，但由于某些原因，音量的颜色似乎不能正常渲染，滑块也不能正常工作。我已经看过了代码，但无法真正找出它有什么问题，所以我想知道如何让滑块像在链接上那样工作以减少音量。我的源代码如下：Javascript 使用平面剪切体积数据X3D,javascript,x3d,x3dom,Javascript,X3d,X3dom,因此，我目前正试图在这个网站上举一个例子，并将其复制到记事本中，然后将其用于我自己的目的。我几乎所有的东西都能正常工作，但由于某些原因，音量的颜色似乎不能正常渲染，滑块也不能正常工作。我已经看过了代码，但无法真正找出它有什么问题，所以我想知道如何让滑块像在链接上那样工作以减少音量。我的源代码如下： <html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Ty
<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>
函数start（）{
var xhr=new XMLHttpRequest（）；
xhr.addEventListener（'load'，函数（evt）{
var s=（evt.target.response | | evt.target.responseText）.split（“\n”）；
var高度=”；
对于（变量i=0；i<256；i++）{
var s2=s[i]。拆分（“，”；
对于（var j=0；j<256；j++）
高度+=s2[j]/15.0+“”；
}
var elem=document.getElementById（“dem高程网格”）；
元素setAttribute（“高度”，高度）；
元素setAttribute（“xDimension”，256）；
元素setAttribute（“zDimension”，256）；
元素setAttribute（“xspace”，0.0156863）；
元素setAttribute（“zSpacing”，0.0156863）；
});
xhr.open（'GET'，'data/dem.csv'，true）；
xhr.send（空）；
var w=document.getElementById（“x3d”）.getAttribute（“宽度”）；
var h=document.getElementById（“x3d”）.getAttribute（“高度”）；
document.getElementById（“deptex”）.setAttribute（“维度”，w.substring（0，w.length-2）+“”+h.substring（0，h.length-2）+“4”）；
document.getElementById（“iso”）.oninput=（函数（）{
document.getElementById（“vs”）.setAttribute（“isosurfacecutofValue”，this.value）；
});
document.getElementById（“mcp”）.oninput=（函数（）{
document.getElementById（“剖切面平移”）.setAttribute（“平移”，“0.0.0”+2.0*（this.value-0.5））；
document.getElementById（“vs”）.setAttribute（“xSectionPosition”，this.value）；
});
}
阈值：
移动平面：
该成果是日本国家信息通信技术研究所“下一代多普勒雷达技术研发”合同研究的一部分。（c） 2015东芝公司
任何帮助都将不胜感激。我复制了您的代码，生成的页面看起来不错-颜色如示例所示，两个滑块都完成了它们应该做的事情。所以我的猜测是，使用的其他文件有问题。kansai_pawr_20120726175907.png和rainbow.png是否在正确的位置 更新：我想我刚刚遇到了一个类似的问题，由不同版本的x3dom-full.js引起。您是否可以使用中使用的相同x3dom-full.js文件来尝试您的示例？它大约有5MB，而1.7.2发行版中的x3dom-full.js只有1,2MB