From f1a7d1c033e8fb1d96f10b2209036ab9cd36085d Mon Sep 17 00:00:00 2001 From: Thomas FORGIONE Date: Tue, 7 Apr 2015 16:05:43 +0200 Subject: [PATCH] Added streaming simulation --- index.html | 10 +++++ js/ProgressiveSphere.js | 80 ++++++++++++++++++++++++++++++++++++ stream/index.html | 27 +++++++++++++ stream/js/main.js | 90 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 207 insertions(+) create mode 100644 js/ProgressiveSphere.js create mode 100644 stream/index.html create mode 100644 stream/js/main.js diff --git a/index.html b/index.html index 2918499..de7687b 100644 --- a/index.html +++ b/index.html @@ -32,6 +32,16 @@ camera that you want.

+
  • +

    + Streaming simulation +

    +

    + A mesh of a sphere is fully loaded, and displayed + progressively. This test is here to prove that we can + dynamically add vertices and faces to a mesh. +

    +
    • diff --git a/js/ProgressiveSphere.js b/js/ProgressiveSphere.js new file mode 100644 index 0000000..d5ae674 --- /dev/null +++ b/js/ProgressiveSphere.js @@ -0,0 +1,80 @@ +var ProgessiveSphere = function(loader) { + Displayable.call(this); + this.started = false; + this.finished = false; + this.wasFinished = false; + this.begin = false; + this.addedToScene = false; + + (function(self) { + loader.load('/data/spheres/4.obj', function(object) { + object.traverse(function(child) { + if (child instanceof THREE.Mesh) { + child.up = new THREE.Vector3(0,0,1); + self.totalMesh = child; + self.geometry = new THREE.Geometry(); + self.material = new THREE.MeshLambertMaterial(); + self.material.color.setRGB(1,0,0); + self.material.side = THREE.DoubleSide; + self.mesh = new THREE.Mesh(self.geometry, self.material); + self.current_face = 0; + self.started = true; + self.begin = true; + self.addToScene(scene); + } + }); + }); + })(this); + +} +ProgessiveSphere.prototype = Object.create(Displayable.prototype); +ProgessiveSphere.prototype.constructor = ProgessiveSphere; + +ProgessiveSphere.prototype.addFace = function() { + if (this.started && this.begin && this.addedToScene) { + if (this.current_face < this.totalMesh.geometry.attributes.position.array.length / 3) { + + // Add the 3 new vertices + this.geometry.vertices.push(new THREE.Vector3( + this.totalMesh.geometry.attributes.position.array[3*this.current_face], + this.totalMesh.geometry.attributes.position.array[3*this.current_face+1], + this.totalMesh.geometry.attributes.position.array[3*this.current_face+2] + )); + + this.geometry.vertices.push(new THREE.Vector3( + this.totalMesh.geometry.attributes.position.array[3*this.current_face+3], + this.totalMesh.geometry.attributes.position.array[3*this.current_face+4], + this.totalMesh.geometry.attributes.position.array[3*this.current_face+5] + )); + + this.geometry.vertices.push(new THREE.Vector3( + this.totalMesh.geometry.attributes.position.array[3*this.current_face+6], + this.totalMesh.geometry.attributes.position.array[3*this.current_face+7], + this.totalMesh.geometry.attributes.position.array[3*this.current_face+8] + )); + + // Add the new face + this.geometry.faces.push(new THREE.Face3(this.current_face, this.current_face+1, this.current_face+2)); + + // Update the stuff + this.geometry.computeFaceNormals(); + this.current_face += 3; + this.geometry.elementsNeedUpdate = true; + this.geometry.normalsNeedUpdate = true; + this.geometry.verticesNeedUpdate = true; + this.geometry.groupsNeedUpdate = true; + } else { + this.finished = true; + } + } + + if (!this.wasFinished && this.finished) { + this.wasFinished = true; + alert("Finished reconstructing the mesh !"); + } +} + +ProgessiveSphere.prototype.addToScene = function(scene) { + Displayable.prototype.addToScene.call(this, scene); + this.addedToScene = true; +} diff --git a/stream/index.html b/stream/index.html new file mode 100644 index 0000000..8e972b5 --- /dev/null +++ b/stream/index.html @@ -0,0 +1,27 @@ + + + + The begining + + + +

    Here is stuff

    +
    + + + + + + + + + + + + + + + + + + diff --git a/stream/js/main.js b/stream/js/main.js new file mode 100644 index 0000000..0f3a029 --- /dev/null +++ b/stream/js/main.js @@ -0,0 +1,90 @@ +var mesh_number = 25; +var renderer, scene, controls, cube, container, plane, mouse= {x:0, y:0}, sphere; +var bigmesh; +var raycaster; +var objects = []; +var spheres = new Array(mesh_number); +var visible = 0; + +var loader; + +var container_size = {width: 1067, height: 600}; + +init(); +animate(); + +function init() { + // on initialise le moteur de rendu + container = document.getElementById('container'); + container.style.height = container_size.height + 'px'; + container.style.width = container_size.width + 'px'; + renderer = new THREE.WebGLRenderer({alpha:"true"}); + renderer.setSize(container_size.width, container_size.height); + renderer.shadowMapEnabled = true; + // renderer.setClearColor(0x000000); + document.getElementById('container').appendChild(renderer.domElement); + + // on initialise la scène + scene = new THREE.Scene(); + raycaster = new THREE.Raycaster(); + + // init light + var directional_light = new THREE.DirectionalLight(0x999999); + directional_light.position.set(1, 0.5, 1).normalize(); + directional_light.castShadow = true; + scene.add(directional_light); + + var ambient_light = new THREE.AmbientLight(0x333333); + scene.add(ambient_light); + + // on initialise la camera que l’on place ensuite sur la scène + camera = new Camera(50, container_size.width / container_size.height, 1, 100000); + scene.add(camera); + + window.addEventListener('resize', onWindowResize, false); + container.addEventListener('mousedown', function() { } , false); + + // Load the scene + loader = new THREE.OBJLoader(); + sphere = new ProgessiveSphere(loader); + // sphere.addToScene(scene); + + // sphere.addToScene(scene); + + plane = new Plane(1000,1000); + plane.translate(0,0,-100); + plane.addToScene(scene); + +} + +function animate() { + // on appelle la fonction animate() récursivement à chaque frame + requestAnimationFrame(animate); + + camera.update(); + camera.look(); + + sphere.addFace(); + + renderer.render(scene, camera); +} + +function onWindowResize() { + camera.aspect = container.offsetWidth / container.offsetHeight; + camera.updateProjectionMatrix(); + + renderer.setSize(container.offsetWidth, container.offsetHeight); + renderer.render(scene, camera); +} + +function hide(object) { + object.traverse(function(object) {object.visible = false;}); +} + +function show(object) { + object.traverse(function(object) {object.visible = true;}); +} + +function click(event) { + // Nope +}