String.replace is not a function at three.module.js inside resolveIncludes funtion

Questions
,
1

I get this error when I pass canvas to webGLRenderer.
this is my index.js that contain a Gl class :

        import * as THREE from "three";
        import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
        import vertexShader from "./vertex.glsl";
        import fragmentShader from "./fragment.glsl";
        import img from "../assets/img/bg-image.jpg";




        class Gl {
          constructor(can) {
             
            this.scene = new THREE.Scene();

            this.camera = new THREE.PerspectiveCamera(
              45,
              window.innerWidth / window.innerHeight,
              0.1,
              100
            );
            this.canvas = can;
            console.log(document.querySelector("#canvas"))
            this.camera.position.z = 1;
            this.renderer = new THREE.WebGLRenderer({
              canvas:document.querySelector("#canvas"),
              antialias: true
            });

            this.renderer.setSize(window.innerWidth, window.innerHeight);
            this.renderer.setClearColor(0xffffff, 1);

            this.clock = new THREE.Clock();

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

            this.onResize();
          }

          init() {
            this.createMesh();
            this.addEvents();
          }

          createMesh() {
            this.geometry = new THREE.PlaneGeometry(0.4, 0.6, 32, 32);
            this.material = new THREE.ShaderMaterial({
              vertexShader,
              fragmentShader,
              uniforms: {
                uTime: { value: 0.0 },
                uTexture: { value: new THREE.TextureLoader().load(img) }
              },
              // wireframe: true,
              side: THREE.DoubleSide
            });
            this.mesh = new THREE.Mesh(this.geometry, this.material);
            this.scene.add(this.mesh);
          }

          addEvents() {
            window.requestAnimationFrame(this.run.bind(this));
            window.addEventListener("resize", this.onResize.bind(this), false);
          }

          run() {
            requestAnimationFrame(this.run.bind(this));
            this.render();
          }

          render() {
            this.material.uniforms.uTime.value = this.clock.getElapsedTime();
            this.renderer.render(this.scene, this.camera);
          }

          onResize() {
            const w = window.innerWidth;
            const h = window.innerHeight;

            this.camera.aspect = w / h;
            this.camera.updateProjectionMatrix();

            this.renderer.setSize(w, h);
          }
        }

        export default Gl;

and inside Logo.vue

    <template>

      <div>

              <canvas ref="can" id="canvas"></canvas>

      </div>

    </template>

    <script>

    import Gl from "../utils/index";

    // import * as THREE from "three";

    // import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

    //  import vertexf from '../utils/vertex.glsl'

    // import fragment from "../utils/fragment.glsl";

    export default {

    mounted:function (){

     

    let can = this.$refs.can;

    let scene= new Gl(can);

    scene.init()

       

    }

    }

    </script>

    <style>

    #canvas{

        width: 600px;

        height: 600px;

    }

    </style>

errer
errer766Ɨ357 15.7 KB

2

This runtime error likely happens since the vertexShader and fragmentShader variables in your app are no strings.

3 Likes
3

thank you very much

4

Hi, I have a similar issue. How do I convert my vertexShader and fragmentShader variables to strings?

Capture
Capture728Ɨ622 55.1 KB

Thanks. Iā€™m just getting into webGL

5

Try it like so:

const fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
const vertexShader = document.getElementById( 'vertexShader' ).textContent;
const atmosphereVertexShader = document.getElementById( 'atmosphereVertexShader' ).textContent;
6

This was really helpful. Works fine now.