Problem with loading OBJLoader.js in three.js

Question

I have the following error while using OBJLoader.js to load obj model o Resource "https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/OBJLoader.js" blocked due to mismatch (X-Content-Type-Options: nosniff) MIME type ("text/html").

My whole code below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Model 3D</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r119/OBJLoader.js"></script>

    <style>
        body {
            margin: 0;
        }
    </style>

</head>
<body>
    <script>
        // Tworzymy scenę
        var scene = new THREE.Scene();

        // Tworzymy kamerę
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        camera.position.z = 5;

        // Tworzymy render
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        // Tworzymy loader
        var loader = new THREE.OBJLoader();

        // Załadowanie modelu
        loader.load( 'Rubix.obj', function ( object ) {
            scene.add( object );
            object.position.set(0, 0, 0);
            object.rotation.set(0, 0, 0);
            object.scale.set(1, 1, 1);
        });

        // Pętla renderująca
        var render = function () {
            requestAnimationFrame( render );
            renderer.render( scene, camera );
        };

        render();
    </script>
</body>
</html>

3D model: https://drive.google.com/file/d/1ScF-bSB46F7Ua4dQ0jw1sihmuTjahvom/view?usp=share_link

If you have any ideas what can go wrong please tell me. I will be grateful if you can propose me how to display my OBJ model on a webpage, because I tried ideas from the Internet and none of them worked for me.

Mugen87 · Accepted Answer · 2023-01-21 09:36:03Z

3

cdnjs only serves the core files but not the examples/addons like loaders or controls. Do you mind using a different CDN instead? Below links should work as expected.

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

edited Jan 21, 2023 at 9:36

answered Jan 21, 2023 at 9:08

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dawid Krzysiak Over a year ago

I used your links and it's still black screen, however the error with MIME dismatch disapperaed. Now the error says "Error: Promised response from onMessage listener went out of scope"

Mugen87 Over a year ago

This error is sometimes caused by browser extensions. Try to disable all installed addons, use a private tab or install a different browser.

Dawid Krzysiak Over a year ago

I tried it on Chrome and now the access to local model is blocked. I updated the question with link to 3D model I try to insert. Can you try it by yourself if it works?

Mugen87 Over a year ago

Are you hosting your application on a local web server? You have to do this otherwise security policies block the access. BTW: The model itself can be imported in the three.js editor so there is no issue with the loader.

Mugen87 Over a year ago

Read this for more details: threejs.org/docs/index.html#manual/en/introduction/…

|

Collectives™ on Stack Overflow

Problem with loading OBJLoader.js in three.js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related