r3-custom-code/tuby5lj4di.js

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