shader01_texture简单应用 - 好文

需要电子档书籍或者源码可以Q群：828202939
<https://blog.csdn.net/weixin_39452320/article/details/84981095?_wv=1027&k=58pY3nD>
希望可以和大家一起学习、一起进步！！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，博主会及时修改！！！！！

最近博主在学习shader，就随手记了下来！！

本博客适合对顶点、片元着色器的基础有一定了解，如果不了解请看博主的WebGL系列博客！

这里是官方文档ShaderMaterial
<https://threejs.org/docs/api/en/materials/ShaderMaterial.html>！

今天学习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>

热门工具换一换