Chargez des textures depuis Base64 dans Three.js

Je suis en train de charger des textures à partir d'URL, mais depuis que mon code back-end génère des planètes, j'ai besoin d'être affiché à l'aide de Base64.

(Je joue avec la génération de procédure, donc je préfère ne pas enregistrer l'image, puis la charger via l'URL)

Voici le 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>

J'ai essayé;

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

Mais cela ne semble pas fonctionner correctement.

Toute aide serait grandement appréciée, merci.

Il s'avère que je devais faire;

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

Au lieu de;

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

Nouvel auditeur d'événements;

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