如何在 Vue 中使用 Three.js 脚本？

Question

我正在尝试在 Vue 项目中使用用普通 JavaScript 编写的 Three.js 脚本。该脚本使用三个函数 objLoader 从本地文件加载对象。该脚本在 vanilla js 中运行良好，为了将其移动到 Vue，需要进行一些修改。首先，我创建了对模板画布的引用，其次，我将几个变量初始化移至 onMounted。我可以加载原始几何体，但加载 .obj 文件似乎存在一些问题。我尝试了几种文件格式但没有成功。这是在香草中工作的原始代码：

import * as THREE from 'three';
import {OBJLoader} from 'three/addons/loaders/OBJLoader.js';

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 17, 40);

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
  alpha: true
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera);

const material = new THREE.MeshBasicMaterial({color: 0xff380e, wireframe: true});

const modelLoader = new OBJLoader();
modelLoader.load( './assets/model.obj', ( model ) => {
      model.traverse( child => {
        if (child.isMesh){
            child.material = material;
        }
    })

      model.translateX(-30)
      model.translateY(10)

            scene.add( model );
      
      function animate() {
        requestAnimationFrame(animate);
        model.rotation.y -= 0.01;
      
        renderer.render(scene, camera);
      }
      animate()
} )

我尝试对所有相关变量使用 refs，使用 onMounted 进行初始化，并使用 Three 库中的各种函数。预期的输出是加载的模型，并且代码适用于原始几何体，但是当我需要从文件加载模型时，objLoader 函数不会产生任何结果。

Answer 1

在 vue3 脚本标签中加载文件的最佳实践是导入它。

import obj from '@/assets/model.obj';
...
modelLoader.load( obj, ( model ) => { ...