Here is the most basic, stripped down Javascript and HTML to load and view a model exported from Maya with textures in three.js with WebGL. I use this example as a test script to check my models before loading them into other applications.

Checkout this link on Stack Overflow if you want more advanced control of loading textures that were exported from a 3D package.

1.

Model or load the object you want to view in Maya.

2.

You may need to load the objExport plugin by going to Window Settings/Preferences Plug-in Manager and selecting the objExport.bundle

3.

Export the model as an Wavefront OBJ file. This will create a .obj file and a .mtl file. I found that objects that were scaled negatively didn't export well (even if history was deleted). I have only tested this with simple UV Mapped textures and Lambert materials.

4.

Run the three.js obj converter Python script on the exported file by using this syntax. The -i argument is your input .obj file and the -o argument is the desired filename for the output file.

python convert_obj_three.py -i chameleon.obj -o chameleon.js

5.

Use this HTML/Javascript file to load and animate your model.

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>obj tester</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				background:#fff;
				padding:0;
				margin:0;
				overflow:hidden;
				font-family:georgia;
				text-align:center;
			}
		</style>
	</head>

	<body>

		<script src="three.min.js"></script>

		<script>

			var SCREEN_WIDTH = window.innerWidth;
			var SCREEN_HEIGHT = window.innerHeight;

			var container;

			var camera, scene;
			var canvasRenderer, webglRenderer;

			var mesh, zmesh, geometry;

			var windowHalfX = window.innerWidth / 2;
			var windowHalfY = window.innerHeight / 2;

			var meshes = [];

			init();
			animate();

			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);

				camera = new THREE.PerspectiveCamera(75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000);
				camera.position.x = 400;
				camera.position.y = 200;
				camera.position.z = 400;

				scene = new THREE.Scene();

				// LIGHTS
				var ambient = new THREE.AmbientLight(0x666666);
				scene.add(ambient);

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

				// RENDERER
				webglRenderer = new THREE.WebGLRenderer();
				webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				webglRenderer.domElement.style.position = "relative";

				container.appendChild(webglRenderer.domElement);

				var loader = new THREE.JSONLoader(),
				callbackKey = function(geometry) {createScene(geometry,  0, 0, 0, 15, "chameleon.jpg")};
				loader.load("chameleon.js", callbackKey);

				window.addEventListener('resize', onWindowResize, false);

			}

			function createScene(geometry, x, y, z, scale, tmap) {
				zmesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture(tmap)}));
				zmesh.position.set(x, y, z);
				zmesh.scale.set(scale, scale, scale);
				meshes.push(zmesh);
				scene.add(zmesh);
			}

			function onWindowResize() {
				windowHalfX = window.innerWidth / 2;
				windowHalfY = window.innerHeight / 2;

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				webglRenderer.setSize(window.innerWidth, window.innerHeight);
			}

			function animate() {
				for(var i = 0; i < meshes.length; i++){
					meshes[i].rotation.y += .01;
				}
				requestAnimationFrame(animate);
				render();
			}

			function render() {
				camera.lookAt(scene.position);
				webglRenderer.render(scene, camera);
			}
		</script>

	</body>
</html>

6.

Change line 71 to reference your model. The arguments that are passed to the createScene constructor define the x, y, z, scale and texture properties of the model.

callbackKey = function(geometry){createScene(geometry,  0, 0, 0, 15, "chameleon.jpg")};

7.

Change line 72 to reference your model. This line references the output from the three.js converter used in step 4.

loader.load("chameleon.js", callbackKey);

8.

Save this file as index.html and make sure three.min.js, your model's .js and your model's texture map are all in the same directory.

9.

Load the index.html file in Google Chrome or Mozilla Firefox. Here's an example.