背景颜色格式设置

更多有趣示例 尽在小红砖社区

示例

HTML

<script id="vertexShader" type="x-shader/x-vertex">
		void main() {
				gl_Position = vec4( position, 1.0 );
		}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
		uniform vec2 u_resolution;
		uniform float u_time;

		void main() {
				vec2 st = gl_FragCoord.xy/u_resolution.xy;
				gl_FragColor=vec4(st.x,st.y,0.0,1.0);
		}
</script>

CSS

* {
	margin: 0;
	padding: 0;
	
}

JS

var container;
var camera, scene, renderer;
var uniforms;

init();
animate();

function init() {
		container = document.getElementById( 'container' );

		camera = new THREE.Camera();
		camera.position.z = 1;

		scene = new THREE.Scene();

		var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

		uniforms = {
				u_time: { type: "f", value: 1.0 },
				u_resolution: { type: "v2", value: new THREE.Vector2() },
				u_mouse: { type: "v2", value: new THREE.Vector2() }
		};

		var material = new THREE.ShaderMaterial( {
				uniforms: uniforms,
				vertexShader: document.getElementById( 'vertexShader' ).textContent,
				fragmentShader: document.getElementById( 'fragmentShader' ).textContent
		} );

		var mesh = new THREE.Mesh( geometry, material );
		scene.add( mesh );

		renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio( window.devicePixelRatio );

		container.appendChild( renderer.domElement );

		onWindowResize();
		window.addEventListener( 'resize', onWindowResize, false );

		document.onmousemove = function(e){
			uniforms.u_mouse.value.x = e.pageX
			uniforms.u_mouse.value.y = e.pageY
		}
}

function onWindowResize( event ) {
		renderer.setSize( window.innerWidth, window.innerHeight );
		uniforms.u_resolution.value.x = renderer.domElement.width;
		uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
		requestAnimationFrame( animate );
		render();
}

function render() {
		uniforms.u_time.value += 0.05;
		renderer.render( scene, camera );
}