将简单的自定义着色器应用于Three.js多维数据集

Question

我正在尝试将简单的自定义着色器应用于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> 

Answer 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>