需要電子檔書籍或者源碼可以Q羣：828202939 希望可以和大家一起學習、一起進步！！
如有錯別字或有理解不到位的地方，可以留言或者加微信15250969798，博主會及時修改！！！！！
最近博主在學習shader，就隨手記了下來！！
本博客適合對頂點、片元着色器的基礎有一定了解，如果不瞭解請看博主的WebGL系列博客！
這裏是官方文檔ShaderMaterial！
今天學習shader的texture簡單應用
效果圖示：
代碼如下：
<!doctype html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shader01_texture簡單應用</title>
<script src="../../../build/three.js"></script>
<script src="../../js/controls/OrbitControls.js"></script>
<script type="x-shader/x-fragment" id="fragmentShader">
//獲取紋理
uniform sampler2D texture1;
//紋理座標
varying vec2 vUv;
void main(void){
//texture2D()獲取紋素
gl_FragColor = texture2D(texture1, vUv);
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
//projectionMatrix * mvPosition; 最終得到MVP矩陣
gl_Position = projectionMatrix * mvPosition;
}
</script>
<style>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<div id="Stats-output"></div>
<script>
var scene, camera, renderer,controls;
var mesh;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onResize, false);
var controls = new THREE.OrbitControls(camera);
var textureLoader = new THREE.TextureLoader();
//配置shaderMaterial中的uniforms屬性
var uniforms = {
texture1: {
value: textureLoader.load('../../textures/cube/Bridge2/negz.jpg')
}
};
//設置平鋪方式
uniforms.texture1.value.warpS = uniforms.texture1.value.warpT = THREE.RepeatWrapping;
// BoxGeometry( width, height, depth, widthSegments, heightSegments, depthSegments )
var geometry = new THREE.BoxGeometry(5, 5, 5, 3, 3, 3);
var Material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent,
side: THREE.DoubleSide
});
mesh = new THREE.Mesh(geometry, Material);
scene.add(mesh);
function onResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = (window.innerWidth / window.innerHeight);
camera.updateProjectionMatrix();
}
function render() {
requestAnimationFrame(render);
if (controls) controls.update();
mesh.rotation.y += 0.005;
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>