THREE.JSシェーダーテクスチャ

Question

私はメッシュに指定されたテクスチャを描画する簡単なフラグメントシェーダを作成していますよ。しかし私はそれを表示することはできません。テクスチャファイルを基本的な宝石類に表示することはできますが、黒い球の唯一の結果であるシェーダでは動作しません。

私が間違っているか知っているドント。どんな助けもありがとう！ /：

は、私が審査した後Three.js THREE.WebGLRenderer 81

<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"> 
    varying vec2 vUv; 
    uniform sampler2D texture1; 

    void main() { 
     gl_FragColor = texture2D(texture1, vUv); // Displays black sphere 
     //gl_FragColor = vec4(0.5, 0.2, 1.0, 1.0); // Works; Displays 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); 
document.body.appendChild(renderer.domElement); 
renderer.setClearColor(0x888888, 1.0); 
// 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); 
// LIGHT 
var light = new THREE.PointLight(0xffffff); 
light.position.set(100,250,100); 
scene.add(light); 

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

var textura = new THREE.TextureLoader().load('./funkyGround.jpg'); 

var uniforms = { 
    texture1: { type: 't', value: textura } 
}; 

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> 

</body> 

Answer 1

を使用しています、私はレンダリング（）関数を含む溶液

function render() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
} 
render();