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

@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 deadbydawn.io — Vardan Betikyan
– Vardan Betikyan, Commented Jan 29, 2021 at 15:11

mglonnro · Accepted Answer · 2021-01-30 09:20:04Z

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/[email protected]/build/three.module.js";
          import { OBJLoader } from "https://unpkg.com/[email protected]/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>

Tony Luo · Accepted Answer · 2021-01-29 15:51:31Z

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, 2021 at 15:51

Tony Luo

11 bronze badge

1 Comment

Vardan Betikyan Over a year ago

It's already type=module, I also added <script type="module" > import {OBJLoader} from "./loaders/OBJLoader.js"; </script> to my HTML file, still gives me OBJLoader is not defined error

oriuken · Accepted Answer · 2021-09-28 01:34:37Z

0

Try to add:

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

answered Sep 28, 2021 at 1:34

oriuken

7823 gold badges7 silver badges19 bronze badges

Collectives™ on Stack Overflow

THREE.js - How to load objects?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related