Load textures from Base64 in Three.js

I am currently loading textures from URLs but since my back-end code is generating planets I need them to be displayed using Base64.

(I’m playing around with procedural generation so I’d prefer not to save the image and then load it via URL)

Here’s the code;

<!DOCTYPE html><html class=''>
<head>
<style>body {
  background: black;
  text-align: center;
}
</style></head><body>
<script id="vertexShader" type="x-shader/x-vertex">
            uniform vec3 viewVector;
            uniform float c;
            uniform float p;
            varying float intensity;

            void main({
                vec3 vNormal = normalize( normalMatrix * normal );
                vec3 vNormel = normalize( normalMatrix * viewVector );
                intensity = pow( c - dot(vNormal, vNormel), p );

                gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
            }
        </script>

        <script id="fragmentShader" type="x-shader/x-fragment"> 
            uniform vec3 glowColor;
            varying float intensity;

        void main() {
            vec3 glow = glowColor * intensity;
            gl_FragColor = vec4( glow, 1.0 );
        }
        </script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r63/three.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/orbitcontrols.js'></script>
<script>var container, controls, camera, renderer, scene, light,
rotationSpeed = 0.02,
clock = new THREE.Clock(),
WIDTH = window.innerWidth - 30,
HEIGHT = window.innerHeight - 30;

//cam vars
var angle = 45,
aspect = WIDTH / HEIGHT,
near = 0.1,
far = 10000;

//mesh vars
var earthMesh, Atmos, AtmosMat;

    container = document.createElement('div');
    document.body.appendChild(container);

    //cam
    camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
    camera.position.set(1380, -17, 394);

     //scene
    scene = new THREE.Scene();
    camera.lookAt(scene.position);


    //light          
    light = new THREE.SpotLight(0xFFFFFF, 1, 0, Math.PI / 2, 1);
    light.position.set(4000, 4000, 1500);
    light.target.position.set (1000, 3800, 1000);
    light.castShadow = true;
    //light.shadowCameraNear = 1;
    //light.shadowCameraFar = 10000;
    //light.shadowCameraFov = 50;

    scene.add(light);

    //EARTH
    var earthGeo = new THREE.SphereGeometry (200, 400, 400),
        earthMat = new THREE.MeshPhongMaterial();
    earthMesh = new THREE.Mesh(earthGeo, earthMat);

    earthMesh.position.set(-100, 0, 0);
    earthMesh.rotation.y=5;
    scene.add(earthMesh);

    //diffuse
    earthMat.map = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/earthmap.jpg');
    //bump
    earthMat.bumpMap = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/bump-map.jpg');
    earthMat.bumpScale = 8;
    //specular
    earthMat.specularMap = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/earthspec1k.jpg');
    earthMat.specular = new THREE.Color('#2e2e2e');

    earthMesh.castShadow = true;
    earthMesh.receiveShadow = true;

    //Atmosphere
    AtmosMat = new THREE.ShaderMaterial({
      uniforms:{
        "c": { type: "f", value: 0.3 },
        "p": { type: "f", value: 5.2},
        glowColor: { type: "c", value: new THREE.Color(0x00dbdb)},
        viewVector: { type: "v3", value: camera.position}
      },
      vertexShader: document.getElementById('vertexShader').textContent,
      fragmentShader: document.getElementById('fragmentShader').textContent,
      side: THREE.BackSide,
      blending: THREE.AdditiveBlending,
      transparent: true
    });

    Atmos = new THREE.Mesh(earthGeo, AtmosMat);
    Atmos.position = earthMesh.position;
    Atmos.scale.multiplyScalar(1.2);
    scene.add(Atmos);

    //STARS
    var starGeo = new THREE.SphereGeometry (3000, 10, 100),
        starMat = new THREE.MeshBasicMaterial();
    starMat.map = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/star-field.png');
    starMat.side = THREE.BackSide;

    var starMesh = new THREE.Mesh(starGeo, starMat);

    scene.add(starMesh);


    //renderer
    renderer = new THREE.WebGLRenderer({antialiasing : true});
    renderer.setSize(WIDTH, HEIGHT);

    container.appendChild(renderer.domElement);


    //controls
    controls = new THREE.OrbitControls( camera, renderer.domElement);
    controls.addEventListener( 'change', render );


      function animate(){

        requestAnimationFrame(animate);
        controls.update();
        render();       
      }

      function render(){
        var delta = clock.getDelta();

                earthMesh.rotation.y += rotationSpeed * delta;
        renderer.clear();
        renderer.render(scene, camera); 
      }

animate();
//# sourceURL=pen.js
</script>
</body></html>

I have tried;

image = document.createElement( 'img' );
document.body.appendChild( image );

earthMat.map = new THREE.Texture( image );

image.addEventListener( 'load', function ( event ) { texture.needsUpdate = true; } );
image.src = 'data:image/png;base64,<?php echo $image_data_base64 ?>';

But it doesn’t seem to be working correctly.

Any help would be greatly appreciated, thanks.

Answer

Turns out I had to do;

earthMat.map = THREE.ImageUtils.loadTexture( image.src );

Instead of;

earthMat.map = new THREE.Texture( image );

new event listener;

image.addEventListener( 'load', function ( event ) { 
    earthMat.map = THREE.ImageUtils.loadTexture( image.src );
    earthMat.needsUpdate = true; 
});

Advertisement

Answer