THREE.js - How to load objects?

Question

I just started learning THREE.js. While I'm able to make cubes and spheres just fine, whenever I try to load an .obj, it keeps throwing random errors. I'm completely confused.

// instantiate a loader
const loader = new OBJLoader();

// load a resource
loader.load(
    // resource URL
    'models/boat_large.obj',
    // called when resource is loaded
    function ( object ) {

        scene.add( object );

    },
    // called when loading is in progresses
    function ( xhr ) {

        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    },
    // called when loading has errors
    function ( error ) {

        console.log( 'An error happened' );

    }
);

I get the error: OBJLoader is not defined

I add <script type="module" src="loaders/OBJLoader.js"></script> to my html, I get the error:

Access to script at 'file:///C:/Users/Syzygy/Desktop/hello/www/loaders/OBJLoader.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

I've followed all the tutorials I can find, I'm not making any progress

Does this answer your question? [javascript modules and CORS](https://stackoverflow.com/questions/50197495/javascript-modules-and-cors) — UnholySheep, Jan 29 '21 at 14:35
@UnholySheep Yes and no. I uploaded the file to my webhost, and now gives me the error `Uncaught SyntaxError: Cannot use import statement outside a module` https://www.deadbydawn.io — Vardan Betikyan, Jan 29 '21 at 15:11

score 1 · Answer 1 · answered Jan 30 '21 at 09:20

Here's an example (based on some three.js code) with all the pieces in place and some animation.


    <html>
      <body>
        <script type="module">
          import * as THREE from "https://unpkg.com/three@0.125.2/build/three.module.js";
          import { OBJLoader } from "https://unpkg.com/three@0.125.2/examples/jsm/loaders/OBJLoader.js";
    
          const scene = new THREE.Scene();
          const camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
          );
    
          const renderer = new THREE.WebGLRenderer();
          renderer.setSize(window.innerWidth, window.innerHeight);
          renderer.setClearColor("#ffffff");
          document.body.appendChild(renderer.domElement);
    
          var model;
    
          const loader = new OBJLoader();
          loader.load("obj_model_name.obj", obj => {
            model = obj;
            scene.add(model);
          });
    
          camera.position.set(10, 10, 10);
          camera.lookAt(0, 0, 0);
    
          const animate = function() {
            requestAnimationFrame(animate);
    
            if (model) {
              model.rotation.x += 0.01;
              model.rotation.y += 0.01;
            }
    
            renderer.render(scene, camera);
          };
    
          animate();
        </script>
      </body>
    </html>

score 0 · Answer 2 · answered Jan 29 '21 at 15:51

0

change your < script > tag to < script type="module" >, so your code could be: < script type="module" > import {OBJLoader} from "./loaders/OBJLoader.js";

const loader = new OBJLoader(); ......

answered Jan 29 '21 at 15:51

Tony Luo

1
1

It's already `type=module`, I also added `` to my HTML file, still gives me `OBJLoader is not defined` error – Vardan Betikyan Jan 29 '21 at 16:02

score 0 · Answer 3 · answered Sep 28 '21 at 01:34

0

Try to add:

import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';

answered Sep 28 '21 at 01:34

oriuken

653
3
7
19

THREE.js - How to load objects?

3 Answers3