在 Three.js 中从 Base64 加载纹理答案

【问题标题】：Load textures from Base64 in Three.js在 Three.js 中从 Base64 加载纹理
【发布时间】：2016-10-11 20:16:18
【问题描述】：

我目前正在从 URL 加载纹理，但由于我的后端代码正在生成行星，因此我需要使用 Base64 显示它们。

（我正在玩程序生成，所以我不想保存图像然后通过 URL 加载它）

这是代码；

<!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>

我试过了；

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

但它似乎无法正常工作。

任何帮助将不胜感激，谢谢。

【问题讨论】：

您是否测试过图片是否正确加载？如果在 HTML 文档中输入 <img src='data:image/png;base64,<?php echo $image_data_base64 ?>'> 会发生什么？
加载正常。地图生成有点慢（这可能是问题的一部分），但除此之外它加载正常。
我认为依赖 texture.needsUpdate 是一种假设。您需要将纹理重铸为新的纹理类实例，将其应用到材质贴图，然后告诉three.js，texture.needsUpdate。否则我认为它是从 ram 重新应用旧的、空的。
你是对的，我已经发布了我如何修复它的答案。

标签： javascript three.js

【解决方案1】：

原来我必须这样做；

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

代替;

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

新的事件监听器；

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

【讨论】：