CODEWITHSUNDEEP
three.js
Stamatis Valis
Stamatis Valis

Reputation: 115

Uncaught TypeError: THREE.OBJLoader is not a constructor | Vanilla js with Three.js

I copy-pasted this codepen on to my project, the only thing Ive changed was in the js file this line

   Background.renderer = new THREE.WebGLRenderer({ alpha: true });

to this

   Background.renderer = new THREE.WebGL1Renderer({ alpha: true });

cause my system doesnt support webgl2

I've been struggling a lot to make three js work on vanilla project and not react.js and I always get errors .

<script src="assets/js/modernizr.custom.63321.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r122/three.min.js"
      integrity="sha512-bzjaf85dHTL4H0BvkAJ/Jbvxqf1rDj+jVpCNe3oxQj/RXSnkx1HnKhqIcmMWghxEAbXsYgddrc38saWpltlkug=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <div class="particlehead"></div>
    <h1><strong>WebGL</strong> head made <em>of</em> particles</h1>
    <script src="assets/js/main.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
      integrity="sha512-3n19xznO0ubPpSwYCRRBgHh63DrV+bdZfHK52b1esvId4GsfwStQNPJFjeQos2h3JwCmZl0/LgLxSKMAI55hgw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/OBJLoader.js"></script>

EDIT SOLUTION:

changed back the code to Background.renderer = new THREE.WebGLRenderer({ alpha: true });

used this cdn

<script
      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"
      integrity="sha512-Umo2flOa4LGkVHRQ17JlfSaDZdj2QuedGJ8/H3OO4EFujr1rfpkWI6/njf3ucOws8PiqcyVvVKHYegwhirm/PA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

and as the answer below suggested I included THREE.OBJLoader before main.js

Upvotes: 2

Views: 464

Answers (1)

Mugen87
Mugen87

Reputation: 31026

You have to include THREE.OBJLoader before your main.js script is executed.

Besides, it seems you are using a very outdated version of THREE.OBJLoader. Make sure to use the same version of the loader like the core library. In your case r122. I suggest you use these links:

https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/OBJLoader.js

Upvotes: 2

Related Questions