使用THREE.JS加載外部着色器

我正在嘗試使用GLSL着色器製作THREE.JS場景，但是在解決如何使其加載着色器時遇到困難。場景似乎有效，但着色器沒有做到他們應該做的。我使用的是shader loader函數，我發現它使用純粹的THREE.JS而不是AJAX或Jquery。使用THREE.JS加載外部着色器

這裏是我的場景的主要JavaScript。

var container, 
 
\t renderer, 
 
\t scene, 
 
\t camera, 
 
\t light, 
 
\t mesh, 
 
\t controls, 
 
\t start = Date.now(), 
 
\t fov = 30; 
 

 
window.addEventListener('load', function() { 
 

 
\t container = document.getElementById("container"); 
 

 
\t if(!Detector.webgl) { 
 
\t \t Detector.addGetWebGLMessage(container); 
 
\t \t return; 
 
\t } 
 

 
\t //get the width and height 
 
\t var WIDTH = window.innerWidth, 
 
\t \t HEIGHT = window.innerHeight; 
 

 
\t //sphere params 
 
\t var radius = 20, 
 
\t \t segments = 4, 
 
\t \t rotation = 6; 
 

 
\t scene = new THREE.Scene(); 
 

 
\t // \t \t \t \t \t \t \t \t \t \t \t ASPECT RATIO 
 
\t camera = new THREE.PerspectiveCamera(fov, WIDTH/HEIGHT, 1, 10000); 
 
\t camera.position.z = 100; 
 

 
\t scene.add(new THREE.AmbientLight(0x333333)); 
 

 
\t light = new THREE.DirectionalLight(0xffffff, 1); 
 
\t light.position.set(100, 3, 5); 
 
\t scene.add(light); 
 

 
\t ; 
 
\t 
 
\t ShaderLoader('./shaders/vertex.vert', './shaders/fragment.frag') 
 
\t 
 
\t material = new THREE.ShaderMaterial({ 
 
\t \t \t uniforms: { 
 
\t \t \t \t tExplosion: { 
 
\t \t \t \t \t type: "t", 
 
\t \t \t \t \t value: THREE.ImageUtils.loadTexture('images/explosion.png') 
 
\t \t \t \t }, 
 
\t \t \t \t time: { \t //float initialized to 0 
 
\t \t \t \t \t type: "f", 
 
\t \t \t \t \t value: 0.0 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t vertexShader: ShaderLoader.vertex_text, 
 
\t \t \t fragmentShader: ShaderLoader.fragment_text 
 
\t }); 
 

 
\t mesh = new THREE.Mesh( 
 
\t \t new THREE.IcosahedronGeometry(radius, segments), 
 
\t \t material 
 
\t \t); 
 
\t scene.add(mesh); 
 

 
\t renderer = new THREE.WebGLRenderer(); 
 
\t renderer.setSize(WIDTH, HEIGHT); 
 
\t renderer.setPixelRatio(window.devicePixelRatio); 
 

 
\t 
 
\t //update renderer size, aspect ratio, and projectionmatrix, on resize 
 
\t window.addEventListener('resize', function() { 
 
\t \t var WIDTH = window.innerWidth, 
 
\t \t \t HEIGHT = window.innerHeight; 
 

 
\t \t renderer.setSize(WIDTH, HEIGHT); 
 

 
\t \t camera.aspect = WIDTH/HEIGHT; 
 
\t \t camera.updateProjectionMatrix(); 
 
\t }); 
 
\t 
 
\t controls = new THREE.TrackballControls(camera); 
 

 
\t container.appendChild(renderer.domElement); 
 

 
\t render(); 
 

 
}); 
 

 
function render() { \t 
 
\t \t material.uniforms[ 'time' ].value = .00025 * (Date.now() - start); 
 
\t \t controls.update(); 
 
\t \t requestAnimationFrame(render); 
 
\t \t renderer.render(scene, camera); 
 
} 
 

 
// This is a basic asyncronous shader loader for THREE.js. 
 
function ShaderLoader(vertex_url, fragment_url, onLoad, onProgress, onError) { 
 
    var vertex_loader = new THREE.XHRLoader(THREE.DefaultLoadingManager); 
 
    vertex_loader.setResponseType('text'); 
 
    vertex_loader.load(vertex_url, function (vertex_text) { 
 
     var fragment_loader = new THREE.XHRLoader(THREE.DefaultLoadingManager); 
 
     fragment_loader.setResponseType('text'); 
 
     fragment_loader.load(fragment_url, function (fragment_text) { 
 
      onLoad(vertex_text, fragment_text); 
 
     }); 
 
    }, onProgress, onError); 
 
} 
 
\t

但是，當我的場景加載，它只是一個紅球，沒有照明或應用的着色器......我在做什麼錯？我對所有這些都很陌生，所以對於更有經驗的人來說，這可能是一件容易引起注意的事情，但我已經搜索過，並且正在進行試驗，並且無法弄清楚。

謝謝！

來源

2017-07-16 shitwithcolors