我正在關注這個three.js示例（http://threejs.org/examples/#webgl_interactive_cubes），並試圖找到一種方法讓用戶添加指定X，Y，& Z位置的框。在使用three.js時使用JavaScript獲取用戶輸入？

我可以用一個javascript提示

var boxes = prompt("X Position", 500); // 500 = Default position

做到這一點。然而，我想有可能使用戶輸入多個字段（例如，X，Y，Z位置;箱子的大小等），所以我想添加輸入框。我知道如何做到這一點的唯一方法是使用HTML/CSS/JavaScript的像這樣的東西 -

<!-- CSS formating of Input Boxes --> 
<style type = "text/css"> 
     #x_pos { 
      position: absolute; 
      bottom: 120px; 
      left: 10px; 
      width: 130px; 
      background-color: #3c4543; 
      border-top-left-radius: 5px; 
      border-top-right-radius: 5px; 
      border: 2px solid #000000; 
      font-family: Futura; 
     } 
     ... Repeat for #y_pos & #z_pos 
</style> 

<!-- Adding a div for each Input Box --> 
<div id="x_pos"> 
    <input type="text" id="xpos"> 
</div> 
... Repeat for #y_pos & #z_pos 

<h1>Add Node here...</h1> 

<!--Allowing user to add input to the Input Box and saving that value as the x, y, & z positions --> 
<script text="text/javascript"> 

var xPosition; 
$(document).ready(function(){    
    $('#xpos').val('Longitude'); 
    $("#xpos").change(function(){ 
     xPosition = $('#xpos').val(); 
    }) 
    ... Repeat for #ypos & #zpos 
});

然而，當我可以得到頁眉和輸入框出現，他們絕對沒有的功能。我無法在文本框中輸入任何內容，也無法將.click（function（）...）功能添加到h1文本中。這幾乎就像我習慣的所有html和javascript功能已被其餘的three.js代碼禁用。我的最終目標是讓.click調用一個函數，使我可以將上面定義的div顯示在h1「Add Node here ...」下面（http://jsfiddle.net/zsfE3/9/）。

任何人都可以向我解釋這裏發生了什麼，以及我可以如何解決它？或者有沒有人有更好的方法來做到這一點？感謝球員的任何幫助！

來源

2014-11-03 David Streid

爲什麼不使用DAT.GUI？ – gaitat 2014-11-03 21:09:58

Consinder將datGUI作爲您的項目使用。我和Three.Js一起獲得了巨大的成功。還有一些例子也使用它。有關教程，請參見blog post。

來源

2014-11-03 21:12:40 Tom

感謝您的諮詢！您是否遇到過用戶無法輸入任何內容的問題？我現在有這個問題。我發佈這是另一個問題，提供更多的細節 - http://stackoverflow.com/questions/27240720/trouble-adding-text-input-directly-into-dat-gui-when-working-with-java-3d – 2014-12-02 02:06:04

@ DavidStreid不，我從來沒有遇到過這個問題。確保你的CSS是正確的。 datGUI可能是絕對定位的。檢查您的zIndex是否位於WebGL畫布上方。如果有什麼幫助你，請考慮接受當前問題的答案。 – Tom 2014-12-03 10:08:07

我接受了你的回答。我將DAT.GUI.min.js中css元素的z-index改爲非常積極，希望能將gui放在畫布上方。我無法在代碼或任何.js腳本源文件中找到WebGL畫布的zIndex。非常感謝您的指導。 – 2014-12-05 06:08:11

嘗試這樣：

HTML：

<input type = "text" id = "input1"> 
<button>ADD BOX</button> 
</input>

CSS：

canvas{z-index:-1;} 

#input1{ 

position:fixed; 
right:40px; 
top:40px; 
z-index:1;  
width:5%; 
height:60px; 

}

祝您好運！

來源

2014-11-03 21:08:29 DripDrop

在使用three.js時使用JavaScript獲取用戶輸入？

回答

祝您好運！

相關問題