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

最新推荐文章于 2024-09-23 00:00:00 发布

默茉

最新推荐文章于 2024-09-23 00:00:00 发布

阅读量1.6k

点赞数

分类专栏： threejs 文章标签：加载shader

本文链接：https://blog.csdn.net/weixin_43081805/article/details/86488179

版权

本文介绍了在threejs中如何通过加载外部shader文件，而不是在HTML中使用<script type='x-shader/x-fragment'></script>标签内联的方式，来实现更灵活的shader管理。通过引入jQuery插件，然后初始化加载shader文件，最后加载模型，实现了shader的动态加载。

摘要由CSDN通过智能技术生成

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

引入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>'