将简单自定义着色器应用于 Three.js 立方体

Question

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

当我尝试应用自定义着色器时，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>

Answer 1

至少你需要使用一个vertex shader，这个vertex shader要考虑到三个定义和传入的投影矩阵和模型视图矩阵

    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>

将简单自定义着色器应用于 Three.js 立方体

Apply Simple Custom Shader to Three.js Cube

javascript

shader

webgl

three.js