从输入表单向three.js发送参数

<form id="myForm">
  <label for="param1">参数1：</label>
  <input type="text" id="param1" name="param1"><br><br>
  
  <label for="param2">参数2：</label>
  <input type="checkbox" id="param2" name="param2" value="value2"><br><br>
  
  <label for="param3">参数3：</label>
  <select id="param3" name="param3">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select><br><br>
  
  <input type="submit" value="提交">
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为
  
  // 获取参数值
  var param1 = document.getElementById("param1").value;
  var param2 = document.getElementById("param2").checked;
  var param3 = document.getElementById("param3").value;
  
  // 在three.js中使用参数值
  // 例如，创建一个立方体并设置其位置
  var geometry = new THREE.BoxGeometry();
  var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  var cube = new THREE.Mesh(geometry, material);
  cube.position.set(param1, param2 ? 5 : 0, param3);
  scene.add(cube);
});