All posts by violet forest

Loading .obj

Leave a comment

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>

Open source browser addon to hide notifications

Leave a comment

http://bengrosser.com/projects/facebook-demetricator/

How It Works

Demetricator is free software that runs within the web browser, constantly watching Facebook when it’s loaded and removing the metrics wherever they occur. This is true not only of those counts that show up on the user’s first visit, but also of anything that gets dynamically inserted into the interface over time. The demetrication is not a brute-force removal of all numbers within the site, but is instead a targeted operation that focuses on only those places where Facebook has chosen to reveal a count from their database. Thus numbers a user writes into their status, their times for an event, etc. are not removed.

Lynda.com: Div & Span

Leave a comment

All SAIC Students have full access to Lynda.com tutorials (normally a paid membership). TAKE ADVANTAGE!

This tutorial is a good explanation of when to use Div and Span

Screen Shot 2014-09-04 at 1.53.18 PM

http://www.lynda.com/CSS-tutorials/Apply-styles-SPAN-DIV/47543/55246-4.html

 

To Access your Lynda.com go to this SAIC site:

Screen Shot 2014-09-04 at 1.56.59 PM

http://www.saic.edu/academics/computing/lyndaonlinesoftwaretraining/