自定义纹理着色在three.js所(Custom Texture Shader in Three.j

我只是希望创建一个非常简单的片段着色器绘制指定纹理的网格。 我已经看了定制片段着色一小撮这样实现的：相同，建立了自己的着色器和支持它周围的JS代码。 然而，它只是不工作。 下面是我试图运行的代码的工作抽象：

顶点着色器

<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 id="fragmentShader" type="x-shader/x-fragment">
    uniform sampler2D texture1;

    varying vec2 vUv;

    void main() {
        gl_FragColor = texture2D(texture1, vUv); // Displays Nothing
        //gl_FragColor = vec4(0.5, 0.2, 1.0, 1.0); // Works; Displays Flat Color
    }
</script>

场景代码

<script>
    // Initialize WebGL Renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    var canvas = document.getElementById('canvas').appendChild(renderer.domElement);

    // Initialize Scenes
    var scene = new THREE.Scene();

    // Initialize Camera
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100);
    camera.position.z = 10;

    // Create Light
    var light = new THREE.PointLight(0xFFFFFF);
    light.position.set(0, 0, 500);
    scene.add(light);

    // Create Ball
    var vertShader = document.getElementById('vertexShader').innerHTML;
    var fragShader = document.getElementById('fragmentShader').innerHTML;

    var uniforms = {
        texture1: { type: 't', value: 0, texture: THREE.ImageUtils.loadTexture( 'texture.jpg' ) }
    };

    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertShader,
        fragmentShader: fragShader
    });

    var ball = new THREE.Mesh(new THREE.SphereGeometry(1, 50, 50), material);
    scene.add(ball);

    // Render the Scene
    renderer.render(scene, camera);
</script>

texture.jpg存在，并显示当映射到一个MeshLambertMaterial 。 当切换我的片段着色器以简单的颜色（在代码中说明输出）它可以正确地显示球。

运行此显示什么都没有。 我没有得到任何错误，皮球稍稍不会出现在所有。

我知道我必须做一些根本性的错误，但我一直在寻找在此代码似乎几天现在的工作相同的例子，我觉得我扑我的头靠在墙上。 任何帮助，将不胜感激！

编辑：我使用three.js所修订51

Answer 1:

您还在使用旧的语法制服

var uniforms = {
    texture1: {
        type: "t",
        value: 0,
        texture: THREE.ImageUtils.loadTexture("texture.jpg")
    }
};

这是新的语法

var uniforms = {
    texture1: { type: "t", value: THREE.ImageUtils.loadTexture( "texture.jpg" ) }
};

文章来源: Custom Texture Shader in Three.js