three.js: how to render a texture mapped OBJ file in WebGL?
I'm a newbie to Three.JS and WebGL. I have a 3D scanner that makes texture mapped OBJ files and I want to create a simple WebGL viewer that allows the user to view the 3D model from any direction.
I did a web search to find examples for how to do this, and I followed the instructions from Porting 3D graphics to the web — WebGL intro part 2 (http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/) by Luz Caballero (@gerbile) to create a page to do this. The instructions were well written, but only after following some suggestions by Darryl_Lehman on another StackOverflow page to add a materials object to the loader and CreateScene function calls, was I eventually able to get the code to render my model at all. Unfortunately the revised code is now rendering my model all monochrome, unlike the example by Luz Caballero which included the texture map.
Thanks to some other suggestions from @WestLangley and @mrdoob, I was finally able to get the texture mapping working.
That fixes my problem. I'm including code that is working for me in case anyone else needs an example:
The WORKING code:
<body>
<div>
<h2>SoundFit 3D Model Viewer</h2>
<!-- p>by Scott L. McGregor, SoundFit</p -->
<!-- p>adapted from the <a href="https://github.com/mrdoob/three.js">Three.js</a> example webgl_objconvert_test.html</p -->
<!-- p>and based on <a href="http://dev.opera.com/articles/view/porting-3d-graphics-to-the-web-webgl-intro-part-2/">
Porting 3D graphics to the web — WebGL intro part 2</a> by
<href="http://dev.opera.com/author/dropoutwannabe">Luz Caballero.</a>
With additional help from WestLangley and Darrel_Lehman on StackOverflow.
</p -->
</div>
<script src="three.js-master/build/three.js"></script>
<script src="three.js-master/examples/js/Detector.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var FLOOR = 0;
var container;
var camera, scene;
var webglRenderer;
var zmesh, geometry;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
// camera
camera = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 25;
camera.position.y = 15;
camera.position.x = 0;
// scene
scene = new THREE.Scene();
// lights
var ambient = new THREE.AmbientLight( 0x777777 ); // median lighting levels
scene.add( ambient );
// more lights
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 );
// loader
var loader = new THREE.JSONLoader(),
callbackModel = function(geometry, materials) { createScene( geometry, materials, 90, FLOOR, -50, 105 ) };
loader.load( "obj/mesh.js", callbackModel );
function createScene( geometry, materials, x, y, z, b ) {
zmesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
zmesh.material.materials[ 0 ].side = THREE.DoubleSide;
zmesh.material.materials[ 1 ].side = THREE.DoubleSide;
zmesh.rotation.set( - Math.PI / 2, 0, 0 );
zmesh.position.set( 0, 16, 0 );
zmesh.scale.set( 1, 1, 1 );
scene.add( zmesh );
}
animate();
function onDocumentMouseMove(event) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
zmesh.rotation.set(-mouseY/500 + 1, -mouseX/200, 0);
webglRenderer.render( scene, camera );
}
</script>
</body>
