three.js script vertex和fragment在react中使用/纯js写法

html原生script写法

<script id="vs" type="x-shader/x-vertex">
……
</script>
<script id="fs" type="x-shader/x-fragment">
……
</script>
调用方式如下：
material = new THREE.ShaderMaterial( {
……
					vertexShader: document.getElementById( 'vs' ).textContent,
					fragmentShader: document.getElementById( 'fs' ).textContent,
					depthTest: false
				} );

 

纯js写法，直接赋值字符串即可

material	= new THREE.ShaderMaterial({
……
            vertexShader	: 'varying vec2 vUv;\
        void main() {\
          vUv = uv;\
          gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\
        }',
            fragmentShader	: 'uniform sampler2D map;\
        uniform vec3 fogColor;\
        void main() {\
            ……
        }',
        });