I've been experimenting with loading obj files using three.js and webGL. Currently, I can load one object by directly modifying the code, but now I want to give users the ability to upload their own .obj files.
Here is the code snippet that I have so far. I've tried looking at various examples but I'm struggling to understand how to implement it correctly. Do I need to create a function to update it? And if so, would I have to redo everything in init? (When I say "redo," I mean more like copy/paste.) Is there a simpler way to accomplish this?
relevant parts of html file:
<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);
}