threejs 自定义材质

最新推荐文章于 2025-03-26 11:01:38 发布

那年我七岁

最新推荐文章于 2025-03-26 11:01:38 发布

阅读量2.4k

点赞数

分类专栏： threejs 文章标签： threejs 定义着色器

本文链接：https://blog.youkuaiyun.com/qq_25909453/article/details/85045974

版权

threejs 专栏收录该内容

8 篇文章

订阅专栏

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shader</title>
    <style>
        body {
            color: #ffffff;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            font-weight: bold;

            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        a {

            color: #ffffff;
        }

        #oldie a { color:#da0 }
    </style>
    <script src="../js/three.js"></script>
    <script id="vertexShader" type="x-shader1/x-vertex1">
        void main(){
            gl_Position = vec4(position,1.0);
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
    </script>
</head>
<body>
    <div id="container"></div>
    <script>
        var container;
        var camera,scene,renderer;
        var uniforms,material,mesh;
        var mouseX = 0,mouseY= 0;
        var mouseX = 0,mouseY = 0;
        lat = 0,lon =0,phy = 0,theta = 0;

        var windowHalfX= window.innerWidth/2;
        var windowHalfY = window.innerHeight/2;

        init();
        animate();

        function init() {
            container = document.getElementById('container');

            camera = new THREE.Camera();
            camera.position.z = 0.3;

            scene = new THREE.Scene();

            material = new THREE.ShaderMaterial({
                vertexShader : document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragmentShader').textContent
            })
            mesh = new THREE.Mesh(new THREE.PlaneGeometry(1.0,1.0),material);
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer();
            container.appendChild(renderer.domElement);

            window.addEventListener('resize',onWindowResize,false);
        }
        function onWindowResize(event) {
            renderer.setSize(window.innerWidth,window.innerHeight);
        }
        function animate() {
            requestAnimationFrame(animate);
            render();
        }
        function render() {
            renderer.render(scene,camera);
        }
    </script>
</body>
</html>

vertexShader 相对于的是顶点着色器；

fragmentShader对应的是片元着色器

结果如下：

因为在片元着色器中固定了它的颜色，

gl_FragColor = vec4(1.0,0.0,0.0,1.0);所以它是红色的；

做一个随时间变色的材质，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shader</title>
    <style>
        body {
            color: #ffffff;
            font-family:Monospace;
            font-size:13px;
            text-align:center;
            font-weight: bold;

            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;
        }

        a {
            color: #ffffff;
        }

        #oldie a { color:#da0 }
    </style>
    <script src="../js/three.js"></script>
    <script id="vertexShader" type="x-shader1/x-vertex1">
        void main(){
            gl_Position = projectionMatrix*modelViewMatrix*vec4( position, 1.0 );
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
           uniform vec2 resolution;
         uniform float time;
         float a =1.0,b=1.0,c=1.0;
         float t ;
        void main(){
            t = time;
            a = abs(sin(t));
            b = abs(cos(t));
            c = abs(sin(t)*cos(t));
            gl_FragColor=vec4(vec3(a,b,c),1.0);
        }
    </script>
</head>
<body>
    <div id="container"></div>
    <script>
        var container;
        var camera,scene,renderer;
        var uniforms,material,mesh;
        var mouseX = 0,mouseY= 0;
        var mouseX = 0,mouseY = 0;
        lat = 0,lon =0,phy = 0,theta = 0;

        var windowHalfX= window.innerWidth/2;
        var windowHalfY = window.innerHeight/2;

        init();
        animate();

        function init() {
            container = document.getElementById('container');

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            uniforms = {
                time: { type: "f", value: 1.0 },
                resolution: { type: "v2", value: new THREE.Vector2() }
            };
            material = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent
            })
            mesh = new THREE.Mesh(new THREE.PlaneGeometry(2.0,2.0),material);
            scene.add(mesh);

            renderer = new THREE.WebGLRenderer();
            container.appendChild(renderer.domElement);

            window.addEventListener('resize',onWindowResize,false);
        }
        function onWindowResize(event) {
            uniforms.resolution.value.x = window.innerWidth;
            uniforms.resolution.value.y = window.innerHeight;
            renderer.setSize(window.innerWidth,window.innerHeight);
        }
        function animate() {
            requestAnimationFrame(animate);
            render();
        }
        function render() {
            uniforms.time.value += 0.05;
            renderer.render(scene,camera);
        }
    </script>
</body>
</html>

需要注意的是材质中的

uniforms，他表示可以在着色器计算过程中不变的值，可以传递给片元着色器和顶点着色器中的变量；

type 表示传递的数据类型，f 对应的是float 类型的变量，v2 对应的是vec2;

名字必须与着色其中的变量名相同；如：

uniform float time;

uniform vec2 resolution;

uniforms = {
    time: { type: "f", value: 1.0 },
    resolution: { type: "v2", value: new THREE.Vector2() }
};

value 表示往着色器中传的值；

着色器中的计算；如下：
void main(){
    t = time;
    a = abs(sin(t));
    b = abs(cos(t));
    c = abs(sin(t)*cos(t));
    gl_FragColor=vec4(vec3(a,b,c),1.0);
}

三角函数范围时-1到1 ，加绝对值就是0 到1，然后随时间的变换变换rgb,a是透明度设置为1.0；所以rgb 就是0到1直接随时间变化而变化