将简单的自定义着色器应用于 Three.js Cube答案

【问题标题】：Apply Simple Custom Shader to Three.js Cube将简单的自定义着色器应用于 Three.js Cube
【发布时间】：2017-08-11 02:16:09
【问题描述】：

我正在尝试将简单的自定义着色器应用于 Three.js 中的立方体，但遇到了一些麻烦。当我尝试应用着色器时，立方体消失了。如果我使用常规的 Toon 或 Lambert 材质，这不是问题 - 立方体会旋转并且可以正常操作。

当我尝试应用自定义着色器时，Orbit Controls 也会停止工作。尽管我已经浏览了这些示例，但我似乎无法让它发挥作用。

//Set Scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 3;

//Create Light
var light = new THREE.PointLight(0xFE938C, 1.5);
      light.position.set(0,5,20);
      scene.add(light);

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

 var uniforms = {
    u_time: {type: 'f', value: 0.2},
    u_resolution: {type: 'v2', value: new THREE.Vector2()},
  };
  
	var material = new THREE.ShaderMaterial({
					uniforms: uniforms,
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
				});


var cube = new THREE.Mesh( geometry, material );
cube.position.set(0, 0 , 0);

scene.add( cube );

var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );

controls = new THREE.OrbitControls( camera, renderer.domElement );


			var render = function () {
				requestAnimationFrame( render );

				//cube.rotation.x += 0.1;
				//cube.rotation.y += 0.005;

				renderer.render(scene, camera);
			};

render();

<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
            gl_Position = vec4( position, 1.0 );
        }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
 uniform vec2 u_resolution;
 uniform float u_time;

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            gl_FragColor=vec4(st.x,st.y,0.0,1.0);
        }
</script>

【问题讨论】：

标签： javascript three.js webgl shader

【解决方案1】：

至少你需要使用一个顶点着色器，它考虑了三个定义并传入的投影矩阵和模型视图矩阵

    void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }

//Set Scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 3;

//Create Light
var light = new THREE.PointLight(0xFE938C, 1.5);
      light.position.set(0,5,20);
      scene.add(light);

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

 var uniforms = {
    u_time: {type: 'f', value: 0.2},
    u_resolution: {type: 'v2', value: new THREE.Vector2()},
  };
  
	var material = new THREE.ShaderMaterial({
					uniforms: uniforms,
					vertexShader: document.getElementById( 'vertexShader' ).textContent,
					fragmentShader: document.getElementById( 'fragmentShader' ).textContent
				});


var cube = new THREE.Mesh( geometry, material );
cube.position.set(0, 0 , 0);

scene.add( cube );

var renderer = new THREE.WebGLRenderer({alpha: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize( window.innerWidth, window.innerHeight);
document.body.appendChild( renderer.domElement );



			var render = function () {
				requestAnimationFrame( render );

        uniforms.u_resolution.value.x = window.innerWidth;
        uniforms.u_resolution.value.y = window.innerHeight;
        
				cube.rotation.x += 0.1;
				cube.rotation.y += 0.005;

				renderer.render(scene, camera);
			};

render();

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
    void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
 uniform vec2 u_resolution;
 uniform float u_time;

        void main() {
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            gl_FragColor=vec4(st.x,st.y,0.0,1.0);
        }
</script>

【讨论】：