All posts by violet forest
Loading .obj
~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>
Cybersquatting
1991 saw the first website. Doug Rushkoff, media thinker, author, and now professor of media studies at CUNY/Queens College, reflects on how 23 years of Internet have changed the world.
Interview with Olia Lialina on Creator’s Project
Olia Lialina’s Most Famous Net Art Piece Turns 15
http://thecreatorsproject.vice.com/blog/olia-lialinas-most-famous-net-art-piece-turns-15
Open source browser addon to hide notifications
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.
Announcing the 5 Internet Art Microgrants Awardees
On Kawara Map
Lynda.com: Div & Span
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
http://www.lynda.com/CSS-tutorials/Apply-styles-SPAN-DIV/47543/55246-4.html
To Access your Lynda.com go to this SAIC site:
http://www.saic.edu/academics/computing/lyndaonlinesoftwaretraining/