Function App

11-shaders-part-02/src/App.jsx:7–157

()

import SceneInit from './lib/SceneInit';

function App() {
  useEffect(() => {
    const test = new SceneInit('myThreeJsCanvas');
    test.initialize();
    test.animate();

    const axesHelper = new THREE.AxesHelper(16);
    test.scene.add(axesHelper);

    // part 1 - boilerplate code
    // const boxGeometry = new THREE.BoxGeometry(24, 4, 24, 24, 4, 24);
    // const boxMaterial = new THREE.MeshStandardMaterial({
    //   color: 0xff0000,
    //   wireframe: true,
    // });
    // const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
    // test.scene.add(boxMesh);

    // refactor glsl shader code
    // const boxGeometry = new THREE.BoxGeometry(24, 4, 24, 24, 4, 24);
    // const boxMaterial = new THREE.ShaderMaterial({
    //   wireframe: true,
    //   vertexShader: `
    //   void main()	{
    //     vec4 result;
    //     result = vec4(position.x, position.y, position.z, 1.0);
    //     gl_Position = projectionMatrix
    //       * modelViewMatrix
    //       * result;
    //   }
    //   `,
    //   fragmentShader: `
    //   // varying vec3 pos;
    //   void main() {
    //     gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    //   }
    //   `,
    // });
    // const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
    // test.scene.add(boxMesh);

    // define uniform data
    const uniformData = {
      u_time: {
        type: 'f',
        value: test.clock.getElapsedTime(),
      },
    };
    const render = () => {
      uniformData.u_time.value = test.clock.getElapsedTime();
      window.requestAnimationFrame(render);
    };
    render();

    // glsl shader with uniform variables
    // const boxGeometry = new THREE.BoxGeometry(24, 4, 24, 24, 4, 24);
    // const boxMaterial = new THREE.ShaderMaterial({
    //   wireframe: true,