THREE.js obj没有在vue中加载

Question

我对vue和THREE.js一起工作的方式感到很困惑。我使用的是完全相同的obj，一次是在普通的js环境中--在这个环境中，它工作得非常好--还有一次在vue.js中，画布保持为空，而dev控制台显示了几个警告。

我在js中使用的代码与vue中的代码完全相同(见下文)。我还附上了一个屏幕截图的警告，我在开发工具从铬。

我假设问题与OBJ的路径有关，因为一些意想不到的行显然不在文件中。我还尝试了各种替代方法，如"./assets/threeD/harrie.obj"或使用let ha = require("../assets/threeD/harrie.obj");，但是后者会导致编译错误，如下所示：

Failed to compile.

 ./src/assets/threeD/harrie.obj 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> # This file uses centimeters as units for non-parametric coordinates.
| 
| v -1.860180 5.269862 2.275461

删除第一行不会改变任何事情，错误只会转移到下一行内容

然而，最令人困惑的是，某种几何学似乎被加载，然而无论相机的缩放或旋转，在画布上绝对没有任何东西。三个是通过npm安装的

​

​

​

import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {OBJLoader} from "three/examples/jsm/loaders/OBJLoader";

export default {
  name: "Project1",
  data: function () {
    return {
      mesh: null
    }
  },
  methods: {
    harriethree: function () {
      let w = document.getElementById("threejsview").offsetWidth;
      let h = document.getElementById("threejsview").offsetHeight;
      const sceneContainer = document.getElementById("threejsview");
      const container = document.getElementById("scene");
      document.body.appendChild(container);

      let scene, camera, renderer, loader;

      scene = new THREE.Scene();
      scene.background = new THREE.Color('#1d1c1c');
      camera = new THREE.PerspectiveCamera(75, w / h, 0.1, 1000);
      camera.translateX(-10);


      renderer = new THREE.WebGLRenderer();
      renderer.setSize(w, h);
      renderer.domElement.id = "harrieCanvas";
      sceneContainer.appendChild(renderer.domElement);

      let directionalLight = new THREE.DirectionalLight("white", 1);
      scene.add(directionalLight);

      let orb = new OrbitControls(camera, renderer.domElement);
      orb.update();

      loader = new OBJLoader();
      loader.load("../assets/threeD/harrie.obj", (obj) => {
        scene.add(obj);
        console.log(obj);
        renderer.render(scene, camera);
      })

      animate();

      function animate() {

        requestAnimationFrame(animate);

        // required if controls.enableDamping or controls.autoRotate are set to true
        orb.update();

        renderer.render(scene, camera);
      }
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.harriethree();
    })
  }
}

#pro1Top {
  margin: 20vh 2vw 20vh 2vw;
  display: grid;
  grid-template-columns: 47vw 47vw;
  grid-template-rows: 80vh 80vh;
  grid-column-gap: 2vw;
}

#threejsview {
  grid-row: 1 /span 1;
  grid-column: 1 /span 1;
  width: 100%;
  height: 100%;
}

#pro1content {
  grid-row: 1 /span 2;
  grid-column: 2 /span 1;
  background-color: green;
}

<template>
  <div id="pro1Top">
    <div id="threejsview">
      <div id="scene"></div>
    </div>
    <div id="pro1content">
      <h1>Harrie</h1>
      <p>Harrie was created during</p>
    </div>
  </div>
</template>

​

Answer 1

在vue应用程序中，您的代码将在运行之前由webpack编译。您的应用程序的根通常是/dist/index.html，所以您提供的url将不是有效的，这将导致服务器返回一个html页面，因此在屏幕截图中出现错误消息。

要正确地指向模型，首先应该导入模型：

import ha from '../assets/threeD/harrie.obj'

这个ha将是最终的url，使用它加载模型：

loader.load(ha, ...

但是，您可能需要给webpack关于如何处理object文件的指导，否则webpack将不将它们包含在包中。添加一个包含obj的文件加载器规则可以做到这一点，应该如下所示：

{
   test: /\.(png|jpg|gif|mp4|ogg|svg|woff|woff2|ttf|eot|glb|obj|gltf|hdr)$/,
   loader: 'file-loader'
},

Answer 2

我使用的是ThreeJS + Vue3 + Vite。这是我的代码，它可以工作。希望能帮上忙！

src
├── assets
│   └── models
│       └── glb
│            └── Totoro.glb
└── components
    └── Sample6Modeling.vue

Sample6Modeling.vue

const loader = new GLTFLoader();
const modelUrl = new URL('../assets/models/glb/Totoro.glb', import.meta.url).href;
loader.load( modelUrl, 
     function ( gltf ) {scene.add( gltf.scene )}, 
     undefined, 
     function ( error ) { console.error( error )}
);