使用THREE.JS加载外部着色器 [英] Loading External Shaders Using THREE.JS

问题描述

我正在尝试使用GLSL着色器制作THREE.JS场景，但是在弄清楚如何使其加载我的着色器时遇到了麻烦.场景似乎可以正常工作，但着色器无法执行应有的功能.我正在使用着色器加载器我发现使用纯THREE.JS而不是AJAX或Jquery的函数.

I am trying to make a THREE.JS scene with GLSL shaders applied, but am having trouble figuring out how to make it load my shaders. The scene appears to work, but the shaders don't do what they're supposed to. I'm using a shader loader function I found that uses pure THREE.JS instead of AJAX or Jquery.

这是我场景的主要Javascript.

Here is the main javascript for my scene.

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

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

	container = document.getElementById( "container" ); 

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

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

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

	scene = new THREE.Scene();

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

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

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

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

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

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

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

		renderer.setSize(WIDTH, HEIGHT);

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

	container.appendChild( renderer.domElement );

	render();

} );

function render() {	
		material.uniforms[ 'time' ].value = .00025 * ( Date.now() - start );
		controls.update();
		requestAnimationFrame( render );
		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);
}
	

但是当我的场景加载时，它只是一个没有照明或没有应用着色器的红色球体...我在做什么错?我对这一切都是陌生的，因此对于经验丰富的人来说，它可能很容易被注意到，但是我经过搜索和搜索，并一直在尝试，无法弄清.

But when my scene loads, it is just a red sphere with no lighting or applied shaders... What am I doing wrong? I'm new to all of this so it is probably something easily noticeable for someone more experienced, but I have searched and searched and been experimenting and can't figure it out.

谢谢！

推荐答案

在加载着色器后尝试添加material.needsUpdate = true.

Try to add material.needsUpdate = true after you load your shader.

这篇关于使用THREE.JS加载外部着色器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！