tforgione/3d-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Working on progressive loader that supports textures and materials

Browse Source
This commit is contained in:
Thomas FORGIONE
2015-06-11 17:22:37 +02:00
parent c8f64b98bd
commit 99019c217f
8 changed files with 429 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
js/ProgressiveLoader.js
View File

@@ -1,22 +1,24 @@
var ProgressiveLoader = function(res, scene) {
var ProgressiveLoader = function(path, scene, materialCreator) {
// Create mesh
var geometry = new THREE.Geometry();
geometry.dynamic = true;
var obj = new THREE.Object3D();
obj.up = new THREE.Vector3(0,0,1);
glob = obj;
var material = new THREE.MeshLambertMaterial();
material.color.setRGB(1,0,0);
material.side = THREE.DoubleSide;
var mesh = new THREE.Mesh(geometry, material);
mesh.up = new THREE.Vector3(0,0,1);
var currentMesh;
var currentMaterial;
var added = false;
var finished = false;
var socket = io();
var vertices = [];
var textCoords = [];
var uvs = [];
var faces = [];
// Init streaming with socket
socket.emit('request', res);
socket.emit('request', path);
// When server's ready, start asking for the mesh
socket.on('ok', function() {
@@ -42,29 +44,33 @@ var ProgressiveLoader = function(res, scene) {
if (elts[0] === 'v') {
mesh.geometry.vertices.push(new THREE.Vector3(
vertices.push(new THREE.Vector3(
elts[1],
elts[2],
elts[3]
));
mesh.geometry.verticesNeedUpdate = true;
verticesNeedUpdate = true;
} else if (elts[0] === 'vt') {
textCoords.push(new THREE.Vector2(
elts[1],
elts[2]
));
} else if (elts[0] === 'f') {
if (elts[4])
elts[4] = parseInt(elts[4]);
mesh.geometry.faces.push(new THREE.Face3(
faces.push(new THREE.Face3(
elts[1],
elts[2],
elts[3]
));
// If the face has 4 vertices, create second triangle
if (elts[4]) {
if (elts.length === 5 || elts.length === 9) {
mesh.geometry.faces.push(new THREE.Face3(
faces.push(new THREE.Face3(
elts[1],
elts[3],
elts[4]
@@ -72,20 +78,79 @@ var ProgressiveLoader = function(res, scene) {
}
// Add mesh to scene one there are a few faces in it
// Add texture
if (elts.length === 7 || elts.length === 9) {
uvs.push([
textCoords[elts[4]],
textCoords[elts[5]],
textCoords[elts[6]]
]);
}
if (elts.length === 9) {
uvs.push([
textCoords[elts[5]],
textCoords[elts[7]],
textCoords[elts[8]]
]);
}
// Add currentMesh to scene one there are a few faces in it
if (!added) {
scene.add(mesh);
scene.add(obj);
added = true;
}
if (!currentMesh) {
var geo = new THREE.Geometry();
geo.vertices = vertices;
geo.faces = faces;
var material;
if (currentMaterial === undefined || currentMaterial === null) {
material = new THREE.MeshLambertMaterial({color: 'red'});
} else {
material = materialCreator.create(currentMaterial);
currentMaterial = null;
}
currentMesh = new THREE.Mesh(geo, material);
}
obj.add(currentMesh);
} else if (elts[0] === 'u') {
// Add current mesh
// if (currentMesh) {
// obj.add(currentMesh);
// }
// Prepare new mesh
faces = [];
uvs = [];
// currentMesh.geometry.computeFaceNormals();
if (currentMesh) {
currentMesh.geometry.groupsNeedUpdate = true;
currentMesh.geometry.elementsNeedUpdate = true;
currentMesh.geometry.normalsNeedUpdate = true;
currentMesh.geometry.uvsNeedUpdate = true;
}
currentMaterial = elts[1];
currentMesh = null;
// console.log(material.map);
// currentMesh = new THREE.Mesh(geo, material);
}
}
mesh.geometry.computeFaceNormals();
mesh.geometry.groupsNeedUpdate = true;
mesh.geometry.elementsNeedUpdate = true;
mesh.geometry.normalsNeedUpdate = true;
if (currentMesh) {
currentMesh.geometry.computeFaceNormals();
currentMesh.geometry.groupsNeedUpdate = true;
currentMesh.geometry.elementsNeedUpdate = true;
currentMesh.geometry.normalsNeedUpdate = true;
currentMesh.geometry.uvsNeedUpdate = true;
}
},0);
});
@@ -95,5 +160,5 @@ var ProgressiveLoader = function(res, scene) {
finished = true;
});
return mesh;
return obj;
}

61
js/prototype/initScene.js vendored
View File

@@ -22,6 +22,14 @@ function initPeachCastle(scene, collidableObjects, loader, static_path) {
static_path = "/static/";
}
// var loader = new THREE.MTLLoader('/static/data/castle/');
// loader.load('/static/data/castle/princess peaches castle (outside).mtl', function(materialCreator) {
// materialCreator.preload();
// var mesh = ProgressiveLoader('static/data/castle/princess peaches castle (outside).obj', scene, materialCreator);
// });
loader.load(
static_path + 'data/castle/princess peaches castle (outside).obj',
static_path + 'data/castle/princess peaches castle (outside).mtl',
@@ -53,34 +61,34 @@ function initPeachCastle(scene, collidableObjects, loader, static_path) {
}
);
loader.load(
static_path + 'data/first/Floor 1.obj',
static_path + 'data/first/Floor 1.mtl',
function ( object ) {
object.position.z -= 10.9;
object.position.y += 0.555;
object.position.x += 3.23;
// loader.load(
// static_path + 'data/first/Floor 1.obj',
// static_path + 'data/first/Floor 1.mtl',
// function ( object ) {
// object.position.z -= 10.9;
// object.position.y += 0.555;
// object.position.x += 3.23;
var theta = 0.27;
object.rotation.y = Math.PI - theta;
// var theta = 0.27;
// object.rotation.y = Math.PI - theta;
object.up = new THREE.Vector3(0,0,1);
scene.add(object);
collidableObjects.push(object);
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.material.side = THREE.DoubleSide;
object.geometry.mergeVertices();
object.geometry.computeVertexNormals();
object.raycastable = true;
if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
object.material.name === 'Material.061_5C3492AB_c.bmp' ) {
THREEx.Transparency.push(object);
}
}
});
}
);
// object.up = new THREE.Vector3(0,0,1);
// scene.add(object);
// collidableObjects.push(object);
// object.traverse(function (object) {
// if (object instanceof THREE.Mesh) {
// object.material.side = THREE.DoubleSide;
// object.geometry.mergeVertices();
// object.geometry.computeVertexNormals();
// object.raycastable = true;
// if (object.material.name === 'Material.054_777F0E0B_c.bmp' ||
// object.material.name === 'Material.061_5C3492AB_c.bmp' ) {
// THREEx.Transparency.push(object);
// }
// }
// });
// }
// );
}
function resetPeachElements() {
@@ -265,6 +273,7 @@ function initBobombScene(scene, collidableObjects, loader, static_path) {
object.up = new THREE.Vector3(0,0,1);
collidableObjects.push(object);
scene.add(object);
glob = object;
object.traverse(function (object) {
if (object instanceof THREE.Mesh) {
object.raycastable = true;

243
js/prototype/sponza.js vendored Normal file
View File

@@ -0,0 +1,243 @@
var isFullscreen = false;
var beenFullscreen = false;
var main_section = document.getElementById('main-section');
var container_size = {
width: function() { if (!isFullscreen) return main_section.clientWidth; else return screen.width;},
height: function() {
if (!isFullscreen)
return main_section.clientHeight
- document.getElementById('nav').offsetHeight
- document.getElementById('main-div').offsetHeight;
else
return screen.height;
}
};
// Let's be sure we avoid using global variables
var onWindowResize = (function() {
// Disable scrolling
window.onscroll = function () { window.scrollTo(0, 0); };
var mesh_number = 25;
var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0};
var bigmesh;
var raycaster;
var objects = [];
var cameras, cameraSelecter;
var spheres = new Array(mesh_number);
var visible = 0;
var stats;
var previewer;
var loader;
var coins = [];
var previousTime;
init();
animate();
function init() {
BD.disable();
// Initialize scene
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({alpha:true, antialias:true});
// Collidable objects to prevent camera from traversing objects
var collidableObjects = new Array();
// Initialize renderer
container = document.getElementById('container');
container.style.height = container_size.height() + 'px';
container.style.width = container_size.width() + 'px';
renderer.setSize(container_size.width(), container_size.height());
// renderer.setSize(container_size.width(), container_size.height());
renderer.shadowMapEnabled = true;
renderer.setClearColor(0x87ceeb);
// Initialize previewer
previewer = new Previewer(renderer, scene);
previewer.domElement.style.position ="absolute";
previewer.domElement.style.cssFloat = 'top-left';
previewer.domElement.width = container_size.width();
previewer.domElement.height = container_size.height();
// Initialize stats counter
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.cssFloat = "top-left";
// Add elements to page
container.appendChild( stats.domElement );
container.appendChild(previewer.domElement);
container.appendChild(Coin.domElement);
container.appendChild(renderer.domElement);
// Initialize pointer camera
var camera1 = new PointerCamera(50, container_size.width() / container_size.height(), 0.1, 100000, renderer, container);
// cameras = initMainScene(camera1, scene, static_path, coins);
// cameras = initPeach(camera1, scene, static_path, coins);
// cameras = initBobomb(camera1, scene, static_path, coins);
// cameras = initWhomp(camera1, scene, static_path, coins);
// cameras = initMountain(camera1, scene, static_path, coins);
cameras = initSponza(camera1, scene, static_path, coins);
// Add listeners
initListeners();
}
function initListeners() {
window.addEventListener('resize', onWindowResize, false);
// Transmit click event to camera selecter
container.addEventListener('mousedown', function(event) {
if (event.which == 1)
cameraSelecter.click(event);
}, false
);
// Update camera selecter when mouse moved
container.addEventListener('mousemove', function(event) {
cameraSelecter.update(event);
}, false
);
// Escape key to exit fullscreen mode
document.addEventListener('keydown', function(event) { if (event.keyCode == 27) { stopFullscreen();} }, false);
// HTML Bootstrap buttons
buttonManager = new ButtonManager(cameras, previewer);
// Camera selecter for hover and clicking recommendations
cameraSelecter = new CameraSelecter(renderer, scene, cameras, coins, buttonManager);
}
function render() {
cameraSelecter.update();
// Update recommendations (set raycastable if shown)
var transform = buttonManager.showArrows ? show : hide;
cameras.map(function(camera) {
if (camera instanceof RecommendedCamera) {
transform(camera);
camera.traverse(function(elt) {
elt.raycastable = buttonManager.showArrows;
});
}
});
// Update coins
coins.forEach(function(coin) { coin.update(); });
// Update main camera
var currentTime = Date.now() - previousTime;
cameras.updateMainCamera(isNaN(currentTime) ? 20 : currentTime);
previousTime = Date.now();
// Update the recommendations
cameras.update(cameras.mainCamera());
// Set current position of camera
cameras.look();
var left = 0, bottom = 0, width = container_size.width(), height = container_size.height();
renderer.setScissor(left, bottom, width, height);
renderer.enableScissorTest(true);
renderer.setViewport(left, bottom, width, height);
renderer.render(scene, cameras.mainCamera());
// Remove borders of preview
previewer.clear();
// Hide arrows in recommendation
cameras.map(function(camera) { if (camera instanceof RecommendedCamera) hide(camera); });
// Render preview
previewer.render(cameraSelecter.prev, container_size.width(), container_size.height());
}
function animate() {
// Render each frame
requestAnimationFrame(animate);
// stats count the number of frames per second
stats.begin();
render();
stats.end();
}
function onWindowResize() {
container.style.width = container_size.width() + "px";
container.style.height = container_size.height() + "px";
previewer.domElement.width = container_size.width();
previewer.domElement.height = container_size.height();
renderer.setSize(container_size.width(), container_size.height());
cameras.forEach(function(camera) {camera.aspect = container_size.width() / container_size.height();});
cameras.forEach(function(camera) {camera.updateProjectionMatrix();});
render();
}
function hide(object) {
object.traverse(function(object) {object.visible = false;});
}
function show(object) {
object.traverse(function(object) {object.visible = true;});
}
// onWindowResize will be the only global function
return onWindowResize;
})();
function fullscreen() {
var container = document.getElementById('container');
isFullscreen = true;
if (!beenFullscreen) {
beenFullscreen = true;
alert('To quit fullscren mode, type ESC key');
}
container.style.position = "absolute";
container.style.cssFloat = "top-left";
container.style.top = "50px";
container.style.bottom = "0px";
container.style.left = "0px";
container.style.right = "0px";
container.style.width="";
container.style.height="";
container.style.overflow = "hidden";
onWindowResize();
}
function stopFullscreen() {
isFullscreen = false;
var container = document.getElementById('container');
container.style.position = "";
container.style.cssFloat = "";
container.style.top = "";
container.style.bottom = "";
container.style.left = "";
container.style.right = "";
container.style.width = container_size.width() + "px";
container.style.height = container_size.height() + "px";
onWindowResize();
}

2
js/stream/main.js
View File

@@ -45,7 +45,7 @@ function init() {
// Load the scene
// loader = new THREE.OBJLoader();
sphere = ProgressiveLoader(params.get.res, scene);
sphere = ProgressiveLoader('static/data/spheres/' + params.get.res + '.obj', scene);
plane = new Plane(1000,1000);
plane.translate(0,0,-100);

1
js/three/MTLLoader.js
View File

@@ -313,6 +313,7 @@ THREE.MTLLoader.MaterialCreator.prototype = {
params[ 'map' ] = this.loadTexture( this.baseUrl + value );
params[ 'map' ].wrapS = this.wrap;
params[ 'map' ].wrapT = this.wrap;
map = params['map'];
break;