threejs加载外部shader文件替代加载html标签的里的文件

下面贴出如何加载的代码:

引入jquery插件:

<script src="r95/jquery-3.1.1.js"></script>

初始化加载shader文件:

function initglsl(){
        var error = document.getElementById('error');
        vertDeferred = $.ajax({
            url: './shaders/pbr-vert.glsl',
            dataType: 'text',
            async: true,
            error: (jqXhr, textStatus, errorThrown) => {
                error.innerHTML += 'Failed to load the vertex shader: ' + errorThrown + '<br>';
            }
        });
        fragDeferred = $.ajax({
            url: './shaders/pbr-frag.glsl',
            dataType: 'text',
            async: true,
            error: (jqXhr, textStatus, errorThrown) => {
                error.innerHTML += 'Failed to load the fragment shader: ' + errorThrown + '<br>';
            }
        });
        $.when(vertDeferred, fragDeferred).then((vertSource, fragSource) => {
            initModel(vertSource[0], fragSource[0]);
         });
    };

初始化模型:

function initModel(vertSource, fragSource) {

        var axis = new THREE.Vector3(0,1,0);    //创建一个三维向量
        var rotWorldMatrix = new THREE.Matrix4();      //创建一个4*4矩阵
        rotWorldMatrix.makeRotationAxis(axis.normalize(),  Math.PI );
        var EnvironmentSize = new THREE.Vector2( window.innerWidth, window.innerWidth/2 );
        var h=Math.log(window.innerWidth)/Math.LN2,l=h-Math.log(Math.LN2)/Math.LN2;
       //材质
        sm= new THREE.ShaderMaterial({
                    uniforms:{
                      。。。。。。。。                   
                    },
                    /* 从html文件中加载shader代码
                    vertexShader:document.getElementById('TestvertexShader1').textContent,
                    fragmentShader:document.getElementById('TestfragementSahder1').textContent, */
                    //加载外部的shader文件
                    vertexShader:vertSource,
                    fragmentShader:fragSource,
                    side:THREE.DoubleSide,
                   // blending:THREE.NormalBlending,
                });

       // console.log("顶点着色器:",vertSource);
        var loader = new THREE.BinaryLoader();
        var material = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0x111111, shininess: 50 }  );
        loader.load( "./veyron_body_bin.js", function( geometry, material ) {
            var  object = new THREE.Mesh( geometry, sm  );
            object.scale.set(0.05,0.05,0.05);
            scene.add( object );
        } );
    }

猜你喜欢

转载自blog.csdn.net/weixin_43081805/article/details/86488179
今日推荐