Point Cloud Dynamic Texture Array

Add many textures to a point cloud dynamically.

by Shashank D

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    
</script>

CSS

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
}

Babel + JSX

function World() {
    this.init();
}

World.prototype.init = function () {
    this.setupEnvironment();

    var scope = this;

    this.callResize = function () {
        scope.resize();
    };
    window.addEventListener('resize', this.callResize, false);

    this.callRender = function () {
        scope.render();
        scope.renderID = requestAnimationFrame(scope.callRender);
    };
    this.callRender();
};

World.prototype.setupEnvironment = function () {
    this.renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: false
    });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.renderer.setClearColor(0x000000, 0);
    this.renderer.domElement.id = "canvas";
    this.renderer.context.getProgramInfoLog = function () {
        return ''
    }; // muzzle
    document.body.appendChild(this.renderer.domElement);

    this.camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    this.camera.position.set(0, 0, 50);
    this.scene = new THREE.Scene();

    this.container = new THREE.Object3D();
    this.scene.add(this.container);

    var scene = this.scene;

    var particleCount = 100;

    var uniforms = {
        textures: {
            type: 'tv',
            value: this.getTextures()
        }
    };

    var attributes = {
        texIndex: {
            type: 'f',
            value: []
        },
        color: {
            type: 'c',
            value: []
        },
    };

    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        attributes: attributes,
        vertexShader: this.getVertexShader(),
        fragmentShader: this.getFragmentShader(uniforms.textures.value.length),
        transparent: true
    });

    var geometry = new THREE.Geometry();

    for (var i = 0; i < particleCount; i++) {
        geometry.vertices.push(new THREE.Vector3(
        (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50));
   ...