~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
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>