Question

使用three.js r71。我无法弄清楚为什么ShaderMaterial没有读取我的纹理。飞机只是黑色。我需要一双新鲜的眼睛来帮助我找出问题所在。

非常感谢！

这是HTML：

<!DOCTYPE html>

<html>
  <head>
    
    <script src="jquery.min.js"></script>
    <script src="three.min.js"></script>
    <script src="testshdr.js"></script>
    
  </head>
  
  <body>
   
    <!-- Shaders -->
    <script id="vertexShader" 
            type="x-shader/x-vertex" >

    varying vec2 vUv;

    void main(){
      vUv = uv;
      gl_Position = projectionMatrix * 
                    modelViewMatrix * 
                    vec4(position, 1.0);

    }

    </script>

    <script name="no_effect"
            id="fragmentShader_0"
            type="x-shader/x-fragment" >

    varying vec2 vUv;

    uniform sampler2D editImg;

    void main(){
      vec4 myTexture = texture2D(editImg, vUv);
      gl_FragColor = vec4 (myTexture.r, 
                           myTexture.g, 
                           myTexture.b, 
                           1.0);

    }

    </script>
   
    <script type="text/javascript">
      var tst = new TestShdr();
    </script>

  </body>
  
</html>

这是JS：

var TestShdr = function () {
  'use strict';
  
  var
    SCENE,
    RENDERER,
    CAMERA,
    GEO,
    MAT,
    OBJ,
    TEX,
    UNIFS,
    VS,
    FS;
  
  SCENE = new THREE.Scene();
  RENDERER = new THREE.WebGLRenderer();
  RENDERER.setSize(256, 256);
  
  CAMERA = new THREE.PerspectiveCamera(56, 1, 0.1, 1000);
  
  SCENE.add(CAMERA);
  CAMERA.position.z = 5;
  
  TEX = THREE.ImageUtils.loadTexture('1107.jpg');
  
  UNIFS = {
    editImg: { type: 't', value: TEX}
  };
  VS = $('#vertexShader').html();
  FS = $('#fragmentShader_0').html();
  
  GEO = new THREE.PlaneBufferGeometry(1, 1, 1, 1);
  MAT = new THREE.ShaderMaterial({uniforms: UNIFS,
                                  vertexShader: VS,
                                  fragmentShader: FS
                                 });
  OBJ = new THREE.Mesh(GEO, MAT);
  SCENE.add(OBJ);
  
  document.body.appendChild(RENDERER.domElement);
  
  RENDERER.render(SCENE, CAMERA);
  
};

Answer 1

你应该这样做：

TEX = THREE.ImageUtils.loadTexture('1107.jpg', {}, function() {
    RENDERER.render(SCENE, CAMERA);
});

ThreeJS ShaderMaterial纹理问题

1 个答案: