所以我现在正试图在这个网站https://examples.x3dom.org/example/RadarVolumeStyle/上举例，并在记事本中复制它，然后将它用于我自己的目的。我几乎所有工作都有效，但由于某些原因，音量的颜色似乎没有正确呈现，滑块也无法正常工作。我已经查看了代码并且无法找出任何有问题的代码，所以我想知道如何让滑块像链接一样切割音量。我的源代码如下：
<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 :(得分：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。