webgl 着色器可以在 Three.js 中运行吗？

Question

我想在 Three.js 中处理 webgl 纹理，为此，我编写了一个 webgl 着色器。

如果我在“use_ Three”设置为 false 的情况下运行笔，一切都很好，但如果我将其设置为 true，我会得到黑色结果。有什么想法吗？

pen : https://codepen.io/joserpagil/pen/XWyGOPY?editors=0010

Answer 1

在您的代码中使用以下基于

ShaderMaterial

的模板：

let camera, scene, renderer;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.set(0, 0, 1);

  scene = new THREE.Scene();

  const geometry = new THREE.PlaneGeometry();

  const material = new THREE.ShaderMaterial({

    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent

  });

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

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

}

function animate() {

  requestAnimationFrame(animate);

  renderer.render(scene, camera);

}

body {
    margin: 0px;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<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">

            void main() {

                gl_FragColor = vec4 ( 1., .45, .7, 1. );

            }

</script>