Question

我对编程很新，编写了一个简单的程序来获取用户的输入，我想在X3D场景中使用它。如果我像URL一样运行它（“http://vmclient03.rz.hft-stuttgart.de:8080/cs3d/Controller?do=GetScene&service=W3DS&version=0.4.0&crs=epsg:31467& format = model / x3d％2bxml＆amp; x3d.optimize = true＆amp; boundingBox =“+ bbox”它可以工作，但我希望将它包含在x3d内的内联函数中，以便用户输入边界框坐标可以在定义的框内获取场景。这是我到目前为止编写的代码。提前感谢你。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title Please</title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.x3dom.org/download/x3dom.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/x3dom.css"   />
</head>

<body bgcolor="#FF9900" >
<h1> Please Fill the number</h1>
<br />
<hr />
<form method="GET"  name="form" 
  onsubmit="return validateForm(this)">
<br>
<hr color="#333333" />
Lower Left X Co-ordinate: <input type="text" id="num1" name="ULX" onchange=  "isNumeric(document.getElementById('num1'), 'Please Enter number only')"  /><br />
Lower Left Y Co-ordinate: <input type="text" id="num2" name="ULY"   onchange="isNumeric(document.getElementById('num2'), 'Please Enter number only')"/><br />
Upper Right X Co-ordinate: <input type="text" id="num3" name="LWX"  onchange="isNumeric(document.getElementById('num3'), 'Please Enter number only')"/><br />
Upper Right Y Co-ordinate: <input type="text" id="num4" name="LWY"  onchange="isNumeric(document.getElementById('num4'), 'Please Enter number only')"/><br />
<hr />
<input type="submit"/>
</form>
</body>
<script language="javascript">
  function isNotEmpty(elem) {
  var str = elem.value;
  var re = /.+/;
  if(!str.match(re)) {
    alert("Please fill in the required field.");
    setTimeout("focusElement('" + elem.form.name + "', '" + elem.name + "')", 0);
    return false;
    } else {
    return true;
  }
}


function isNumeric(a, helperMsg)
{
 var numericExpression = /^-?\d*\.?\d*$/;
 if(a.value.match(numericExpression))
   {
    return true;
    }else
      {
       alert(helperMsg);
       a.focus();
       return false;
      }
 }

function validateForm(form)
 {
  if (isNotEmpty(form.num1)) 
{
     if (isNotEmpty(form.num2))
     {
          if (isNotEmpty(form.num3))
      {
               if (isNotEmpty(form.num4))
           {
                    var bbox = $("#num1").val()+","+$("#num2").val()+","+$("#num3").val()+","+$("#num4").val();
           <!--<x3d width="800px" height="600px">
              <!--<scene>
             <!--<inline url="http://vmclient03.rz.hft-stuttgart.de:8080/cs3d/Controller?do=GetScene&service=W3DS&version=0.4.0&crs=epsg:31467&format=model/x3d%2bxml&x3d.optimize=true&boundingBox="+bbox></inline>
              <!--</scene>
          <!--</x3d>
                          window.open("http://vmclient03.rz.hft-stuttgart.de:8080/cs3d/Controller?do=GetScene&service=W3DS&version=0.4.0&crs=epsg:31467&format=model/x3d%2bxml&x3d.optimize=true&boundingBox="+bbox);
                    }
                }
            }
        }

    return false;
   }
  </script>
</html>

Answer 1

您可以在页面中显示场景，只需在提交表单时更改Inline节点的URL：

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>X3DOM</title>
<link href="http://x3dom.org/x3dom/release/x3dom.css" rel="stylesheet" />
<style>
.error{border: 2px solid red}
label{display: block}
</style>

</head>
<body>


<X3D width="400px" height="300px" showStat="true">
    <Scene>
        <Inline id="myInline"></Inline>
    </Scene>
</X3D>

<fieldset>
    <label>
        Lower Left X Co-ordinate:
        <input type="text" id="num1" name="ULX" value="-1" />
    </label>
    <label>
        Lower Left Y Co-ordinate:
        <input type="text" id="num2" name="ULY" value="-1" />
    </label>
    <label>
        Upper Right X Co-ordinate:
        <input type="text" id="num3" name="LWX" value="1" />
    </label>
    <label>
        Upper Right Y Co-ordinate:
        <input type="text" id="num4" name="LWY" value="1" />
    </label>
</fieldset>

<button id="mySubmit">Submit</button>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://x3dom.org/x3dom/release/x3dom.js"></script>
<script>
$(function(){

    var $inline = $("#myInline");

    var $fields = $("input").change(function(){
        var $field = $(this);
        if ($.isNumeric($field.val())) $field.removeClass("error");
        else $field.addClass("error");
    });

    $("#mySubmit").click(function(){
        if ($fields.filter(".error").length == 0){
            var bbox = $("#num1").val() + "," + $("#num2").val() + "," + $("#num3").val() + "," + $("#num4").val();
            var url = "http://vmclient03.rz.hft-stuttgart.de:8080/cs3d/Controller?do=GetScene&service=W3DS&version=0.4.0&crs=epsg:31467&format=model/x3d%2bxml&x3d.optimize=true&boundingBox=" + bbox;
            $inline.attr("url", url);
        } else {
            alert("Enter a number in every field first !");
        }
        return false;
    });

});
</script>


</body>
</html>

从用户输入边界框并在x3d场景的内联脚本中使用它

1 个答案: