我正在尝试使用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
但是,当我的场景加载,它只是一个红球,没有照明或应用的着色器......我在做什么错?我对所有这些都很陌生,所以对于更有经验的人来说,这可能是一件容易引起注意的事情,但我已经搜索过,并且正在进行试验,并且无法弄清楚。
谢谢!
是的,我包含所有需要的库,因为着色器加载器只使用three.js。其他一切正在运行,只是没有正确加载着色器。场景看起来不像我在顶点着色器中使用的噪声函数 – shitwithcolors