如何提交和使用带有按钮的文本来上传对象？

Question

我正在尝试使用 three.js 和 webGL 加载 obj 文件。目前我可以通过直接更改代码来加载一个对象，但我希望用户能够提交他们自己的 .obj 文件。

到目前为止，这是我拥有的代码。我尝试使用各种示例，但我无法真正掌握如何正确使用它。我想我可能必须编写一个函数来更新，但这是否需要重做 init 中的所有内容？（"redo" 我的意思是 copy/paste。）有更简单的方法吗？

html 文件的相关部分：

<form id="upload" method="get">
    .obj Upload: <input type="text" size="20" name="objfile" id="objfile">
    <!-- <input type="button" id="objsubmit" value="Send"> -->
</form>
<script type="text/javascript" src="cubemain.js"></script>

cubemain.js:

var scene, camera, renderer;
var container;
var objFile;

window.onload=function() {
    init();
    render();
}

function init() {

    // upload
    objFile = document.getElementById("objfile");

    // set up scene, camera, renderer
    scene = new THREE.Scene();

    var FOV = 70;
    var ASPECT = window.innerWidth/window.innerHeight;
    var NEAR = 1;
    var FAR = 1000;
    camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR);

    // move camera back otherwise in same position as cube
    camera.position.z = 5;

    var light = new THREE.AmbientLight(0x101030);
    scene.add(light);

    var directionalLight = new THREE.DirectionalLight( 0xffeedd );
    directionalLight.position.set( 0, 0, 1 );
    scene.add( directionalLight );

    // use OBJLoader
    var loader = new THREE.OBJLoader();
    loader.load(objFile.value + ".obj", function(object) {
        scene.add(object);
    });

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(.70*window.innerWidth, .75*window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.setClearColor(0xCC99FF, 1);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);

}

function render() {
    requestAnimationFrame(render);

    renderer.render(scene, camera);
}

Answer 1

确实要看各方面。我做的很简单。

//In the html.html
The object: <input type="text" id="inputFile">
<input type="button" id="submitBtn" onclick="loadTheFile()">

现在单击按钮时，它将触发 javascript 文件中的一个函数。您现在要做的就是创建 loadTheFile 函数和另一个加载 obj 文件的函数。这是它的一个简单片段。

//The rest of your javascript file
function loadTheFile(){
    //First we need to get the value of the text. We shall store the name of
    //the file in a fileName variable
    var fileName = document.getElementById("inputFile").value;

    //Now what you should do is to run another function, let us call it loadingFile
    //which has the argument fileName, the name of the file that we have received
    loadingFile(fileName);
}

function loadingFile(fileName){
//Use your loader and instead of the static path, use fileName as your new path
//Please note that the path that you pass into the loader is a relative path
//to your main applciation. So for example you store your file in the model folder
//and the fileName variable is just a file name and not a relative directory, then
//you should add the path of the folder like as follows:
var completePath = "models/" + filename;
//the rest of your loader

// use OBJLoader
var loader = new THREE.OBJLoader();
loader.load(completePath + ".obj", function(object) {
    scene.add(object);
});
}

希望对您有所帮助！

为了进一步帮助您，由于我们已经声明并定义了一个辅助函数 loadingFile，您可以在 init() 函数中更改加载程序部分，如下所示：

之前：

var loader = new THREE.OBJLoader();
loader.load(objFile.value + ".obj", function(object) {
    scene.add(object);
});

之后：

loadingFile(objFile.value);

跟进问题：你的代码运行正确吗？如在你能看到的对象？这是因为我看到你的代码比我平时使用的代码更干净、更简洁；因此，如果可以，我可以使用您的代码来提高我的代码的可读性。非常感谢，希望我的回答对您有帮助！ ^u^

如何提交和使用带有按钮的文本来上传对象？

How do I submit and use text with a button to upload objects?

javascript

text

submit

three.js