个人中心
gpt4 book ai didi

javascript - 在 Three.js 中从 Base64 加载纹理

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:13:48 35 4
gpt4 key购买 nike

我目前正在从 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 ?>';

但它似乎没有正常工作。

非常感谢任何帮助，谢谢。

最佳答案

事实证明我不得不这样做；

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; 
});

关于javascript - 在 Three.js 中从 Base64 加载纹理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37755406/

35 4 0
文章推荐： android - 协程 - 单元测试 viewModelScope.launch 方法
文章推荐： java - Okhttp.Builder 中的 ExceptionInInitializerError w/Multidex & Kitkat
文章推荐： ios - CoreData加密提交到应用商店时是否需要任何类型的额外文件
文章推荐： ios - 为什么我的自定义表格单元格不显示文本？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com