核心提示：上次咱们使用shaderMaterial实现纹理贴图，之后进一步拓展，在之前的基础上加上平行光与漫反射光的效果。代码如下：!DOCTYPE html PUBLIC -//W3C//DTD XHTML ...
上次咱们使用shaderMaterial实现纹理贴图，之后进一步拓展，在之前的基础上加上平行光与漫反射光的效果。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="libs/three.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="libs/stats.min.js"></script>
<script src="js/stats.js"></script>
<script src="js/windowResize.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
varying vec3 vNormal;
void main(){
vUv = uv;
vNormal = normal;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
//projectionMatrix * mvPosition; 最终得到MVP矩阵
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentShader">
//获取纹理
uniform sampler2D texture1;
//加载的时间
uniform float u_time;
vec3 u_lightColor = vec3(1.0, 1.0, 1.0);//光线的颜色
//光的入射方向
uniform vec3 u_lightDirection;
//纹理坐标
varying vec2 vUv;
//法线
varying vec3 vNormal;
void main(void){
vec3 faceNormal = normalize(vNormal);//表面的法向量
//获取入射光线与法向量的夹角
float nDotL = max(dot(u_lightDirection, faceNormal), 0.0);
//vec4 a_color = texture2D(texture1, vUv) * vec4(abs(sin(u_time)), abs(cos(u_time)), 0.0, 1.0);
vec4 a_color = texture2D(texture1, vUv);
vec4 AmbientColor = vec4(u_lightColor, 1.0) * a_color;//环境光
vec4 diffuseColor = a_color * vec4(u_lightColor, 1.0) * nDotL;//漫反射光的颜色
gl_FragColor = a_color * (AmbientColor + diffuseColor) ;
}
</script>
<style>
*{ margin:0; padding:0}
</style>
</head>
<body>
<p id="Stats-output"></p>
</body>
<script>
var stats = initStats();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var textureLoader = new THREE.TextureLoader();
var uniforms = {
//所用到的纹理
texture1 : {value : textureLoader.load('img/img-1.png')},
//加载时间先初始化为1.0
u_time : {value : 1.0},
//光线方向，先进行归一化
u_lightDirection : {value : new THREE.Vector3(0.5, 3.0, 4.0).normalize()}
};
uniforms.texture1.value.warpS = uniforms.texture1.value.warpT = THREE.RepeatWrapping;
var boxGeometry = new THREE.BoxGeometry(3, 3, 3);
//计算box的顶点法线，之后threejs会给出一个默认值normal，这个就是顶点法线
boxGeometry.computeVertexNormals();
var boxMaterial = new THREE.ShaderMaterial({
uniforms : uniforms,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
color:0x00BBFF
});
var box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
var orbitControls = new THREE.OrbitControls(camera);
var clock = new THREE.Clock();
function render() {
stats.update();
var delta = clock.getDelta();
uniforms.u_time.value += 0.6 * delta;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();
</script>
</html>
最终结果如下：
