无法将 .obj 文件导入我的 Nuxt 组件答案

【问题标题】：Can't import .obj files into my Nuxt components无法将 .obj 文件导入我的 Nuxt 组件
【发布时间】：2020-05-22 06:50:10
【问题描述】：

在我的 Nuxt 项目中，我有一个使用 Three.js 制作的背景场景。现在我想将一个 .obj 加载到这个场景中。所以模型必须通过组件加载。

我的 index.vue 组件：

export default {
  name: 'scene',
  data () {
    return {
    }
  },
  mounted () {
    if(!this.scene) this.scene = new Scene({
      $canvas: this.$refs.canvas,
    });
  }
}

在我的 .js 文件中（在组件内部，.vue 也是如此）：

import * as THREE from "three";
import Common from "../Common";
import { OBJLoader2 } from '~/node_modules/three/examples/jsm/loaders/OBJLoader2.js';
const Model = require('@/assets/models/background_1.obj')

export default class Model_1{
    constructor(){
        this.init();
    }

    init(){
        var loader = new OBJLoader2();
        console.log(Model)
        loader.load(Model, (root) => {
          Common.scene.add(root);
        });
    }    
}

Nuxt 配置：

export default {
  mode: 'universal',
  build: {
    vendor: ['hammerjs'],
    extend (config, ctx) {
      config.module.rules.push(
      { 
        test: /\.(obj|gltf)$/i,
        loader: 'file-loader',
      }
      );
    }
  }
}

出现以下错误： Cannot find module '@/assets/models/background_1.obj'

尽管 .vue 组件会查看 assets 文件夹，获取 obj 并仅反映 url。但是它正在寻找一个模块，我不是很明白????‍♂️ .obj 文件位于 assets/models 文件夹中。

【问题讨论】：

您确定@/ 重定向到您想要的工作目录吗？因为在我们的其他导入中，您使用的是相对路径。
嗯，是的。我试图通过这种方式加载 .json 并且可以获得所需的数据。它可能是 .obj 文件。
啊，所以问题是我的 ObjLoader 想要一个 URL。如果我通过 require 导入文件，它会获取文件的内容，而不是 url。 Bur 如何获取 URL？
如果是这样，可以将您的文件放在static 文件夹中，而不是映射到/ 的assets 上，并且使用`${window.location.href}/models/background_1.obj` 或仅使用/models/background_1.obj 也可以。如果您使用 window 方法并且启用了 SSR，则必须确保它不会在服务器端执行，因为未定义 window 会导致错误

标签： vue.js three.js nuxt.js

【解决方案1】：

好的，尽管每个文档都说如果文件在static/file 中，您将不得不使用 src static/file。现在这对我不起作用，但只是使用 file 作为源代码。它正在工作，但有人可以澄清一下，因为我从 2 天以来一直在处理这个问题，而且有很多偏头痛?

【讨论】：

您好，能否请您发布完整的解决方案？我们需要什么样的加载器，导入 url 的正确方法是什么？这对我有很大帮助！谢谢

【解决方案2】：

将文件传输到静态文件夹示例 static/images/background.png 然后省略@/assets/

var textureURL = "images/background.png";
var texture = textureLoader.load(textureURL);

【讨论】：