I'm just getting started with Three.js and I'm experimenting a lot. Although I'm new to Javascript as well, the issue I'm facing seems to be more about variable scoping and callback function protocols than it is about Three.js itself... which makes it even more frustrating!
Here's the complete code of my app.js. Special thanks to WestLangley for the geo2line function that's working in this code, and to the Three.js developers for the ObjLoader & JSONLoaders that are also functioning in this experimental app.
// Initialization Variables
var scene;
var camera;
var renderer;
// Light Variables
var light;
var lightScene;
// Object Variables
var lineSphere;
var cube1;
var geodesicMesh;
var geodesicLine;
var lineGeometry;
var floorGeometry;
var floor;
var line1;
// Material Variables
var lineBlueMaterial;
var lineRedMaterial;
var geodesicMaterial;
var floorMaterial;
// Render Variables
var render;
// Callback Variables
var loadedMesh;
function init() {
scene = new THREE.Scene();
cameras();
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// LIGHTS
lights();
// MATERIALS
materials();
// GEOMETRIES
geometries();
camera.position.z = 5;
render = function () {
requestAnimationFrame( render );
lineSphere.rotation.x += 0.02;
lineSphere.rotation.y += 0.02;
lineSphere.rotation.z += 0.01;
//geodesicMesh.rotation.x += 0.03;
//geodesicMesh.rotation.y += 0.03;
renderer.render(scene, camera);
};
render();
}
function cameras() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
}
function lights() {
light = new THREE.PointLight(0xAAAA66, 2, 100);
light.position.set(50,50,50);
scene.add(light);
lightScene = new THREE.PointLight(0x66AAAA, 2, 100);
lightScene.position.set (0,5,0);
scene.add(lightScene);
}
function materials() {
geodesicMaterial = new THREE.MeshPhongMaterial( {
color: 0x0000ff,
specular: 0x8888ff,
shininess: 20,
shading: THREE.FlatShading} );
lineBlueMaterial = new THREE.LineDashedMaterial ({
color: 0xff0000,
dashSize: .1,
gapSize: .1,
linewidth: 3 });
lineRedMaterial = new THREE.LineDashedMaterial ({
color: 0xff0000,
dashSize: .1,
gapSize: .1,
linewidth: 3 });
}
function geometries() {
sphereGeometry = new THREE.SphereGeometry( 3, 24, 24 );
lineSphere = new THREE.Line( geo2line(sphereGeometry), lineBlueMaterial, THREE.linePieces );
scene.add( lineSphere );
geodesicMesh = loadObjAsMesh( 'assets/objects/v2-icosahedron-simplest.obj' , function ( mesh ) { loadedMesh = mesh; scene.add( mesh ); return mesh; } );
//loadedMesh;
console.log ( loadedMesh );
//geodesicMesh.computeLineDistances();
//geodesicLine = new THREE.Line ( geo2line( geodesicMesh ), lineRedMaterial, THREE.linePieces );
//scene.add( geodesicLine );
}
function geo2line( geo ) {
var geometry = new THREE.Geometry();
var vertices = geometry.vertices;
for ( i = 0; i < geo.faces.length; i++ ) {
var face = geo.faces[ i ];
if ( face instanceof THREE.Face3 ) {
vertices.push( geo.vertices[ face.a ].clone() );
vertices.push( geo.vertices[ face.b ].clone() );
vertices.push( geo.vertices[ face.b ].clone() );
vertices.push( geo.vertices[ face.c ].clone() );
vertices.push( geo.vertices[ face.c ].clone() );
vertices.push( geo.vertices[ face.a ].clone() );
} else if ( face instanceof THREE.Face4 ) {
vertices.push( geo.vertices[ face.a ].clone() );
vertices.push( geo.vertices[ face.b ].clone() );
vertices.push( geo.vertices[ face.b ].clone() );
vertices.push( geo.vertices[ face.c ].clone() );
vertices.push( geo.vertices[ face.c ].clone() );
vertices.push( geo.vertices[ face.d ].clone() );
vertices.push( geo.vertices[ face.d ].clone() );
vertices.push( geo.vertices[ face.a ].clone() );
}
}
geometry.computeLineDistances();
return geometry;
}
function loadObjAsMesh( obj , callback ) { // Obj Resource URL: Example: 'assets/monster.obj'
var geometry;
var mesh;
var loader = new THREE.OBJLoader();
loader.load(
obj , function ( object ) {
geometry = new THREE.Geometry().fromBufferGeometry( object.children["0"].geometry );
mesh = new THREE.Mesh ( geometry, geodesicMaterial );
console.log( mesh );
//scene.add( mesh );
callback( mesh );
});
}
function loadJSON( obj ) { // Obj Resource URL: Example: 'assets/monster.obj'
var loader = new THREE.JSONLoader();
loader.load(
obj , function ( object ) { return( object ); });
}The rotating sphere looks great, and the icosahedron renders perfectly as a geometry.
But I've encountered an issue on line 113 where 'loadedMesh' shows up as 'Undefined' in the console. From my understanding, this shouldn't happen because I declared this variable in the global context and the callback function is supposed to only set its value globally, right? It shouldn't be declaring it internally.
Since it's undefined, I can't proceed with what I planned next, which is to pass the mesh object through the geo2line function on line 117 (hoping to basically set the geodesicMesh variable as the loadedMesh variable) and then display it as a series of dashed lines.
So, what am I missing here?
Thank you!