Shader tekstur niestandardowych w Three.js

Question

Po prostu szukam, aby stworzyć bardzo prosty Fragader Shader, który rysuje określoną teksturę do siatki. Spojrzałem na kilka niestandardowych shaderów fragmentów, które osiągnęły to samo i zbudowałem własne shadery i wspierałem kod JS wokół niego. Jednak po prostu nie działa. Oto abstrakcja pracy kodu próbuję uruchomić:

Vertex Shader

<script id="vertexShader" type="x-shader/x-vertex"> 
    varying vec2 vUv; 

    void main() { 
     vUv = uv; 

     gl_Position = projectionMatrix * 
         modelViewMatrix * 
         vec4(position,1.0); 
    } 
</script> 

Fragment Shader

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

Kod Scena

<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 istnieje i wyświetla się po mapowaniu na MeshLambertMaterial. Po przełączeniu shadera fragmentu na prosty kolor (skomentowany w kodzie) poprawnie wyświetla piłkę.

Uruchamiając to nic nie wyświetla. Nie mam żadnych błędów, piłka po prostu się nie pojawia.

Wiem, że muszę robić coś fundamentalnie złego, ale przeglądam te same przykłady, w których ten kod zdaje się działać przez kilka dni i mam wrażenie, że walnę głową w ścianę. Każda pomoc będzie doceniona!

Edycja: używam Three.js Wersja 51

Answer 1

wciąż używasz starej składni mundurów

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

To jest nowa składnia

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