THREE.JS着色器紋理

我只是想創建一個簡單的片段着色器，將一個指定的紋理繪製到網格中。但我無法顯示它。我可以在基本的幾何圖形中顯示紋理文件，但不能用着色器處理黑色球體中的唯一結果。THREE.JS着色器紋理

我不知道什麼是錯的。任何幫助，將不勝感激！

我使用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>

來源

2016-11-14 Pablo Quintana

請訪問http：/ /stackoverflow.com/questions/38017970/plane-always-black/38018994#38018994 – WestLangley

的評論後，我可以找到，包括渲染（）函數的解決方案

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

來源

2016-11-14 23:45:58

THREE.JS着色器紋理

回答

相關問題