THREE.JS 셰이더 텍스처

Question

메시에 지정된 텍스처를 그리는 간단한 조각 쉐이더를 만들려고합니다. 그러나 나는 그것을 보여줄 수 없다. 텍스쳐 파일을 기본 gemetry에 표시 할 수 있지만 쉐이더에서는 검은 색 구형의 유일한 결과를 얻지 못합니다.

무엇이 잘못 되었나요. 어떤 도움을 주시면 감사하겠습니다!/:

내가 검토 한 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();