使用THREE.JS

Question

我正在尝试使用GLSL着色器制作一个THREE.JS场景，但我无法弄清楚如何使其加载我的着色器。场景似乎有效，但着色器不能做他们应该做的事情。我使用shader loader函数，我发现它使用纯THREE.JS而不是AJAX或Jquery。

这是我的场景的主要JavaScript。

＆＃13;

＆＃13;

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);
}
	

＆＃13;

＆＃13;

＆＃13;

但是当我的场景加载时，它只是一个没有光线或应用着色器的红色球体......我做错了什么？我对所有这些都是新手，所以对于经验丰富的人来说，这可能很容易引起注意，但我已经搜索并搜索并进行了实验，无法弄明白。

谢谢！

Answer 1

WebGL检测器的代码段显示错误。 你在加载那个图书馆吗？ https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js

Answer 2

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