如何在three.js中实时更改片段着色器？

Question

我做了显而易见的事，但它不起作用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="Units[]" multiple="multiple">
    <option value="1">Example1</option>
    <option value="2" selected="selected">Example2</option>
    <option value="3" selected="selected">Example3</option>
     <option value="4" >Example4</option>
</select>

Answer 1

如documentation中所述：

  

内置属性和制服随之传递给着色器   你的代码。如果您不希望WebGLProgram向您添加任何内容   着色器代码，您可以使用RawShaderMaterial而不是此类。您   可以使用指令#pragma unroll_loop来展开for   由着色器预处理器在GLSL中循环。该指令必须是   放在循环的正上方。循环格式必须对应   一个明确的标准

可以在RawShaderMaterial文档中找到three.js的过程。

这是一种很好的方法，因为我们是从物质层面开始的。这意味着您可以为每个材质自定义着色器设置它，而不是为webGL应用程序中的所有对象设置它。

var material = new THREE.RawShaderMaterial( {

    uniforms: {
        time: { value: 1.0 }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,

} );

在运行时只需使用经典的three.js简易风格设置素材：

  object3d.material = raw_mat;