如何通过按钮提交和使用文本来上传对象？

I'm trying to load obj files using three.js and webGL. Currently I can load one object by directly changing the code, but I want users to be able to submit their own .obj files.

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

So far, this is the code that I have. I tried using various examples but I can't really grasp how to use it correctly. I think I might have to write a function to update, but would that require redoing everything in init? (By "redo" I pretty much mean copy/paste.) Is there an easier way of doing it?

到目前为止,这是我的代码。我尝试使用各种示例但我无法真正掌握如何正确使用它。我想我可能要写一个更新的函数,但是这需要在init中重做一切吗? (通过“重做”我几乎意味着复制/粘贴。)有更简单的方法吗?

relevant parts of html file:

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);
}

1 个解决方案

#1

It really depends on various aspects. What I did was simple.

这真的取决于各方面。我做的很简单。

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

Now when the button is clicked, it will trigger a function in your javascript file. All you have to do now is to create the loadTheFile function and another function that loads the obj file. Here a simple snippet of it.

现在,当单击按钮时,它将在您的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);
});
}

Hope that helps!

希望有所帮助!

To help you further, since we have declared and define a helper function, loadingFile, you can change the loader part in your init() function as follows:

为了进一步帮助你,因为我们已经声明并定义了一个辅助函数loadingFile,你可以在init()函数中更改加载器部分,如下所示:

before:

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

after:

loadingFile(objFile.value);

Follow up question: Does your code run properly? As in you can see the object? This is because I see that your code is much cleaner and more concise than what I usually use; so if it does I can use your code to improve the readability of mine. Thank you very much and I really hope my answer helps you! ^u^

跟进问题:您的代码是否正常运行?在你可以看到对象?这是因为我看到你的代码比我通常使用的代码更清晰,更简洁;所以如果可以,我可以使用你的代码来提高我的可读性。非常感谢,我真的希望我的回答可以帮到你! ^ ^ü

#1