How to incorporate Base64 textures into Three.js

I am currently trying to load textures from URLs, but since my backend code is generating planets, I need to display them using Base64 instead.

I'm experimenting with procedural generation, so I'd rather not save the image and then load it via URL.

Here is 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 attempted the following:

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 ?>';

However, it seems to be not working as expected.

Any assistance on this matter would be highly appreciated. Thank you.

javascriptthree.js

Answer №1

It turns out the solution was;

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

Rather than;

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

Implementing a new event listener;

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

Answer №2

While the base64 string originating from a PHP script may not align perfectly with the initial query, an elegant solution was found in our scenario using THREE.js r130:

Simply create a new texture by loading the base64 data directly with THREE.TextureLoader().load('data:image/png;base64,...')

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Nginx to Reverse Proxy to Node.js and Implement Rewrites

I have various applications running in the background behind an Nginx reverse proxy. One of these applications is a Node server using Express.js. I am forwarding domain.com/demo/app/<path> to localhost:7003/<path> through this Nginx configurati ...

javascriptnode.jsnginxexpressreverse-proxy

Storing and Retrieving Cookies for User Authentication in a Flutter Application

I am currently working on developing a platform where, upon logging in, a token is created and stored in the cookie. While I have successfully implemented a route that stores the cookie using Node.js (verified in Postman), I encounter issues when attemptin ...

javascriptnode.jsflutterexpress

Error loading jakefile: Unable to load file

After attempting to use Jake, I encountered a strange issue where Jake was unable to load the Jakefile. Any suggestions on how to resolve this? Directory Structure: jake_test >> jake.sh jake_test >> jakefile.js jake.sh file node_modules/.b ...

javascriptnode.jsjake

JavaScript is throwing an error when clicking on functions and managing the z-index property

I am experiencing difficulties with my website code. I have defined all the necessary functions and CSS, but I keep encountering errors such as "clicked is not defined," even though it is clearly present in the script. The goal of the code is to bring the ...

javascripthtml

Storing Byte Array in a File using JavaScript

I am working on a Java REST webservice that returns documents as byte array. I am trying to write JavaScript code that will retrieve the response from the webservice and save it to a file for downloading as a PDF. However, when testing my sample code, the ...

javascriptarraysrestdownloadxmlhttprequest

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

javascripthtmlcss

Expand or collapse in a sequential manner

Is there a way to ensure that only one table row expands at a time, causing the others to collapse? Any suggestions on achieving this? Here's the HTML code snippet: <table class="table"> <tbody> <tr class="parent" id="2479"> ...

javascriptjqueryhtmlcss

An error occurred in the defer callback: The specified template "wiki" does not exist

I recently developed a Meteor package called Wiki. Within the package, I included a wiki.html file that contains: <template name="wiki"> FULL WIKI UI CODE HERE </template> Next, I created a wiki.js file where I defined my collections and eve ...

javascriptmeteor

Issue with fuse-box: unable to import ReactDOM

Recently, I decided to switch from webpack to fuse-box for my side project. Everything is compiling without any issues, but when I try to load it, an error pops up: I downloaded a React demo code and it works fine. Additionally, there are no problems wit ...

javascriptreactjsreact-domfusebox

Retrieving information from MongoDB queries using Node.js

I am facing an issue while trying to retrieve data from the find() method and use it outside the method. My goal is to incorporate this data into a JSON response. Unfortunately, my current code is not working as expected and the data is not accessible outs ...

javascriptnode.jsmongodbfindresponse

example of using relative jquery countdown.js

I've been attempting to grasp JavaScript and incorporate the countdown found at this link (specifically, the example with a 300-second countdown), but after spending a few hours on it, I haven't been able to get it functioning properly. I have c ...

javascriptjquerycountdown

Using Symfony 4.3 to submit a form via Ajax and store data in a database

As a beginner in the world of Ajax, I am currently trying to use Ajax to submit a register form with Symfony but seem to be facing some challenges in understanding the process: Within my Controller: /** * @Route("/inscription", name="security_re ...

javascriptphpjqueryajaxsymfony

The process of inserting data using NextJS Mysql works seamlessly when executed through phpMyAdmin, however, it encounters issues when

My SQL query works perfectly in phpmyadmin, but I'm encountering an issue when making a request from the API. The API uses the MySQL package which was installed using: npm i mysql This is the SQL code that is causing the problem: BEGIN; INSERT INTO A ...

javascriptmysqlnode.jsnext.jsmariadb

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

javascriptjqueryhtmlcssjquery-animate

Verify if the currentRoute begins with a specific text pattern (such as something/something/*...) in Angular

I need to prevent a loader from appearing on certain screens, so I used ngIf on routes where the loader is not necessary. Here's the code snippet from app.component.ts : <router-outlet> <app-spinner></app-spinner> <ngx-ui-load ...

javascriptangularangularjsangular-ng-if

Converting JSON data into a Backbone Model

My current project involves utilizing backbone.js, and I have encountered a json data structure as follows: { first_name: 'David', last_name: 'Smith', family: [{father: 'David', mother: 'Rose', brother: ...

javascriptjqueryjsonrestbackbone.js

What is preventing me from using javascript setInterval with a function in a separate external file?

Everything is running smoothly with this code snippet...an alert pops up every 10 seconds <script type='text/javascript'> function letsTest(){ alert("it works"); } var uptimeId = window.setInterval(letsTest, 10000); < ...

javascriptsetinterval

Try out the Jquery Chosen plugin, which allows you to select multiple instances of the same

I am currently using the chosen plugin to create multiple select input fields. You can view an example of this in action by following this link: By default, the plugin disables an option if it has already been selected. For instance, in the provided examp ...

javascriptjqueryjquery-chosen

How can I retrieve the current value of a text element using jQuery?

Having an issue with my text input element where an event is triggered on blur and when the user presses enter. The problem arises when the user inputs "foo" and presses enter; the val() function returns null initially, but after the blur event, it return ...

javascriptjqueryforms

Creating JavaScript functions that accept three inputs and perform an operation on them

Apologies in advance if there are any silly mistakes as I am new to Javascript. I want to add "salary", "pension", and "other" together, then display the result in an input field when a button is clicked. Not sure if I have used the correct tags in my cod ...

javascripthtml