Three.js의 Base64에서 텍스처로드

현재 URL에서 텍스처를로드하고 있지만 백엔드 코드가 행성을 생성하고 있으므로 Base64를 사용하여 표시해야합니다.Three.js의 Base64에서 텍스처로드

여기 코드의

(I 이미지를 저장 한 다음 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 ?>';

하지만 올바르게 작동하지 않는 것 같습니다.

도움을 주시면 감사하겠습니다.

출처

2016-06-10 John

이미지를 올바르게로드했는지 테스트 했습니까? HTML 문서에 ''을 입력하면 어떻게됩니까? –

잘로드됩니다. 지도 생성은 약간 느리고 (문제의 일부일 수 있음)로드가 잘되는 것 외에는 다릅니다. – John

나는 texture.needsUpdate에 의존한다고 가정합니다. 텍스처를 새로운 텍스처 클래스 인스턴스로 다시 채우고 재질 맵에 적용한 다음 three.js에 texture.needsUpdate를 전달해야합니다. 그렇지 않으면 나는 숫양에서 오래된, 빈 것을 다시 적용하고 있다고 생각합니다. – Radio

밝혀졌습니다.

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

출처

2016-06-10 20:50:43 John

Three.js의 Base64에서 텍스처로드

답변

관련 문제