if (this.parentEntity === data.entity) { console.log('Entity FSDemo Loaded'); } else { return; } /** * Images */ this.imageSpoon = R3.EntityManager.Instance.findComponentById('g6oggbsg5k'); this.imageEarth = R3.EntityManager.Instance.findComponentById('fo1einfper'); this.imageBK = R3.EntityManager.Instance.findComponentById('3ufmzrnewa'); this.imageHorse = R3.EntityManager.Instance.findComponentById('w4koth16uf'); this.images = [ this.imageSpoon, this.imageEarth, this.imageBK, this.imageHorse ]; /** * Meshes */ this.meshBox = R3.EntityManager.Instance.findComponentById('2ehdod2g2a'); this.meshImageGrid = R3.EntityManager.Instance.findComponentById('9qkka13nor'); /** * Camera */ this.camera = R3.EntityManager.Instance.findComponentById('j36eiamn0s'); /** * Geometry */ this.instancedGeometry = R3.EntityManager.Instance.findComponentById('s5dfh75zza'); this.boxGeometry = R3.EntityManager.Instance.findComponentById('pwzyukkviy'); /** * Textures */ this.textureWhite = R3.EntityManager.Instance.findComponentById('642tyh30uo'); /** * Materials */ this.materialRawPhong = R3.EntityManager.Instance.findComponentById('r153c4450d'); /** * Mouse and Raycasting */ this.mouse = R3.EntityManager.Instance.findComponentById('znif4n23an'); this.raycaster = R3.EntityManager.Instance.findComponentById('69s5vsshb9'); /** * Custom Code Components */ this.beforeRender = R3.EntityManager.Instance.findComponentById('wlw063ovw9'); this.keyUp = R3.EntityManager.Instance.findComponentById('ip0443a52d'); this.mouseMove = R3.EntityManager.Instance.findComponentById('n9evs68jpd'); /** * Program parameters */ this.attributeData = null; this.updateInformation = []; this.currentIndex = 0; this.maxIndex = this.images.length - 1; /** * Attributes */ this.offsetAttribute = null; this.scaleAttribute = null; /** * Generates new Attribute Data based on the image index according to 'width' and 'height' */ R3.CustomCode.prototype.generateAttributeData = function(index) { var width = this.images[index].width; var height = this.images[index].height; var heightData = this.images[index].getHeightData(); var offsets = []; var scales = []; var orientations = []; var x, y, z, scale, h = 0; for (x = 0; x < width; x++) { for (y = 0; y < height; y++) { h = heightData[(y * width) + x]; z = h * 50; scale = h * 1.9; offsets.push((x - 64) * 2, (64 - y) * 2, z); orientations.push(0, 0, 0, 1); scales.push(scale, scale, scale); } } return { offsets : offsets, scales : scales, orientations : orientations }; }.bind(this); /** * Builds our instanced geometry */ R3.CustomCode.prototype.buildInstancedGeometry = function(index) { this.attributeData = this.generateAttributeData(index); var uniforms = Object.assign( THREE.UniformsLib['lights'], THREE.UniformsLib['common'], { map : { value : this.textureWhite.instance } } ); uniforms.opacity.value = 0.7; uniforms.diffuse.value.r = 0.349; uniforms.diffuse.value.g = 0.556; uniforms.diffuse.value.b = 0.729; this.materialRawPhong.instance.uniforms = uniforms; this.instancedGeometry.instance.index = this.boxGeometry.instance.index; this.instancedGeometry.instance.groups = this.boxGeometry.instance.groups; this.instancedGeometry.instance.attributes.position = this.boxGeometry.instance.attributes.position; this.instancedGeometry.instance.attributes.normal = this.boxGeometry.instance.attributes.normal; this.instancedGeometry.instance.attributes.uv = this.boxGeometry.instance.attributes.uv; this.offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array(this.attributeData.offsets), 3 ).setDynamic(true); var orientationAttribute = new THREE.InstancedBufferAttribute( new Float32Array(this.attributeData.orientations), 4 ); this.scaleAttribute = new THREE.InstancedBufferAttribute( new Float32Array(this.attributeData.scales), 3 ).setDynamic(true); this.instancedGeometry.instance.addAttribute('offset', this.offsetAttribute); this.instancedGeometry.instance.addAttribute('orientation', orientationAttribute); this.instancedGeometry.instance.addAttribute('scale', this.scaleAttribute); }.bind(this); /** * Builds update information holding our current position and scale, and our target position and scale */ R3.CustomCode.prototype.generateAnimationVectors = function(attributeData) { if (!attributeData) { console.warn('animation not ready'); } var i, index0, index1, index2, itemSize; itemSize = this.offsetAttribute.itemSize; this.updateInformation = []; for (i = 0; i < this.offsetAttribute.count; i++) { index0 = itemSize * i; index1 = index0 + 1; index2 = index1 + 1; this.updateInformation.push( { offset : { current : new THREE.Vector3( this.offsetAttribute.array[index0], this.offsetAttribute.array[index1], this.offsetAttribute.array[index2] ), target : new THREE.Vector3( attributeData.offsets[index0], attributeData.offsets[index1], attributeData.offsets[index2] ) }, scale : { current : new THREE.Vector3( this.scaleAttribute.array[index0], this.scaleAttribute.array[index1], this.scaleAttribute.array[index2] ), target : new THREE.Vector3( attributeData.scales[index0], attributeData.scales[index1], attributeData.scales[index2] ) } } ); } }.bind(this); /** * Load the next animation */ R3.CustomCode.prototype.loadNext = function() { this.currentIndex++ if (this.currentIndex > this.maxIndex) { this.currentIndex = 0; } var attributeData = this.generateAttributeData(this.currentIndex, 128, 128); this.generateAnimationVectors(attributeData); /** * Notify our render component that we are ready to start animating */ this.beforeRender.startAnimation = true; }.bind(this); /** * Performs the actual update to our instanced geometry */ R3.CustomCode.prototype.updateAttributeArrays = function(alpha) { var i, offset, scale; var offsets = []; var scales = []; for (i = 0; i < this.updateInformation.length; i++) { offset = this.updateInformation[i].offset; scale = this.updateInformation[i].scale; offset.current.lerp( offset.target, alpha ); offsets.push( offset.current.x, offset.current.y, offset.current.z ); scale.current.lerp( scale.target, alpha ); scales.push( scale.current.x, scale.current.y, scale.current.z ); } this.offsetAttribute.setArray(new Float32Array(offsets)); this.scaleAttribute.setArray(new Float32Array(scales)); this.offsetAttribute.needsUpdate = true; this.scaleAttribute.needsUpdate = true; }.bind(this); this.buildInstancedGeometry(0); this.beforeRender.entityLoaded = this; this.keyUp.entityLoaded = this; this.mouseMove.entityLoaded = this; window.setInterval(this.loadNext, 10000); R3.Event.Emit(R3.Event.WINDOW_RESIZE, R3.Utils.GetWindowSize()); this.meshImageGrid.updateInstance('lookAt'); //@ sourceURL=entityLoaded.js