Trying to Load object with ThreeJs - javascript

I need help loading a object file from my local browser in Threejs ( Rev 71). The error I get is loadModel.html:1 Uncaught SyntaxError: Unexpected token #.
I tried loading the object file by chrome --allow-file-access-from-files, but
still I get a blank page with the same error. I Would like to know what I did wrong within this simple script
<!DOCTYPE html>
<html lang="en">
<head>
<title> Load Model</title>
<meta charset="utf-8">
</head>
<body style="margin: 0;">
<script src="three.js"></script>
<script src="ObjectLoader.js"></script>
<script>
var scene, camera, renderer;
init();
animate();
function init()
{
scene = new THREE.Scene()
var WIDTH = window.innerWidth,
HEIGHT = window.innderHeight;
//Created camera
camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 2000);
camera.position.set(0,0, 100);
scene.add(camera);
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
var loader = new THREE.ObjectLoader();
loader.load( 'obj/Male.obj', function (object) {
scene.add( object );
});
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
}
function animate()
{
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
</body>
</html>

I was getting the same error, but then I checked carefully the object file, and there were the values like ".#IND" ("IND" for "indeterminate") in some arrays, which was generated by some script while converting the object from one file to another ("#" caused that error), I changed these values to "0", and the issue "Uncaught SyntaxError: Unexpected token #" disappeared like a fine mist in the morning.

Related

Problem with loading OBJLoader.js in three.js

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.
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/three#0.119/build/three.min.js
https://cdn.jsdelivr.net/npm/three#0.119/examples/js/loaders/OBJLoader.js

Loading module from was blocked because of a disallowed MIME type (“”)

I am going through a three.js example and when I use import within a javascript module I get the error:
Loading module from “http://localhost:8000/build/three.module.js” was blocked because of a disallowed MIME type (“”).
When I import traditionally using a script tag I do not get this error. Here is my code:
Commented out lines will render a rotating cube
<!DOCTYPE html>
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from '/build/three.module.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 );
// document.body.appendChild( renderer.domElement );
// const geometry = new THREE.BoxGeometry();
// const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// const cube = new THREE.Mesh( geometry, material );
// scene.add( cube );
// camera.position.z = 5;
// const animate = function () {
// requestAnimationFrame( animate );
// cube.rotation.x += 0.01;
// cube.rotation.y += 0.01;
// renderer.render( scene, camera );
// };
// animate();
</script>
</body>
</html>
In contrast, this works fine:
<!DOCTYPE html>
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="build/three.js"></script>
<script>
// ...
</script>
</body>
</html>
My file structure is:
|_index.html
|_ ...
|_build/
|_ three.module.js
|_ three.js
|_ ...
Why do i get the MIME-type error when using import in a module? I would like to be able to use this import method because all the other three.js examples seem to do this in JS modules.
I get the same error message Loading module from “http://localhost:8080/build/three.module.js” was blocked because of a disallowed MIME type (“”). when I start my http server in the three_js/examples/ folder. Starting the http-server in three_js/ fixes the problem. The reason is that the import statement for me was import * as THREE from '../build/three.module.js';. I'm not sure this solves your exact problem, but it seems closely related.

"THREE.OBJLoader is not a constructor" and "Unexpected token {" in OBJLoader and OrbitControls

I'm trying to display an OBJ 3D model as a wireframe that can be moved with OrbitControls using Three.js. I'm new with three.js, so I apologize if I'm missing something "obvious".
I've been able to get a cube to show as a wireframe with OrbitControls.
In a different setup, I was able to display the OBJ 3D model as a wireframe. Therefore, the issue isn't related to the 3D model.
The issue happens when I try to mix both approaches together.
I've tried to go about this in two ways:
I tried to insert the OBJLoader into the cube environment. (most promising)
I tried to add OrbitControls into the working, but unmovable, wireframe OBJ environment. (didn't really work at all)
Most of the other answers focus on the order of scripts: yes, I have tried to move the three.min.js, OrbitControls.js, OBJLoader.js, and my main working model.js into order and disorder, in every possible way.
Here's my code:
<head>
<style media="screen"> html, body { margin: 0; } #model_container { background-color: #333333; margin: 50px; } </style>
<title>OBJ Wireframe</title>
<script defer src="script/three/build/three.min.js"></script>
<script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
<script defer src="script/model.js"></script>
</head>
<body>
<div id="model_container"></div>
</body>
const globalWidth = window.innerWidth - 100;
const globalHeight = window.innerHeight - 100;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, globalWidth / globalHeight, 0.1, 1000);
camera.position.x = 300;
camera.position.y = -6;
camera.position.z = 1;
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setClearColor( 0xffffff, 0);
renderer.setSize(globalWidth, globalHeight);
const canvas = document.getElementById("model_container");
canvas.appendChild( renderer.domElement );
const ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
const loader = new THREE.OBJLoader();
loader.load("assets/castle.obj", function(object) {
const geometry = object.children[0].geometry;
THREE.GeometryUtils.center(geometry);
const material = new THREE.MeshLambertMaterial({});
const mesh = new THREE.Mesh(geometry, material);
mesh.material.wireframe = true;
scene.add(mesh);
})
const controls = new THREE.OrbitControls(camera);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.1;
controls.target.set(0, 0, 0);
var animate = function () {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
};
animate();
Here are the errors I can't fix after 3 days of searching and trying everything I could:
OrbitControls.js:9: Uncaught SyntaxError: Unexpected token {
OBJLoader.js:5: Uncaught SyntaxError: Unexpected token {
Uncaught TypeError: THREE.OBJLoader is not a constructor at model.js:23
The errors seem to be rooted in the THREE.js files themselves, which I find very strange. I'm all out of ideas and documentation to go through.
I'm running this with MAMP, but have also tried uploading to a server to see if the issue is related to being local files or anything similar.
<script defer src="script/three/examples/jsm/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/jsm/loaders/OBJLoader.js"></script>
It seems you are loading the files from the wrong path. Files from the jsm directory are ES6 modules which are imported via ES6 import syntax. Try to include the files from the js directory:
<script defer src="script/three/examples/js/controls/OrbitControls.js"></script>
<script defer src="script/three/examples/js/loaders/OBJLoader.js"></script>
three.js R106

Why my Three.js code isn't working when i test it?

I'm trying out Three.js, I followed a tutorial step-by-step. In the code editor I'm using( Visual Studio Code 2019) everything seems normal, but when I test it, nothing appears on the page.
the editor I'm using, used the desktop as the place to locate my code, since it is a .html file I could run it. When I did that, the only thing that appeared was the navbar I programmed, nothing else
This is the entire three.js code:
<script src="three.js-dev/build/three.min.js"> </script>
<script>
var scene = new THREE.scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight);
var renderer = new THREE.WebGLRenderer({antialias = true});
renderer.setSize( window.innerWidth, window.innerHeight);
$('body').append( renderer.domElement);
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial ( { color = 0xff0000 });
var cube = new THREE.Mesh( geometry, material) ;
scene.add( cube );
cube.position.z = -5;
var animate = function () {
cube.rotation.x += 0.01;
renderer.render(scene, camera);
requestAnimationFrame( animate );
};
animate();
and this the code before it:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script
src="https://code.jquery.com/jquery-2.1.4.js"
integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4="
crossorigin="anonymous"></script>
</head>
<body>
<div id="navbar"><span>Three.js Tut</span></div>
I expected a red cube rotating, but nothing appeared. ¿Is there something I'm doing wrong?
You have a few errors in your code:
THREE.scene should be THREE.Scene
{antialias = true} should be {antialias: true}
{ color = 0xff0000 } should be { color: 0xff0000 }
Live demo with your code: https://jsfiddle.net/so736vxj/
BTW: If you are using VSCode, I'm a bit irritated that no errors are highlighted. Especially the last two syntax errors should be reported since it is no valid JavaScript.
three.js R105

Failed to load error in Three JS

I use the addon io_blender to export my 3d model to JSON file.
but when i try to load in the html show the next error:
three.js:31844 Failed to load file:///F:/xampp/htdocs/threejs/Rock1.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
enter image description here
readed a lot of possible solutions, but i don't understand.
some people said that i need to put the json file on a server. so i copy the files on htdocs from xampp and didn't work.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/OBJLoader.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new THREE.OrbitControls(camera, renderer.domElement);
var obj;
var loader = new THREE.JSONLoader();
loader.load(
'Rock1.json',
function(g,m){
obj = new THREE.Mesh(g,m);
scene.add(obj);
obj.position = -6;
obj.rotation = 0.4;
}
);
//create the model
/*var geometry = new THREE.BoxGeometry(1, 1, 1);
//create material
var material = new THREE.MeshBasicMaterial({color: 0xFFFFFF, wireframe: false});
var cube = new THREE.Mesh(geometry, material);*/
//scene.add (cube);
camera.position.z = 3;
//game logic
var update = function(){
/*cube.rotation.x += 0.01;
cube.rotation.y += 0.05;*/
};
//draw scene
var render = function() {
renderer.render(scene, camera);
};
//run game loop (update. render, repeat)
var GameLoop = function(){
requestAnimationFrame( GameLoop );
update( );
render( );
};
GameLoop();
</script>
</body>
</html>
thanks
You need to upload your json file on a server, basically this is the solution.
I had the same error and I found the same possibles solutions, I putted the dae file on a server but it didn't work as you said, but in my case I got a different error
Failed to load https://...test.dae: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
I added this chrome extension Allow-Control-Allow-Origin and the problem was fixed.
Your problem is related to json file but I'm sure this solution will be useful.

Categories