shader01_texture简单应用

最新推荐文章于 2024-01-31 14:09:19 发布

webgl_谷子

最新推荐文章于 2024-01-31 14:09:19 发布

阅读量2.9k

点赞数 1

分类专栏： shader shader学习文章标签： shader入门 shader纹理应用 shader与three结合纹理应用 shaderMaterial

本文链接：https://blog.csdn.net/weixin_39452320/article/details/84981095

版权

shader 同时被 2 个专栏收录

4 篇文章 2 订阅

订阅专栏

shader学习

4 篇文章 0 订阅

订阅专栏

需要电子档书籍或者源码可以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>