Encountering an error using OBJLoader.js to load an obj model with the following message:
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")Showcasing my complete code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>3D Model</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>
// Creating a scene
var scene = new THREE.Scene();
// Creating a camera
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 5;
// Creating a renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// Creating a loader
var loader = new THREE.OBJLoader();
// Loading the model
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);
});
// Render loop
var render = function () {
requestAnimationFrame( render );
renderer.render( scene, camera );
};
render();
</script>
</body>
</html>Link to 3D model: https://drive.google.com/file/d/1ScF-bSB46F7Ua4dQ0jw1sihmuTjahvom/view?usp=share_link
If you have any insights on what might be causing this issue, please share. I appreciate any suggestions on how to effectively display my OBJ model on a webpage since previous attempts found online were unsuccessful for me.