时间戳

首页 > 解决方案 > ShaderMaterial 的问题

javascript - ShaderMaterial 的问题

问题描述

首先，我是ShaderMaterialGLSL 的新手。我确实阅读了GLSL 手册并查看了在我的 Google 搜索中找到的一些示例，并且我正在尝试在我的项目中创建一些纹理效果。现在我只是想在表面上放置一个纹理，就好像我只是在使用MeshBasicMaterial. 代码片段如下所示：

<script type="x-shader/x-vertex" id="vertexskyshader">
    varying vec2 vUv;
    void main()
    {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
    }
</script>

<script type="x-shader/x-fragment" id="fragskyshader">
    varying vec2 vUv;
    uniform sampler2D material;
    void main()
    {
        gl_FragColor = texture2D(material, vUv);
    }
</script>

<script type="module">
    import * as THREE.........

    for(f = 0; f < lvlfaces.length; f++)
    {
        var facemat = new THREE.ShaderMaterial({ vertexColors: THREE.VertexColors, transparent: lvlfaces[f].adjmode, depthWrite: !lvlfaces[f].adjmode, depthTest: !lvlfaces[f].adjmode,
            uniforms: { texture: { value: matTable[lvlfaces[f].mat] } },
            vertexShader: document.getElementById("vertexskyshader").textContent,
            fragmentShader: document.getElementById("fragskyshader").textContent });

正在从文件中加载，lvlfaces并且是包含有关表面信息的对象数组（如纹理文件名.mat、使用的顶点、uv 坐标等）。matTable以纹理文件名命名的元素包含实际纹理数据（从 加载THREE.TextureLoader()）的数组。我遇到的问题是，当我在对象周围移动时，显示的纹理会更改为matTable. 不仅如此，使用相同循环但分配了不同纹理的另一个对象显示与我正在移动的对象完全相同的纹理和变化。

动画太大，无法导入

我感觉这里某处存在冲突，但我不知道解决方法是什么。

标签： javascriptthree.jsshader

解决方案

推荐阅读