OBJ model cannot be loaded Error:Unexpected line: "<!DOCTYPE html>"

Hello :slightly_smiling_face:,,
I encountered the same problem as him, I tried to solve it, but obviously there was no way, OBJ model cannot be loaded

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader";
import * as Stats from "stats-js";
import { GUI } from "dat.gui";

export default {
  name: "three",
  data() {
    return {
      container: null,
      camera: null,
      renderer: null,
      controls: null,
      scene: null,
      mesh: null,
      stats: null
    };
  },
  methods: {
    init() {
      this.container = this.$el;

      this.scene = new THREE.Scene();

      // Background Color背景顏色
      this.scene.background = new THREE.Color(0x000000, 0);

      // function 函數整理
      this.createCamera();
      this.createControls();
      this.createLight();
      // this.meangerProgress();
      this.loader();
      this.createRenderer();
      this.onWindowResize();
      this.createGui();
      this.regenerate();
    },

    // Create a Camera 建立相機
    createCamera() {
      this.camera = new THREE.PerspectiveCamera(
        75, //FOV
        window.innerWidth / window.innerHeight, //aspect
        0.1, //near
        1500 //far
      );
      this.camera.position.set(0, 0, 1000); // x,y,z
    },

    // Create a Controls 建立控制器
    createControls() {
      this.controls = new OrbitControls(this.camera, this.container);
      this.controls.enableDamping = true;
      this.controls.campingFactor = 0.25;
      this.controls.enableZoom = true;
    },

    // Create a Lights 建立光源組
    createLight() {
      this.ambient = new THREE.AmbientLight(0xffffff);

      this.keyLight = new THREE.DirectionalLight(
        new THREE.Color("hsl(313, 100%, 83%)"),
        3
      );
      this.keyLight.position.set(-100, 0, 200);

      this.fillLight = new THREE.DirectionalLight(
        new THREE.Color("hsl(181, 54%, 76%)"),
        1
      );
      this.fillLight.position.set(100, 100, -500);

      this.backLight = new THREE.DirectionalLight(0xffffff, 3.0);
      this.backLight.position.set(100, 150, -150).normalize();

      this.light1 = new THREE.PointLight(0xa2e2e3, 300, 1000);
      this.light1.position.set(100, 230, 200);

      this.light2 = new THREE.PointLight(0xa2e2e3, 200, 1000);
      this.light2.position.set(100, -100, -300);

      this.light3 = new THREE.PointLight(0xffffff, 100, 1000);
      this.light3.position.set(-60, -100, 50);

      this.light4 = new THREE.PointLight(0xfca4d3, 400, 1000);
      this.light4.position.set(0, 180, 50);

      this.light5 = new THREE.PointLight(0xa2e2e3, 400, 1000);
      this.light5.position.set(250, 200, -150);

      this.light6 = new THREE.PointLight(0xa2e2e3, 800, 1000);
      this.light6.position.set(-200, 250, -350);

      this.scene.add(
        this.ambient,
        this.light1,
        this.light2,
        this.light3,
        this.light4,
        this.light5,
        this.light6
      );

      // pointLightHelper 輔助
      this.sphereSize = 50;

      this.pointLightHelper = new THREE.PointLightHelper(
        this.light1,
        this.sphereSize
      );
      this.pointLightHelper2 = new THREE.PointLightHelper(
        this.light2,
        this.sphereSize
      );
      this.pointLightHelper3 = new THREE.PointLightHelper(
        this.light3,
        this.sphereSize
      );
      this.pointLightHelper4 = new THREE.PointLightHelper(
        this.light4,
        this.sphereSize
      );
      this.pointLightHelper5 = new THREE.PointLightHelper(
        this.light5,
        this.sphereSize
      );
      this.pointLightHelper6 = new THREE.PointLightHelper(
        this.light6,
        this.sphereSize
      );

      this.scene.add(
        this.pointLightHelper,
        this.pointLightHelper2,
        this.pointLightHelper3,
        this.pointLightHelper4,
        this.pointLightHelper5,
        this.pointLightHelper6
      );
    },
    // meangerProgress() {
    //   this.onProgress = function(xhr) {
    //     if (xhr.lengthComputable) {
    //       this.percentComplete = (xhr.loaded / xhr.total) * 100;
    //       console.log(Math.round(this.percentComplete, 2) + "% downloaded");
    //     }
    //   };

    //   this.onError = function() {};

    //   this.manager = new THREE.LoadingManager();
    // },

    //addOBJ
    loader() {
      this.mtlLoader = new MTLLoader();
      this.mtlLoader.setResourcePath("../../public/models");
      this.mtlLoader.setPath("../../public/models");
      this.objLoader = new OBJLoader();
      let vm = this;

      this.mtlLoader.load("rhinoceros-Psychedelic.mtl", materials => {
        materials.preload();

        vm.objLoader.setMaterials(materials);
        vm.objLoader.setPath("../../public/models");
        vm.objLoader.load("rhinoceros-Psychedelic.obj", object => {
          vm.mesh = object;
          vm.scene.add(vm.mesh);
        });
      });
    },

    // Creat the Renderer 建立渲染器
    createRenderer() {
      this.renderer = new THREE.WebGLRenderer({ alpha: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);

      this.renderer.setPixelRatio(window.devicePixelRatio);

      this.renderer.gammaFactor = 2.2;
      // this.renderer.gammaOutput = true;

      this.renderer.physicallyCorrectLights = true;

      this.container.appendChild(this.renderer.domElement);

      this.stats = new Stats();
      this.container.appendChild(this.stats.dom);
    },

    // animate 動畫執行
    animate() {
      requestAnimationFrame(this.animate);

      this.render();
      this.stats.update();
    },

    // render 渲染
    render() {
      // 物體旋轉 model rotation
      if (this.mesh) {
        this.mesh.rotation.y += this.Data.speed;
      }
      this.renderer.render(this.scene, this.camera);
      window.addEventListener("resize", this.onWindowResize);
    },
    // RWD 螢幕偵測
    onWindowResize() {
      // console.log( '你調整瀏覽器大小了' );

      this.camera.aspect = window.innerWidth / window.innerHeight;

      // update the camera's frustum 相機錐角
      this.camera.updateProjectionMatrix();

      // update the size of the renderer AND the canvas
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    },
    createGui() {
      // GUI Display
      this.gui = new GUI();

      // GUI Data 參數
      this.Data = {
        color: "#ffffff",
        speed: -0.01
      };

      this.Folder = this.gui.addFolder("Rhinoceros");

      // GUI Light
      this.Folder.addColor(this.Data, "color")
        .onChange(this.regenerate)
        .name("Color");
      this.Folder.add(this.Data, "speed", -0.01, -0.05).name("Speed");

      this.Folder.open();
    },
    regenerate() {
      this.keyLight = new THREE.DirectionalLight(this.Data.color, 1);
      this.scene.add(this.keyLight);
    }
  },
  mounted() {
    this.init();
    this.animate();
  }
};

The error you see means that the model is not found at the URL you’ve given. You may want to inspect the “Network” tab in your browser’s developer tools to see where it is looking for this file.

It is difficult to guess the correct path without the ability to access a demo or reproduce your web server configuration. Since you appear to be using Vue, you may want to check the static assets section in the Vue documentation. In particular, assets in the “public” folder must be referenced with absolute paths, not relative ones with ../../ prefixed.

1 Like

Thanks for your reply,

Modified path:

Maybe you said this? Obj file

thank u , My problem has been solved :joy:

path +/

mtlLoader.setResourcePath("/models/");
mtlLoader.setPath("/models/");
1 Like