Loading .obj

Screen Shot 2014-11-12 at 6.09.21 PM

~start localhost server
~Create files in htdocs (see images below for file structure)

~coy and past viewsource code from http://threejs.org/examples/#webgl_loader_obj and add to new html ~document: index.html or whatever you want to call it

//\\//\\/\\You always need your script files //\\//\\//\\
~add script tags to top of HTML document

<script src=”build/three.min.js“></script>
<script src=”js/loaders/OBJLoader.js“></script>

*don’t forget to actually make these files, copy and paste the code into the files, and save them properly and put them in appropriate folders according to images above.

You’re always going to see:

1. scene
2. renderer (WebGL usually, sometimes canvas)
3. camera

var global;
var variables;

init();
animate();

function init() {

scene;
renderer;
camera;
model;
texture;
renderer;

}

function onWindowResize (){
};

function Mouse (){
};

function animate(){
};

function render(){
};

copy and paste code exactly from http://threejs.org/examples/#webgl_loader_obj
name file as index.html or anything you want
replace with obj file and texture file (use command + f to search), check file paths
save, make sure it works

0//  camera.position.z = 400;  // x y or z // move camera closer/farther

1// change xyz position, rotation with this code  (see //2 for where to place this code)

object.position.x = – 60;
object.rotation.x = 20* Math.PI / 180;
object.rotation.z = 20* Math.PI / 180;
object.scale.x = 30;
object.scale.y = 30;
object.scale.z = 30;
obj = object

//2 duplicate object: duplicate this code and put it right under itself, make sure it is called  obj2 = object

// model
var loader = new THREE.OBJLoader( manager );
loader.load( ‘obj/male02/male02.obj’, function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = -90;
obj = object
animate();
scene.add( object );
}, onProgress, onError );
// model
for ( var i = 0; i < 10; i ++ ) {
var loader = new THREE.OBJLoader( manager );
loader.load( ‘obj/male02/male02.obj’, function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = -60;
object.position.x = Math.random() * 1000 – 500;
object.position.y = Math.random() * 1000 – 500;
object.position.z = Math.random() * 1000 – 500;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
obj2 = object;
objects.push(object);
scene.add( object );
console.log (scene);
}, onProgress, onError );
}

// 3 animated rotation of object on x, y, or z axis

 function render() {

obj.rotation.y += (30*(Math.PI / 180));
obj2.rotation.y += (0.2*(Math.PI / 180)); // make sure obj and obj2 correspond to your object
camera.lookAt( scene.position );
renderer.render( scene, camera );

}

4// orbit control

save external javascript file as OrbitControls.js, save in js/controls/OrbitControls.js
copy and paste js code from viewsource of http://threejs.org/examples/#misc_controls_orbit

add script tag to HTML
<script src=”js/controls/OrbitControls.js“></script>

 //add to top, in global variables
var controls;

// add to end of function init just before the closing bracket:
controls = new THREE.OrbitControls(camera, renderer.domElement);   

}

generate snippet code threejsplaygnd for geometry and different kinds of movement and geometries

add to function init()

http://threejsplaygnd.brangerbriz.net/editor/editor.html

Screen Shot 2014-11-13 at 3.16.08 PM

EXAMPLE CODE FOR REFERENCE

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>three.js webgl – loaders – OBJ loader</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 {
font-family: Monospace;
background-color: #000;
color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
#info a, .button { color: #f00; font-weight: bold; text-decoration: underline; cursor: pointer }
</style>
</head>

<body>
<div id=”info”>
<a href=”http://threejs.org” target=”_blank”>three.js</a> – OBJLoader test
</div>

<script src=”build/three.min.js”></script>
<script src=”js/loaders/OBJLoader.js”></script>

<script>

var container;

var camera, scene, renderer;

var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {

container = document.createElement( ‘div’ );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;

// scene

scene = new THREE.Scene();

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

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

// texture

var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {

console.log( item, loaded, total );

};

var texture = new THREE.Texture();

var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + ‘% downloaded’ );
}
};

var onError = function ( xhr ) {
};
var loader = new THREE.ImageLoader( manager );
loader.load( ‘textures/UV_Grid_Sm.jpg’, function ( image ) {

texture.image = image;
texture.needsUpdate = true;

} );

// model

var loader = new THREE.OBJLoader( manager );
loader.load( ‘obj/male02.obj’, function ( object ) {

object.traverse( function ( child ) {

if ( child instanceof THREE.Mesh ) {

child.material.map = texture;

}

} );

object.position.y = – 80;

scene.add( object );

}, onProgress, onError );

//

renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

document.addEventListener( ‘mousemove’, onDocumentMouseMove, false );

//

window.addEventListener( ‘resize’, onWindowResize, false );

}

function onWindowResize() {

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

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

renderer.setSize( window.innerWidth, window.innerHeight );

}

function onDocumentMouseMove( event ) {

mouseX = ( event.clientX – windowHalfX ) / 2;
mouseY = ( event.clientY – windowHalfY ) / 2;

}

//

function animate() {

requestAnimationFrame( animate );
render();

}

function render() {

camera.position.x += ( mouseX – camera.position.x ) * .05;
camera.position.y += ( – mouseY – camera.position.y ) * .05;

camera.lookAt( scene.position );

renderer.render( scene, camera );

}

</script>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>