Uncaught Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"

Questions
1

Hello :slight_smile:

I am trying to move my project to vue as I would like to use some of its front end features.

I am essentially loading a regular blender object into the window with orbit controls, but when I try to do it using the npm “three” package I get the following error:

Uncaught Error: THREE.OBJLoader: Unexpected line: "< !DOCTYPE html >"

This is a link to my git repo. The relavent file is in src/components/HelloWorld.vue and the relevant objects are in src/assets/basic.mtl||obj.

To note, it was working before I started adding object loaders and orbit controls with the rotating cube. If anyone has advice it would be much appreciated!

Thanks.

2

Related:

3

Hello, thanks for the link. I think that topic was unsolved on that page with no further links.
I’m still unsure how to fix it

4

As mentioned in the issue, the problem is that assets/basic.obj does not return valid OBJ content. I’ve debugged your app and the following HTML represents the actual response.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-three</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

This is obviously not a three.js but a Vue issue.

5

I load obj from Vue just fine, so my guess is that it’s simply a bad path.

It looks like you are attempting to load the obj from the root url, and not a sub path, so I don’t think you need to load it with ../assets/basic.obj. Have you tried with simply /assets/basic.obj or /src/assets/basic.obj?

6

Hey, I tried different paths, it’s weird because the path for the image is wokring with …/assets.logo.png. It always returns the same error.

Maybe it’s because I’m not exporting?

7

Thanks, yeah I agree, it doesn’t seem to be pointing to the correct file. Thanks anyway

8

The image in HelloWorld.vue referred by ../assets/logo.png will be working, because webpack is handling it.
But the obj will be loaded from the client side, not webpack. So you should not use the path as if reading a file from a script, but from the browser address bar.
So you should check if you can view/download the obj from http://localhost:8080/src/assets/basic.obj (you may need to change the port), and if that works, change the path to /src/assets/basic.obj

1 Like
9

Right ok. Yeah, nothing different is showing up when I type in that path. I also tried the /src/assets but that didn’t work either. How were you able to load up the object?
Thanks for your help

10

ah, I think I got it. Files under /src are not accessible from the browser in this config, only by webpack.

So what worked for me is moving the assets folder under your static folder, and then you can fetch the file with http://localhost:8081/static/assets/basic.obj.
Then you can load the obj from HelloWorld with /static/assets/basic.obj

Once I did that, I got an error with this not being found, so had to change those 2 lines:

mtlLoader.load("/static/assets/basic.mtl", function(materials) {
to
mtlLoader.load("/static/assets/basic.mtl", (materials)=>{

and

objLoader.load("/static/assets/basic.obj", function(object) {
to
objLoader.load("/static/assets/basic.obj", (object)=>{

Also, I see you are setting renderer, camera and other heavy objects as props. I don’t think I’d do that, as this means Vue will inject methods on every props of those objects to have them reactive. That does not seem necessary and would make things slower than they could be.

Hope that helps.

3 Likes
11

Ahhhhh that made me so happy. It works! Thanks very much for your help.

1 Like
12

thank you very much
you save my life

1 Like