立方体にシェーダを設定

const geometry = new THREE.BoxGeometry(4,4,4);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry,material);
scene.add(box);

//バーテックスシェーダ
const vertexShader =`

	//精度の指定
	precision mediump float;

	//modelViewMatrixの宣言
	uniform mat4 modelViewMatrix;

	//projectionMatrixの宣言
	uniform mat4 projectionMatrix;

	//positionの宣言
	attribute vec3 position;

	//uvの宣言
	attribute vec2 uv;

	varying vec2 vUv;

	void main(){
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);

		//フラグメントシェーダにuvを転送
		vUv = uv;
	}
`;

//フラグメントシェーダ
const fragmentShader =`

	//精度の指定
	precision mediump float;

	//timeを取得
	uniform float time;

	//vUvを取得
	varying vec2 vUv;

	void main(){

		//uv座標系で、オブジェクトの中心に原点を設定
		vec2 fuv = -1.0 + 2.0 * vUv;

		//uv座標系を使用して描画色を設定
		float r = abs(sin(fuv.s * fuv.t + time / 5.0));
		float g = abs(sin(fuv.s * fuv.t + time / 4.0));
		float b = abs(sin(fuv.s * fuv.t + time / 3.0));

		gl_FragColor = vec4(r,g,b,1.0);
	}
`;

const geometry = new THREE.BoxGeometry(4,4,4);

//timeを設定
const uniforms = {
	time:{type:'f',value:1.0}
};

//RawShaderMaterial
const material = new THREE.RawShaderMaterial({
	uniforms:uniforms,
	vertexShader:vertexShader,
	fragmentShader:fragmentShader,
});

const box = new THREE.Mesh(geometry,material);
scene.add(box);

let step = 0;

function rendering(){
	requestAnimationFrame(rendering);

	step++;

	//timeを更新
	box.material.uniforms.time.value = step / 60.0 * 5;

	renderer.render(scene,camera);
}